Flutter桌面应用中如何修改Container的背景颜色？

Row组件本身没有直接设置背景色的属性，你可以通过包裹Container或者使用DecoratedBox来实现背景色效果，以下是针对你代码的修改方案：

方案一：给外层Container添加color属性 #

直接在你已有的Container里添加color参数即可，这是最直接的方式：

import 'package:fluent_ui/fluent_ui.dart';
import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          Container(
            height: 100,
            width: 1250,
            color: Colors.blueGrey[100], // 在这里添加背景颜色
            child: Row(
              children: const [InfoLabel(label: 'label'), ], 
            ),
          )
        ],
      ),
    );
  }
}

方案二：用DecoratedBox包裹Row #

如果不需要Container的padding、margin等额外属性，也可以用DecoratedBox来实现：

import 'package:fluent_ui/fluent_ui.dart';
import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          SizedBox(
            height: 100,
            width: 1250,
            child: DecoratedBox(
              decoration: BoxDecoration(color: Colors.lightGreen[200]),
              child: Row(
                children: const [InfoLabel(label: 'label'), ], 
              ),
            ),
          )
        ],
      ),
    );
  }
}

两种方法都能实现Row的背景色效果，你可以根据需求选择。

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