如何在 Flutter 的主小部件中为小部件设置背景颜色？

Posted 2023-02-23

【中文标题】如何在 Flutter 的主小部件中为小部件设置背景颜色？

【英文标题】：How to set a background color for a widget inside a main widget in Flutter?

【发布时间】：2021-12-31 22:21:18

【问题描述】：

我有一个容器小部件，我的所有代码都在其中用于特定页面。它有一个背景图像，在容器内，有一个 Center 小部件。我想将中心小部件的背景颜色设置为白色，但这样做时，整个屏幕的背景都变为白色。请问我怎样才能做到这一点？

return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage('Assets/images/loginbg2.jpg'),
          fit: BoxFit.cover
        ),
      ),
    child: Scaffold(
      backgroundColor: Colors.transparent, //code for background image



body: Center(
        child:Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Align(
              alignment: Alignment.topLeft,
              child: Padding(
                padding: EdgeInsets.fromLTRB(40, 0, 0, 0),
                child: Text(
                  "Welcome back!",
                  textAlign: TextAlign.left,
                  style: TextStyle(
                    fontSize: 30.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
              )
            ),
            SizedBox(
              height: 20.0,
            ), //code for center widget

【参考方案1】：

这可能是因为 Center 小部件中的 Column 小部件占据了整个屏幕。

一个 Column 小部件（除非受到限制）正在占用它可以获得的所有空间。

现在尝试通过移除 Column 小部件来解决您的问题，并且只使用 Center 小部件内的容器并定义它​​的高度和宽度。查看您想要的背景是否重新出现在视图中。

【讨论】：

谢谢。我刚刚为容器小部件添加了宽度和高度并设置了背景颜色，它就起作用了。

很高兴听到它成功了！