Flutter中ListView.builder渲染报错：RenderBox was not laid out求助

问题分析 #

报错完全来自ListView.builder的布局约束冲突：

1. ListView默认会尝试占用无限垂直空间，但它被放在设置了mainAxisSize: MainAxisSize.min的Column中，即使有Flexible包裹，仍缺少明确的尺寸约束。
2. 列表项里额外嵌套的Flexible是冗余的，会进一步破坏ListTile的布局逻辑。

修复方案 #

需要做两处关键修改：

• 给ListView.builder添加shrinkWrap: true，让它根据子项总高度收缩自身尺寸，适配Column的布局约束。
• 移除列表项外层的Flexible，直接返回ListTile即可。

修改后的完整代码 #

class GroupMembershipSelector extends FormField<List<GroupMember>> {
  final BuildContext? parentContext;

  GroupMembershipSelector(
      {this.parentContext,
      FormFieldSetter<List<GroupMember>>? onSaved,
      FormFieldValidator<List<GroupMember>>? validator,
      List<GroupMember>? initialValue,
      AutovalidateMode autoValidate = AutovalidateMode.disabled})
      : super(
            onSaved: onSaved,
            validator: validator,
            initialValue: initialValue,
            autovalidateMode: autoValidate,
            builder: (FormFieldState<List<GroupMember>> state) {
              return Container(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    TextButton.icon(
                      label: Text('Add to group'),
                      icon: Icon(Icons.add),
                      onPressed: () {
                        showModalGroupMemberForm(parentContext!, null)
                            .then((aNewMember) {
                          if (aNewMember != null) {
                            if (state.value == null) {
                              List<GroupMember> aList = [];
                              aList.add(aNewMember);
                              state.didChange(aList);
                            } else {
                              List<GroupMember> anExisting = state.value!;
                              anExisting.add(aNewMember);
                              state.didChange(anExisting);
                            }
                          }
                        });
                      },
                    ),
                    Flexible(
                      child: (state.value == null || state.value!.length == 0)
                          ? Text('No members')
                          : ListView.builder(
                              shrinkWrap: true, // 添加这一行
                              itemCount: state.value!.length,
                              itemBuilder: (context, index) {
                                // 移除外层的Flexible
                                return ListTile(
                                  title: Text(state.value![index].email),
                                );
                              },
                            ),
                    ),
                  ],
                ),
              );
            }) {}
}

额外优化（可选） #

如果这个组件会被放在可滚动容器（如SingleChildScrollView）中，建议给ListView添加physics: NeverScrollableScrollPhysics()，避免嵌套滚动的冲突：

ListView.builder(
  shrinkWrap: true,
  physics: NeverScrollableScrollPhysics(), // 添加这一行
  // ...其他属性
)

内容的提问来源于stack exchange，提问作者Davout