如何在flutter上设置这个布局？

Question

How to set this layout?

大家怎么样，我想知道如何设置这个布局？圆形的corder两个盒子是容器。但是如何在背景上将蓝色背景设置在顶部？

谢谢。

Answer 1

这就是你的基础应用程序应该是这样的。您必须创建自己的小部件，但您所期望的布局已完成。希望它能帮到你！

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,
              )
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

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