用项目均匀地填充列

Posted 2023-02-23

【中文标题】用项目均匀地填充列

【英文标题】：Flutter fill Column with items evenly

【发布时间】：2021-05-14 16:13:54

【问题描述】：

我有一个简单的Column，里面有2个Containers和一个SizedBox。我只是想让SizedBox 在它们中间，容器应该填满上面/下面的空间。我可以通过设置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？

【问题讨论】：

拜托，这里的动态是什么意思？

@KabirouAgouda 我只是不想给容器一个height，但它们应该自己填充宽度和高度

【参考方案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),
                  )),
            ),
          )
        ],
      ),
    )

【参考方案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，以便您的容器填充屏幕的宽度。