Flutter中如何为主Container内的子Widget设置背景色且不影响主背景图

问题原因 #

• Center组件默认会填充父级（此处是Scaffold的body区域，也就是整个屏幕）的所有可用空间，如果你直接给Center设置背景色，自然会把整个屏幕都变成白色，挡住外层Container的背景图。
• 你当前代码里Center的子Container没有设置color属性，也没有限制尺寸，才会出现设置背景色后铺满全屏的问题。

修正方案 #

你只需要给Center的子Container设置白色背景，同时可以根据需求调整这个容器的宽高或者内边距，修改后参考代码如下：

return Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage('Assets/images/loginbg2.jpg'),
      fit: BoxFit.cover
    ),
  ),
  child: Scaffold(
    backgroundColor: Colors.transparent, // 保留Scaffold透明不遮挡外层背景图
    body: Center(
      // 给Center的子Container设置白色背景和合适的尺寸/内边距
      child: Container(
        color: Colors.white, // 这里设置白色背景
        // 可以自定义宽高，比如设为屏幕宽度的90%
        width: MediaQuery.of(context).size.width * 0.9,
        // 也可以用padding控制内边距，不设固定宽高让容器自适应子组件大小
        padding: EdgeInsets.symmetric(vertical: 30, horizontal: 20),
        child: Column(
          mainAxisSize: MainAxisSize.min, // 让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.black,
                  ),
                ),
              )
            ),
            SizedBox(
              height: 20.0,
            ),
            // 其余你的业务组件继续往下写即可
          ],
        ),
      ),
    ),
  ),
);

额外注意点 #

• 如果不需要固定中间白色容器的宽度，也可以去掉width属性，只保留padding和背景色，容器会自动适配内部内容的大小。
• 原有Text组件的白色字体在白色背景下会无法显示，记得根据需求调整字体颜色。

内容的提问来源于stack exchange，提问作者Wakashio1234