如何在Flutter中设置布局元素的背景色

时间:2020-01-12 16:47:04

标签: flutter dart flutter-layout

我想在左右两栏设置背景色。

我认为列/行在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 个答案:

答案 0 :(得分:1)

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

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