【问题标题】: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 的绿色。您可以使用ElevatedButtonstyle 属性并像这样分配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'),
                  ),
                ]),
              ),
            );
          }
        

        【讨论】:

          猜你喜欢
          • 2020-08-01
          • 2019-10-17
          • 1970-01-01
          • 2021-08-17
          • 2017-10-04
          • 2010-12-11
          • 2014-11-15
          • 2018-03-31
          • 1970-01-01
          相关资源
          最近更新 更多