flutter - Flutter:剪辑列或行以防止溢出
问题描述
我在 Flutter 中有这样的布局结构:
Inkwell
Card
ScopedModelDescendant
Column
Container[]
列中的容器数量是可变的。
目标是它应该看起来像这样:
但相反,它最终会这样做:
我尝试向 中添加clipBehavior
属性Card
,并且尝试在结构中的任何位置混合ClipRects
,但似乎没有任何效果。我最好的猜测是ClipRect
上面的aColumn
没有帮助,因为溢出发生在列内。
这是我得到的错误:
flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
flutter: The following message was thrown during layout:
flutter: A RenderFlex overflowed by 15 pixels on the bottom.
flutter:
flutter: The overflowing RenderFlex has an orientation of Axis.vertical.
flutter: The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
flutter: black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
flutter: Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
flutter: RenderFlex to fit within the available space instead of being sized to their natural size.
flutter: This is considered an error condition because it indicates that there is content that cannot be
flutter: seen. If the content is legitimately bigger than the available space, consider clipping it with a
flutter: ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
flutter: like a ListView.
flutter: The specific RenderFlex in question is:
flutter: RenderFlex#094c9 OVERFLOWING
flutter: creator: Column ← ScopedModelDescendant<EventModel> ← Semantics ← DefaultTextStyle ←
flutter: AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#5fe8b ink renderer] ←
flutter: NotificationListener<LayoutChangedNotification> ← CustomPaint ← _ShapeBorderPaint ← PhysicalShape
flutter: ← _MaterialInterior ← Material ← ⋯
flutter: parentData: <none> (can use size)
flutter: constraints: BoxConstraints(w=56.0, h=104.3)
flutter: size: Size(56.0, 104.3)
flutter: direction: vertical
flutter: mainAxisAlignment: start
flutter: mainAxisSize: max
flutter: crossAxisAlignment: stretch
flutter: verticalDirection: down
flutter: ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════
解决方案
Wrap小部件可以解决您的问题。如果您的列或行中没有空间,只需使用 Wrap,它也具有对齐和间距属性。
这是一个简单的例子:
class WrapExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SizedBox(
width: 200,
height: 180,
child: Card(
child: Wrap(
direction: Axis.horizontal,
spacing: 8.0, // gap between adjacent chips
runSpacing: 4.0, // gap between lines
children: <Widget>[
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.blue.shade900, child: Text('AH')),
label: Text('Hamilton'),
),
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.blue.shade900, child: Text('ML')),
label: Text('Lafayette'),
),
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.blue.shade900, child: Text('HM')),
label: Text('Mulligan'),
),
Chip(
avatar: CircleAvatar(
backgroundColor: Colors.blue.shade900, child: Text('JL')),
label: Text('Laurens'),
),
],
),
),
);
}
}
这是输出:
推荐阅读
- javascript - 构建一个序列号数组
- python - 我想打印数组行但使用此代码我只打印最后一行
- c# - 在 UWP C# 中使用两个不同的字符串创建一个文本文件
- python - 使用熊猫将数据按id,var1分组为python中的连续日期
- c - 无法在 Windows 上的 Linux 子系统中创建消息队列
- docker - 如何为 nginx docker 设置 ssl
- python-3.x - 'Python manage.py runserver' "ValueError: Unable to configure handler 'mail_admins'".:
- azure - 无法通过 az cli 创建预定查询 - 条件如何解析?
- asp.net - 必须在每次构建之前创建虚拟目录以防止错误
- python - 如何绕过 python 请求 SSL 和代理错误?