ReorderableListView：异常：BoxConstraints 强制设置了无限高度。
ReorderableListView：异常：BoxConstraints 强制设置了无限高度。
TL;DR - 如何在ReorderableListView中实现shrinkWrap = true？\n我试图创建一个父级为Column-Container的ReorderableListView，但出现了以下错误。\nI/flutter (32618): 执行布局期间引发了以下断言：\nI/flutter (32618): BoxConstraints强制一个无限高度。\nI/flutter (32618): 在引发异常时正在处理以下RenderObject：RenderStack#23840 relayoutBoundary=up17 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE：\nI/flutter (32618): creator: Stack ← _Theatre ← Overlay-[GlobalKey#dc153 ReorderableListView overlay key] ←\nI/flutter (32618): ReorderableListView ← StreamBuilder
使用Column来显示ListView，并将shrinkWrap属性设置为true。
Widget build(BuildContext context) {
final _listTitleStyle = TextStyle(fontSize: 20, fontWeight: FontWeight.w500);
final _listSubTitleStyle = TextStyle(
fontSize: 14,
fontWeight: FontWeight.w400,
color: Color(0xff7D7373),
);
return Container(
padding: EdgeInsets.all(8),
margin: EdgeInsets.all(8),
child: ListView(
shrinkWrap: true,
children:
Container(
child: Row(
children:
Expanded(
child: Row(
textBaseline: TextBaseline.alphabetic,
crossAxisAlignment: CrossAxisAlignment.baseline,
children:
Text(
widget.cardTitle,
style: _listTitleStyle,
),
SizedBox(
width: 2,
),
Text(
widget.cardSubTitle,
style: _listSubTitleStyle,
),
],
),
),
Icon(Icons.keyboard_arrow_down),
],
),
),
SizedBox(
height: 8,
),
StreamBuilder
stream: widget.query,
builder: (context, snapshot) {
if (!snapshot.hasData) return LinearProgressIndicator();
return _buildList(context, snapshot.data.documents);
},
),
],
),
);
}
在返回的Widget中，将ListView的shrinkWrap属性设置为true。
Widget _buildList(BuildContext context, List
snapshot.forEach((snap) {
print("debug 1 ${snap.data}");
print(TodoItem.fromSnapshot(snap, snap.reference).toString());
});
return ReorderableListView(
onReorder: (oldIndex, newIndex){},
children: snapshot
.map((data) => TodoTile(TodoItem.fromSnapshot(data, data.reference), key: UniqueKey(),))
.toList(),
);
}
使用ReorderableListView时，将其子项包装在ListView中，并且ListView的shrinkWrap属性设置为true，可以解决出现的异常"BoxConstraints forces an infinite height"。
问题的原因是ReorderableListView的高度被限制为无限高度，导致出现异常"BoxConstraints forces an infinite height"。解决方法是使ReorderableListView的高度动态调整，根据列表中项目的数量进行调整。
方法一是使用Container来包裹ReorderableListView，并将Container的高度设置为列表长度乘以每个项目的高度。代码如下：
Container(
height: (list.length * 40).toDouble(),
padding: const EdgeInsets.all(10),
child: ReorderableListView(
children: list.map((item) {
return getItem(item);
}).toList(),
onReorder: _onReorder,
),
)
另一种方法是在Column中使用Expanded来包裹ReorderableListView。代码如下：
Column(
children: [
Expanded(
child: ReorderableListView(
children: list.map((item) {
return getItem(item);
}).toList(),
onReorder: _onReorder,
),
),
],
)
通过使用上述方法，可以解决ReorderableListView异常"BoxConstraints forces an infinite height"的问题。
ReorderableListView: Exception: BoxConstraints forces an infinite height问题的出现原因是ReorderableListView组件的实现方式导致的。ReorderableListView组件在接受子组件时使用的是children属性，而不是child属性。这就导致了当使用ReorderableListView组件时，如果子组件高度没有被限制，就会出现BoxConstraints forces an infinite height的异常。
解决这个问题的方法是使用flutter_reorderable_list包替换ReorderableListView组件。flutter_reorderable_list包接受一个子组件（Widget），而不是多个子组件（List）。该包的实现稍微复杂一些，可以查看其示例代码来正确使用它。
如果你有一个简化的示例代码，欢迎在这里分享！