如何在 Flutter 中创建具有 2 种不同颜色的布局背景？答案

【问题标题】：How to create layout background with 2 different colors in Flutter?如何在 Flutter 中创建具有 2 种不同颜色的布局背景？
【发布时间】：2020-09-20 02:11:32
【问题描述】：

我正在尝试按照 Flutter 中的图像进行布局，但我不知道如何创建具有两种颜色和重叠按钮的背景。我不知道是否有一个小部件能够做到这一点或需要一些代码...... 任何建议或帮助都会很棒！（这是我第一次发帖，如有不对之处请见谅！！）谢谢。

【问题讨论】：

你应该使用堆栈和内部堆栈使用容器和一个按钮

标签： flutter dart layout overlapping

【解决方案1】：

做这样的事情。

body: Stack(
    children: <Widget>[
      Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Container(
            width: MediaQuery.of(context).size.width,
            height: 300,
            color: Colors.grey,
          ),
        ],
      ),
      Positioned(
        top: 280,
        left: 50,
        right: 50,
        child: RaisedButton(
          color: Colors.white,
          child: Text("Your Button"),
          onPressed: () {},
        ),
      )
    ],
  ),

你会得到

让我知道它是否有效

【讨论】：

太棒了，正是我想要的！谢谢艾哈迈德！

【解决方案2】：

一种可能的方法是使用堆栈。将背景颜色设置为灰色（我认为是色盲），将白色部分添加为位于底部的图像。最后添加您的按钮，再次位于底部。

在仔细检查您的图像后，我现在发现我认为底部的图像实际上只是一种颜色。您只需要两个 Container 和一个 Stack 中的按钮。第一个 Container 应该填满整个空间，第二个 Container 应该有一个高度设置（在此处响应多种设备尺寸），最后添加您的 RaisedButton。

【讨论】：