如何在颤动中为布局元素设置背景颜色

Posted 2023-02-23

【中文标题】如何在颤动中为布局元素设置背景颜色

【英文标题】：How to set the background color for a layout element in flutter

【发布时间】：2020-04-29 12:57:29

【问题描述】：

我想设置左右两列的背景颜色。

我认为列/行与 Web 开发中的引导程序具有相似的含义/功能。

但似乎一切都比较费力......

请不要告诉我我必须用 Container 小部件包装每个 Expanded 并在那里设置颜色...

Container(
  margin: EdgeInsets.all(5),
  color: Colors.orangeAccent,
  child: Column(children: <Widget>[
    Row(
      children: <Widget>[
        Expanded(
          flex: 3,
          child: Column(
            children: <Widget>[
              Text("left", textAlign: TextAlign.end,),
            ],
          ),
        ),
        Expanded(
          flex: 7,
          child: Column(
            children: <Widget>[
              Text(
                "right",
                textAlign: TextAlign.right,
              ),
            ],
          )
        ),
      ],
    ),
    Row(
      children: <Widget>[],
    )
  ]),
),

【参考方案1】：

由于container 具有color 属性，因此您需要用container 包装column 小部件以更改其颜色：

Expanded(
  flex: 3,
  child: Container(
    color : Colors.black,
    child : Column(
      children: <Widget>[
        Text("left", textAlign: TextAlign.end,),
      ],
    ),
  )
),

https://api.flutter.dev/flutter/widgets/Container-class.html

【讨论】：

谢谢。知道为什么文本对齐不起作用吗？它总是居中？？？

您可以使用以下内容，例如child: Column( crossAxisAlignment : CrossAxisAlignment.end, children: <Widget>[ Text("left", textAlign: TextAlign.end,), Text("lda", textAlign: TextAlign.end,), ], ),