颤振柱填充空间

Question

我要创建以下白框来填充垂直空间，设置mainAxisAlignment: MainAxisAlignment.spaceBetween，将标题放在白框的顶部，将描述放在白框的底部< / p>

我不想将高度明确设置为白框，我只是想强制其填充空间

Container(
          color: Colors.blueGrey,
          padding: EdgeInsets.all(8),
          margin: EdgeInsets.all(8),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Flexible(
                    child: Container(
                      color: Colors.white,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Text('Title'),
                          Text(
                            'Description Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been ',
                            style: TextStyle(fontSize: 10),
                          ),
                        ],
                      ),
                    ),
                  ),
                  Column(
                    children: <Widget>[
                      CircleAvatar(
                        child: Text('AH'),
                        backgroundColor: Colors.deepOrangeAccent,
                        radius: 50,
                      )
                    ],
                  ),
                ],
              ),
              Icon(Icons.email)
            ],
          ),
        ),

当前结果：

预期结果

我不是在寻找解决方案！我正在学习颤抖，我想知道为什么Row无法扩大身高

Answer 1

只是通过用Row用IntrinsicHeight换行来找出soln

这是代码：

Container(
    color: Colors.blueGrey,
    padding: EdgeInsets.all(8),
    margin: EdgeInsets.all(8),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        IntrinsicHeight(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Flexible(
                child: Container(
                  color: Colors.white,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text('Title'),
                      Text(
                        'Description Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been ',
                        style: TextStyle(fontSize: 10),
                      ),
                    ],
                  ),
                ),
              ),
              Column(
                children: <Widget>[
                  CircleAvatar(
                    child: Text('AH'),
                    backgroundColor: Colors.deepOrangeAccent,
                    radius: 50,
                  )
                ],
              ),
            ],
          ),
        ),
        Icon(Icons.email)
      ],
    ),
  ),

Answer 2

好问题！

解决方案是使用IntrinsicHeight并在crossAxisAlignment: CrossAxisAlignment.stretch中设置Row，在特定情况下，您不需要设置对齐方式，我将在后面解释。

现在，IntrinsicHeight在做什么可以解决您的问题？请参见，当您向IntrinsicHeight提供Row时，如果您设置了Row属性，它将强制crossAxisAlignment: CrossAxisAlignment.stretch的子级占用最大的垂直空间。

在您的情况下，Row的两个子元素均为Column，第一列的高度比第二列的高度短，设置IntrinsicHeight后，您可以同时允许{{1 }}占用最大可用空间，这里是max（column1，column2）= column2。因此，第一列占据第二列的高度，如果第一列较大，第二列将占据第一列的高度，您就会明白。

正如我之前提到的，您还需要设置Columns才能使这种行为在使用crossAxisAlignment: CrossAxisAlignment.stretch时生效，但这仅仅是因为您将IntrinsicHeight用作{{ 1}}，您可以跳过它，因为Column会尝试占用整个垂直空间，除非您设置了Row的{​​{1 }}。

解决方案：

Column

Answer 3

尝试

body: Container(
        color: Colors.blueGrey,
        padding: EdgeInsets.all(8),
        margin: EdgeInsets.all(8),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  child: Container(
                    width: double.infinity,
                    color: Colors.white,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: <Widget>[
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: <Widget>[
                              Text('Title'),
                              SizedBox(
                                height: 50,
                              ),
                              Text(
                                'Description Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been ',
                                style: TextStyle(
                                  fontSize: 10,
                                ),
                              ),
                            ],
                          ),
                        ),
                        Expanded(
                          child: Align(
                            alignment: Alignment.centerRight,
                            child: CircleAvatar(
                              child: Text('AH'),
                              backgroundColor: Colors.deepOrangeAccent,
                              radius: 50,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
            Icon(Icons.email)
          ],
        ),
      ),

Answer 4

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    child: Expanded(
      child: Container(
        // Fill available Space.
        constraints: BoxConstraints.expand()
        color: Colors.white,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Text('Title'),
            Text('Description Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been ',
              style: TextStyle(fontSize: 10),
            ),
          ],
        ),
      ),
    ),
    // there was no need for the and additional column
    CircleAvatar(
      child: Text('AH'),
      backgroundColor: Colors.deepOrangeAccent,
      radius: 50
    ),
  ]
)

希望如此，它将起作用