Flutter ROW 容器

Question

我在 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,
  ),
],
),

Answer 1

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

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

Answer 2

您可以在小部件之间使用 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,
  )

Answer 3

使用 Flex Expanded 属性

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

Flutter ROW 容器

Flutter ROW containers

dart

flutter

flutter-layout