用于实现这种布局的最佳颤振小部件是什么？

Question

这是我要实现的 UI，我上周才开始玩 Flutter，所以我不是很流畅。我想知道实现这种布局的最佳方法是什么。

这是我通过堆栈和列得到的：

这是代码：

Column(
  children: <Widget>[
    Expanded(
      child: Container(
        constraints: BoxConstraints.expand(height: 150),
        color: Colors.blue,
        child: Stack(
          overflow: Overflow.visible,
          children: <Widget>[
            Positioned(
              bottom: -40,
              left: MediaQuery.of(context).size.width * 0.4,
              // alignment: Alignment.bottomCenter,
              child: Container(
                constraints: BoxConstraints.expand(height: 80, width: 80),
                color: Colors.green,
              ),
            ),
          ],
        ),
      ),
      flex: 3,
    ),
    Expanded(
      child: Container(
        margin: EdgeInsets.all(15.0),
        color: Colors.red,
      ),
      flex: 7,
    )
  ],
);

Answer 1

我制作了类似于您提供的带有虚拟图像的图像和一些图标，您可以根据需要更改图标，使用媒体查询大小而不是固定的填充顶部

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: SingleChildScrollView(
            child: Column(
          children: [
            Stack(children: [
              Container(
                child: FittedBox(
                    fit: BoxFit.fill,
                    child: Image.network('https://picsum.photos/300?image=10')),
                height: 150,
                width: double.infinity,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(top: 75),
                    child: MaterialButton(
                      onPressed: () {},
                      elevation: 2.0,
                      color: Colors.red,
                      child: Icon(
                        Icons.message,
                        size: 27.0,
                      ),
                      padding: EdgeInsets.all(20),
                      shape: CircleBorder(),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 75),
                    child: Column(children: [
                      CircleAvatar(
                        radius: 55.0,
                        backgroundImage:
                            NetworkImage('https://i.pravatar.cc/150?img=54'),
                        backgroundColor: Colors.transparent,
                      ),
                      Text("David Beckham"),
                      Text("Model/SuperStar")
                    ]),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 75),
                    child: MaterialButton(
                      onPressed: () {},
                      elevation: 2.0,
                      color: Colors.blue,
                      child: Icon(
                        Icons.add,
                        size: 27.0,
                      ),
                      padding: EdgeInsets.all(20),
                      shape: CircleBorder(),
                    ),
                  ),
                ],
              ),
            ]),
            Container(height: 100, color: Colors.red),
            Container(height: 100, color: Colors.green),
            Container(height: 100, color: Colors.yellow),
            Container(height: 100, color: Colors.blue),
          ],
        )));
  }
}