Flutter：如何拥有固定高度的容器/列

Question

布局使用带有文本和图像的列。基于列表的数据更改和一些文本/图像为零。当只有一个数据存在时，如何使容器具有相同的高度？

谢谢。

      body: Column(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
      Container(
        color: Colors.red,
        child: Column(
          children: [
            Text(
              'This is Container/Column1.  It have two widgets, Text and Image.  How to make the height of the container same even if one the the widget is removed/null?',
            ),
            Image.asset('assets/index.jpg')
          ],
        ),
      ),
      Container(
        color: Colors.green,
        child: Column(
          children: [
            Text('This is Container/Column2.  This will have additional widgets.'),
            SizedBox(
              width: double.maxFinite,
              child: TextButton(
                onPressed: () {},
                style: TextButton.styleFrom(
                  backgroundColor: Colors.white,
                ),
                child: Text('Next Button',

),),),],),),],),

Answer 1

第一种方法：为容器添加固定高度

Column(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
      Container(
        // this will give the container a fixed height of 0.4 from the screen height
        height: MediaQuery.of(context).size.height * 0.4,
        color: Colors.red,
        child: Column(
          children: [
            Text(
              'This is Container/Column1.  It have two widgets, Text and Image.  How to make the height of the container same even if one the the widget is removed/null?',
            ),
            Image.asset('assets/index.jpg')
          ],
        ),
      ),
      Container(
        color: Colors.green,
        child: Column(
          children: [
            Text('This is Container/Column2.  This will have additional widgets.'),
            SizedBox(
              width: double.maxFinite,
              child: TextButton(
                onPressed: () {},
                style: TextButton.styleFrom(
                  backgroundColor: Colors.white,
                ),
                child: Text(
                  'Next Button',
                ),
              ),
            ),
          ],
        ),
      ),
    ],
  ),

第二种方法：如果其中一个为空，则添加一个 SizedBox() 与您喜欢的高度

Column(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
      Container(
        height: MediaQuery.of(context).size.height * 0.4,
        color: Colors.red,
        child: Column(
          children: [
            someCondition ? Text(
              'This is Container/Column1.  It have two widgets, Text and Image.  How to make the height of the container same even if one the the widget is removed/null?',
            ) : SizedBox(height : 40)
            someCondition ? Image.asset('assets/index.jpg') : SizedBox(height : 40)
          ],
        ),
      ),
      Container(
        color: Colors.green,
        child: Column(
          children: [
            Text('This is Container/Column2.  This will have additional widgets.'),
            SizedBox(
              width: double.maxFinite,
              child: TextButton(
                onPressed: () {},
                style: TextButton.styleFrom(
                  backgroundColor: Colors.white,
                ),
                child: Text(
                  'Next Button',
                ),
              ),
            ),
          ],
        ),
      ),
    ],
  );