Flutter - 在 Flexible 中扩展答案

【问题标题】：Flutter - Expanded within FlexibleFlutter - 在 Flexible 中扩展
【发布时间】：2020-12-12 10:24:13
【问题描述】：

我的Row 由两个Flexible 组成，其中一个是Column 我希望此列能够像我的原始设计一样占用所有可用的垂直空间。

我试图用Expanded 包裹Column，但似乎我做不到。我尝试了灵活的属性 Flexible.tight 但它不起作用。

Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Flexible(
                flex: 2,
                child: SizedBox(
                  height: 130.0,
                  width: 130.0,
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(35.0),
                    child: CachedNetworkImage(
                      imageUrl: fakeOffers[index].imageUrl,
                      fit: BoxFit.cover,
                      placeholder: (context, url) => MC_Shimmer(),
                    ),
                  ),
                ),
              ),
              Flexible(
                flex: 3,
                fit: FlexFit.tight,
                child: Container(
                  child: Padding(
                    padding: const EdgeInsets.only(left: 15.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      mainAxisSize: MainAxisSize.max,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          fakeOffers[index].title,
                          style: MC_favoriteOfferTitle,
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                        ),
                        Text(
                          fakeOffers[index].price.toStringAsFixed(0) + ' €',
                          style: MC_priceGradientDetail,
                        ),
                        Text(
                          fakeOffers[index],
                          style: MC_favoriteOfferMeta,
                        ),
                      ],
                    ),
                  ),
                ),
              )
            ],
          );

【问题讨论】：

使用 Expanded 而不是 Flexible 来占用剩余空间这里是一个可视化示例stackoverflow.com/questions/52645944/…

标签： flutter layout

【解决方案1】：

您需要删除第一个Flexible（无论如何它是固定大小）并将第二个Flexible 转换为Expanded。这将使Expanded 占用所有剩余空间。然后，您的列需要使用CrossAxisAlignment.stretch 占用所有可用空间。

【讨论】：

我试过了，但是 Column 仍然没有占据整个垂直空间：/
为此，将另一个 CrossAxisAlignment.stretch 添加到您的根 Row。
如果您可以在 codepen 中提供一个工作示例，我们可以使其工作。否则很难继续这样下去。
列本身必须无法再增长。这将由其父母决定。如果我可以创建一个代码笔，它会很容易修复。
调试这些问题的好方法是使用颤振检查器并查看哪个小部件占用了空白空间。

【解决方案2】：

所以为了解决这个问题，我只是将列的高度设置为 130.0，因为我有一个固定大小的图像。

【讨论】：