Flutter。 列 mainAxisAlignment spaceBetween 不工作

Question

我需要 position 頂部和底部的小部件，如圖所示。

為此，我使用以下結構：

    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

只需在兩Column之間使用spacer()

Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(child: Container(
            color: Colors.yellow,
            height: 50,
          ),),
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Expanded(child: Container(
                  color: Colors.green,
                  height: 50,
                ),),
                Expanded(
                  child: Column( children: [
                    Column(
                      children: [
                        Container(
                          color: Colors.green,
                          height: 50,
                        ),
                        Container(
                          color: Colors.blue,
                          height: 50,
                        ),
                      ], // top widgets
                    ),
                    Spacer(),
                    Container(
                      color: Colors.yellow,
                      height: 50,
                    ) // bottom widget
                  ]),
                )
              ],
            ),
          )
        ],
      )

output：

Answer 2

測試這個例子

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

給你 go ！

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