flutter - 扑。列 mainAxisAlignment spaceBetween 不工作

Question

我需要将小部件放置在顶部和底部，如图所示。

为此，我使用以下结构：

    Column(
       mainAxisAlignment: MainAxisAlignment.spaceBetween,
       children:[
         Column(
            children:[Container(), Container()] // top widgets
               ),
         Container() // bottom widget

             ])

但这不起作用，我的小部件严格位于另一个之下。另见图片：

我试图用 Expanded 小部件包装外部 Column，但随后出现此错误：

RenderFlex 子项具有非零 flex，但传入的宽度约束是无界的。

当一行位于不提供有限宽度约束的父行中时，例如，如果它在水平可滚动中，它将尝试沿水平轴收缩其子代。在子节点上设置 flex（例如使用 Expanded）表示子节点将展开以填充水平方向上的剩余空间。这两个指令是互斥的。如果父级要收缩包裹其子级，则子级不能同时扩展以适应其父级。

考虑将 mainAxisSize 设置为 MainAxisSize.min 并为灵活的子项使用 FlexFit.loose（使用 Flexible 而不是 Expanded）。这将允许灵活的子级将自己的大小调整到小于他们将被迫占用的无限剩余空间，然后将导致 RenderFlex 收缩包裹子级，而不是扩展以适应父级提供的最大约束。

我还尝试为 Column 添加 mainAxisSize: MainAxisSize.max 但它没有帮助。

PS我的外列在行内，也许这是问题所在？

我的完整结构：

Card(
 child:Padding(
   ...,
   child:Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(... ),
              const SizedBox(width: 4),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: const [
                      Text(...),
                      Text(...),
                    ],
                  ),
                  Container(...)
                ],
              )
            ],
          )

我试图获得的最终屏幕如下所示：

请帮我

Answer 1

只需spacer()在两个之间使用Column，您就可以使用 flex inRow

Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.yellow,
              height: MediaQuery.of(context).size.height,
            ),
          ),
          SizedBox(width: 4,),
          Expanded(
            flex: 4,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Expanded(
                  child: Column(children: [
                    Column(
                      children: [
                        Container(
                          color: Colors.green,
                          height: 50,
                        ),
                        Container(
                          color: Colors.blue,
                          height: 50,
                        ),
                      ], // top widgets
                    ),
                    Spacer(),
                    Container(
                      color: Colors.brown,
                      height: 50,
                    ) // bottom widget
                  ]),
                ),
                SizedBox(width: 4,),
                Expanded(
                  child: Container(
                    color: Colors.brown,
                    height: 50,
                  ),
                ),
              ],
            ),
          )
        ],
      )

输出：

Answer 2

test this example

Column(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
      Expanded(
        flex: 3,
        child: Column(children: [
          Container(height: 100, color: Colors.green),
          Container(height: 100, color: Colors.red)
        ] // top widgets
            ),
      ),
      Container(height: 100, color: Colors.red) // bottom widget
    ]);

Answer 3

干得好 ！

          Row(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
            Expanded(child: containerWithBorder),
            Expanded(
                child: Column(
              children: [
                containerWithBorder,
                containerWithBorder,
                Spacer(),
                containerWithBorder,
              ],
            )),
            Expanded(
                child: Column(
              children: [
                containerWithBorder,
                Spacer(),
              ],
            ))
          ]),