Flutter - Expanded在Flexible内部
Flutter - Expanded在Flexible内部
我的行（Row）由两个Flexible组成，其中一个是Column。我希望这个Column能够像原始设计中一样占据所有可用的垂直空间。\n我尝试使用Expanded来包装Column，但似乎无法实现。我还尝试了Flexible的属性Flexible.tight，但没有起作用。\n代码如下：\nRow(\n mainAxisAlignment: MainAxisAlignment.start,\n crossAxisAlignment: CrossAxisAlignment.start,\n children: [\n Flexible(\n flex: 2,\n child: SizedBox(\n height: 130.0,\n width: 130.0,\n child: ClipRRect(\n borderRadius: BorderRadius.circular(35.0),\n child: CachedNetworkImage(\n imageUrl: fakeOffers[index].imageUrl,\n fit: BoxFit.cover,\n placeholder: (context, url) => MC_Shimmer(),\n ),\n ),\n ),\n ),\n Flexible(\n flex: 3,\n fit: FlexFit.tight,\n child: Container(\n child: Padding(\n padding: const EdgeInsets.only(left: 15.0),\n child: Column(\n mainAxisAlignment: MainAxisAlignment.spaceBetween,\n mainAxisSize: MainAxisSize.max,\n crossAxisAlignment: CrossAxisAlignment.start,\n children: [\n Text(\n fakeOffers[index].title,\n style: MC_favoriteOfferTitle,\n maxLines: 2,\n overflow: TextOverflow.ellipsis,\n ),\n Text(\n fakeOffers[index].price.toStringAsFixed(0) + \' €\',\n style: MC_priceGradientDetail,\n ),\n Text(\n fakeOffers[index],\n style: MC_favoriteOfferMeta,\n ),\n ],\n ),\n ),\n ),\n )\n ],\n);\n
问题的原因是因为作者有一个固定大小的图片，导致在使用Flexible和Expanded组件时出现了问题。解决方法是将列的高度设置为130.0。下面是详细的解决步骤：
Column(
children: [
Expanded(
child: Container(
height: 130.0, // 设置高度为130.0
child: Image.asset('your_image_asset_here.png'),
),
),
Flexible(
child: Container(
// your other widgets here
),
),
],
)
以上代码中，作者使用了一个Column组件来包裹图片和其他小部件。在Column的子组件中，作者使用了Expanded和Flexible来实现灵活的布局。然而，由于图片有固定的大小，这可能导致布局问题。
为了解决这个问题，作者在Expanded组件的子组件上添加了一个Container组件，并将其高度设置为130.0。这样，图片将被限制在固定的高度范围内，并且不会影响布局。其他的小部件可以继续使用Flexible来进行自适应布局。
通过这种方式，作者成功解决了使用Flexible和Expanded组件时出现的问题，并实现了期望的布局效果。
问题出现的原因是，当使用Flexible和Expanded时，Column无法充满垂直空间。解决方法是，删除第一个Flexible，将第二个Flexible转换为Expanded，使其占据剩余空间。然后，使用CrossAxisAlignment.stretch让Column占据所有可用空间。如果根Row也需要占据所有可用空间，则需要再次使用CrossAxisAlignment.stretch。然而，如果出现BoxConstraints forces an infinite height.错误，可以通过提供一个在codepen中可以工作的示例来解决问题。使用flutter inspector调试工具可以帮助找到占据空白空间的小部件。