颤抖地创建设计

Question

我正试图在flutter中复制一个ui。图片如下。但是我很难弄清楚如何获得盒子的底部设计。里面的内容并不重要。我想要的是盒子样式。

现在我正在考虑创建两个小部件。一个与此

并保留在另一个小部件中。有更好的替代方法吗 谁能帮我实现这个目标。预先感谢

Answer 1

我可以按照您描述的方式在下图中获得结果。

我使用Container创建了两个框，并设置了decoration创建了顶部半径边界。将两个项目放在Column中将不起作用，因为它们需要彼此重叠。

要实现此行为，您将需要使用Stack和Positioned。

代码说明如下：

  Widget _buildBox(Color boxColor) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 20.0),
      decoration: BoxDecoration(
          color: boxColor,
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(40), topRight: Radius.circular(40))),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: Stack(
        alignment: Alignment.topCenter,
        children: <Widget>[
          Positioned(
            child: _buildBox(Colors.deepPurple),
            width: 400.0,
            height: 300.0,
          ),
          Positioned(
            child: _buildBox(Colors.purpleAccent),
            top: 200.0,
            width: 400,
            height: 200,
          )
        ],
      ),
    );
  }