Flutter中GridView.Builder运行时不显示的问题排查与求助

问题根源 #

• 布局约束缺失：Row 容器不会为子组件提供固定宽度约束，而 GridView 默认会尝试无限扩展空间，导致渲染失败。
• 滚动冲突：外层已经有水平方向的 SingleChildScrollView，但 GridView 默认开启垂直滚动，双重滚动逻辑会干扰布局计算，使得 GridView 无法正常显示。

修复步骤 #

1. 给 GridView 添加明确尺寸约束
   用 SizedBox 包裹 GridView，指定宽度和高度，让 Row 能准确计算子组件的布局空间。
2. 禁用 GridView 自身滚动
   设置 physics: NeverScrollableScrollPhysics()，避免和外层滚动组件冲突，同时简化布局计算。
3. 开启 shrinkWrap 自适应高度
   设置 shrinkWrap: true，让 GridView 根据子项总高度自适应，避免占用多余空间。

修改后的完整代码 #

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Text("name of section"),
    Scrollbar(
      controller: _scrollController,
      thumbVisibility: true,
      child: SingleChildScrollView(
        controller: _scrollController,
        scrollDirection: Axis.horizontal,
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Row(children: <Widget>[
            Consumer<productHome>(
              builder: (context, value, child) {
                return SizedBox(
                  // 给GridView指定明确的宽高
                  width: MediaQuery.of(context).size.width * 0.9, // 可根据需求调整
                  height: 300,
                  child: GridView.builder(
                    shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(), // 禁用自身滚动
                    itemCount: 10,
                    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 3,
                      mainAxisSpacing: 8.0,
                      crossAxisSpacing: 8.0,
                    ),
                    itemBuilder: (context, index) {
                      return Container(
                        width: 150,
                        height: 250,
                        child: Column(children: [
                          Image.asset(value.image),
                          Row(
                            children: [
                              Expanded(
                                  child: IconButton(
                                      onPressed: () {
                                        print("object");
                                      },
                                      icon: const Icon(Icons.add))),
                              Expanded(
                                child: Text(
                                  value.oldPrice,
                                  style: const TextStyle(
                                      decoration: TextDecoration.lineThrough),
                                ),
                              ),
                              Expanded(child: Text(value.newPrice))
                            ],
                          ),
                          const SizedBox(height: 8),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [Text(value.nameOfProduct)],
                          )
                        ]),
                      );
                    },
                  ),
                );
              },
            ),
          ]),
        ),
      ),
    )
  ],
)

额外说明 #

• 如果需要 GridView 也能垂直滚动，可以去掉外层的 SingleChildScrollView，并调整整体布局结构，避免滚动冲突。
• 尺寸数值可以根据你的UI需求灵活调整，比如用 MediaQuery 获取屏幕宽度比例，保证适配不同设备。

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