用项目均匀地填充列

编程问答 2022-05-26

问题描述

我有一个简单的 Column，里面有 2 个 Containers 和一个 SizedBox。我只是想让 SizedBox 在它们中间，容器应该填满上面/下面的空间。我可以通过设置 height 来实现这一点，但这不是动态的，它需要动态。

现在的样子：

enter image description here

还有我的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,decoration: Boxdecoration(
          color: Colors.blue,borderRadius: BorderRadius.only(
            bottomright:
                const Radius.circular(cornerRadius),)
  ],)

有没有办法让这个动态而不是设置两个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),)
        ],)
,

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

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

使用Flexible：

enter image description here

使用Expanded：

enter image description here

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),)
      ],);
  }
}

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

dartlayoutlayoutwidget