Question

大家如何，我想知道如何设置此布局？圆形取整机两个盒子是容器。但是，如何在背景的顶部设置蓝色背景呢？

谢谢。

Answer 1

您可以将Stack小部件与Positioned小部件一起使用。

Answer 2

这是您的基本应用程序的外观。您必须创建自己的窗口小部件，但所需的布局已完成。希望对您有帮助！

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'StackOverflow layout',
      theme: ThemeData(),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.grey[300],
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              Stack(
                children: <Widget>[
                  Container(
                    height: 40.0,
                    color: Colors.blue,
                  ),
                  SafeArea(
                    child: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(5.0)),
                        color: Colors.white,
                      ),
                      margin: EdgeInsets.symmetric(horizontal: 40.0),
                      height: 50.0,
                    ),
                  ),
                ],
              ),
              Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(5.0)),
                  color: Colors.white,
                ),
                margin: EdgeInsets.symmetric(horizontal: 40.0, vertical: 8.0),
                height: 300.0,
              )
            ],
          ),
        ),
      ),
    );
  }
}

如何在Flutter上设置此布局？

2 个答案: