如何在 Flutter 容器中设置背景颜色答案

【问题标题】：How do I set background color in a Flutter container如何在 Flutter 容器中设置背景颜色
【发布时间】：2021-06-12 19:30:55
【问题描述】：

我有一个无法显示背景颜色的容器小部件。这个小部件是列中的第一个，因此宽度是全屏。我应该能够看到按钮右侧的背景。

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

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      color: Colors.green, // <---------------- NOT WORKING
      child: ElevatedButton(
        onPressed: () => null,
        child: Text('Home'),
      ),
    );
  }
}

这里是 dartpad 示例的链接：https://dartpad.dev/fc5fdd6c227747abe039d73a07d00a54

【问题讨论】：

标签： flutter

【解决方案1】：

这是由于 ElevatedButton 造成的，请尝试将其更改为 TextButton。

【讨论】：

【解决方案2】：

ElevatedButton 的原色隐藏了 Container 的绿色。您可以使用ElevatedButton 的style 属性并像这样分配Colors.green：

return Container(
  height: 100,
  child: ElevatedButton(
    style: ElevatedButton.styleFrom(
      primary: Colors.green
    ),
    onPressed: () => null,
    child: Text('Home'),
  ),
);

【讨论】：

【解决方案3】：

以上两个答案都引导我找到解决方案。

对于其他想要做这样的事情的人，放置一个 DecoratedBox 来修复它。

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 48,
      child: DecoratedBox(
        decoration: const BoxDecoration(color: Colors.red),
        child: Row(mainAxisAlignment: MainAxisAlignment.start, children: [
          ElevatedButton(
            onPressed: () => null,
            child: Text('Next'),
          ),
        ]),
      ),
    );
  }

【讨论】：