Flutter中MasonryGridView嵌套ListView报hasSize错误如何修复？

问题 #

在Flutter中使用MasonryGridView时触发Failed assertion: line 1979 pos 12: 'hasSize'错误，关联错误组件为Column。现有代码如下：

页面实现代码 #

@override
Widget buildPage(
    BuildContext context, AnonymousQuestionnaireDetailsPageVM viewModel) {
  return Scaffold(
    appBar: AppBar(
      title: Text(AppLocalizations.of(context)!.questionnaire),
    ),
    body: Column(
      children: [
        Expanded(
          child: MasonryGridView.count(
            itemCount: items.length,
            padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
            crossAxisCount: 1,
            mainAxisSpacing: 1,
            crossAxisSpacing: 1,
            itemBuilder: (context, index) {
              return YourCustomListView();
            },
          ),
        ),
        ElevatedButton(
          child: Text(AppLocalizations.of(context)!.finishAction),
          onPressed: () {},
        ),
      ],
    ),
  );
}

自定义ListView类代码 #

class YourCustomListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Flexible(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          const Text(
            "Some title",
            style: TextStyle(fontSize: 16),
          ),
          ListView.builder(
            itemCount: 100,
            itemBuilder: (context, index) {
              return const ListTile(
                title: Text("some"),
                contentPadding:
                    EdgeInsets.symmetric(vertical: 0.0, horizontal: 16.0),
              );
            },
          ),
        ],
      ),
    );
  }
}

错误提示：

Failed assertion: line 1979 pos 12: 'hasSize'
The relevant error-causing widget was Column

需求：保留独立自定义ListView类及标题的前提下修复错误。

解决方案 #

错误根源是嵌套滚动组件（MasonryGridView → Column → ListView.builder）缺少明确尺寸约束，导致Column无法确定自身大小。以下是两种可行修复方式：

方式一：让内部ListView自适应高度并禁用独立滚动 #

修改自定义ListView类，移除外层Flexible，给内部ListView.builder添加shrinkWrap和滚动物理属性：

class YourCustomListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        const Text(
          "Some title",
          style: TextStyle(fontSize: 16),
        ),
        ListView.builder(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          itemCount: 100,
          itemBuilder: (context, index) {
            return const ListTile(
              title: Text("some"),
              contentPadding:
                  EdgeInsets.symmetric(vertical: 0.0, horizontal: 16.0),
            );
          },
        ),
      ],
    );
  }
}

• shrinkWrap: true：让ListView根据子项数量计算自身高度，而非占用无限空间
• NeverScrollableScrollPhysics()：避免内部ListView与外层MasonryGridView的滚动冲突
• mainAxisSize: MainAxisSize.min：让Column仅包裹子组件所需的最小高度

方式二：给Column添加固定高度约束（保留内部滚动） #

如果需要保留内部ListView的独立滚动能力，用SizedBox给Column设置明确高度：

class YourCustomListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: MediaQuery.of(context).size.height * 0.7,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          const Text(
            "Some title",
            style: TextStyle(fontSize: 16),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: 100,
              itemBuilder: (context, index) {
                return const ListTile(
                  title: Text("some"),
                  contentPadding:
                      EdgeInsets.symmetric(vertical: 0.0, horizontal: 16.0),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

• SizedBox给Column提供明确高度约束，解决hasSize断言错误
• Expanded让内部ListView填充Column剩余空间，避免再次出现尺寸冲突

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