用项目均匀地填充列

Question

我有一个简单的 Column，里面有 2 个 Containers 和一个 SizedBox。我只是想在它们中间放置 SizedBox，容器应该填充 space above/below。我可以通过设置 height 来实现，但这不是动态的，它 需要是动态的 .

这是现在的样子：

还有我的code：

Column(
  children: [
    // counter_container
    Container(
      width: detailContainerWidth,
      height: detailContainerHeight,
      decoration: BoxDecoration(
          color: Colors.green,
          borderRadius: BorderRadius.only(
            topRight: const Radius.circular(cornerRadius),
          )),
    ),
    SizedBox(
      height: spacingBetweenViews,
    ),
    // price_container
    Container(
      width: detailContainerWidth,
      height: detailContainerHeight,
      decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.only(
            bottomRight:
                const Radius.circular(cornerRadius),
          )),
    )
  ],
)

有没有办法让这个动态地而不是设置两个Containers的height？

Answer 1

我自己找到了解决办法。让我知道是否有更好的方法来完成这项工作，但我正在工作，所以我现在可以接受它：

  Flexible(
      child: Column(
        children: [
          // counter_container
          Flexible(
            child: Container(
              decoration: BoxDecoration(
                  color: Colors.green,
                  borderRadius: BorderRadius.only(
                    topRight:
                        const Radius.circular(cornerRadius),
                  )),
              ),
            ),
          ),
          SizedBox(
            height: spacingBetweenViews,
          ),
          // price_container
          Flexible(
            child: Container(
              decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.only(
                    bottomRight:
                        const Radius.circular(cornerRadius),
                  )),
            ),
          )
        ],
      ),
    )

Answer 2

请注意 Flexible 个小部件默认为 FlexFit.loose。如果您希望绿色和蓝色容器始终保持相同的高度，而不管它们的内容如何，您应该使用 FlexFit.tight 或 Expanded 小部件。

Expanded 只是 Flexible 和 FlexFit.tight。 [more info]

与Flexible:

与Expanded:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        // counter_container
        Expanded(
          child: Container(
              decoration: BoxDecoration(
                color: Colors.green,
                borderRadius: BorderRadius.only(
                  topRight: const Radius.circular(20.0),
                ),
              ),
              child:
                  (Text('HAHAHA\nHAHAHA\nHAHAHA\nHAHAHA\nHAHAHA\nHAHAHA\n'))),
        ),

        SizedBox(
          height: 8.0,
        ),
        // price_container
        Expanded(
          child: Container(
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.only(
                bottomRight: const Radius.circular(20.0),
              ),
            ),
          ),
        )
      ],
    );
  }
}

注意：我还向您的 Column 添加了 crossAxisAlignment: CrossAxisAlignment.stretch，以便您的容器填满屏幕的宽度。

用项目均匀地填充列

Flutter fill Column with items evenly

layout

widget

dart

flutter