颤振 ROW 容器答案

【问题标题】：Flutter ROW containers颤振 ROW 容器
【发布时间】：2022-01-07 16:35:14
【问题描述】：

我在Row 中有很多容器，我必须将这个蓝色的容器尽可能推到最右边。你能帮我吗？这是一个代码并在下面选择。

Row(
children: [
  Container(
    width: 100,
    height: double.infinity,
    color: Colors.red,
  ),
  SizedBox(width: 50),
  Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Container(
        width: 100,
        height: 100,
        color: Colors.yellow,
      ),
      Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
    ],
  ),
  Container(
    width: 100,
    height: double.infinity,
    color: Colors.blue,
  ),
],
),

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

您可以在小部件之间使用Spacer()

 Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Container(
        width: 100,
        height: 100,
        color: Colors.yellow,
      ),
      Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
    ],
  ),
  Spacer(),  // add this
  Container(
    width: 100,
    height: double.infinity,
    color: Colors.blue,
  )

【讨论】：

它工作！谢谢你:)

【解决方案2】：

您可以在Row 上使用mainAxisAlignment: MainAxisAlignment.spaceBetween,。

 body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [

【讨论】：

【解决方案3】：

将 Expanded 与 flex 属性结合使用

Expanded(
   flex:1,//use how much flex you want
   child:,//use your container
),

【讨论】：