ListView嵌套GridTile报'size.isFinite': is not true错误求助

错误原因 #

GridTile是为GridView设计的组件，它依赖父组件提供有限的尺寸约束。但ListView作为垂直滚动容器，给子组件的垂直约束是无限的（允许子组件无限延伸），导致GridTile无法计算出有效的有限尺寸，从而触发断言错误。

解决方法 #

方法1：用Stack+Positioned替代GridTile #

GridTile本质基于Stack实现，手动用Stack模拟其footer布局，适配ListView的无限约束环境：

body: ListView(
  scrollDirection: Axis.vertical,
  children: [
    Stack(
      children: [
        // 轮播图区域
        Container(
          height: 200,
          color: Colors.white10,
          child: CarouselSlider.builder(
            itemCount: carousel_image_list.length,
            itemBuilder: (context, index, realIndex) {
              final imageAdd = carousel_image_list[index];
              return buildImage(imageAdd, index);
            },
            options: CarouselOptions(
              onPageChanged: (index, reason) {
                setState(() {
                  activeIndex = index;
                });
              },
              initialPage: 0,
              height: 200,
              autoPlay: true,
              enlargeCenterPage: true,
              enableInfiniteScroll: false,
              enlargeStrategy: CenterPageEnlargeStrategy.height,
              viewportFraction: 0.8,
              pauseAutoPlayOnTouch: true,
              pauseAutoPlayOnManualNavigate: true,
              autoPlayCurve: Curves.fastOutSlowIn,
              autoPlayInterval: Duration(seconds: 3),
            ),
          ),
        ),
        // 底部标题栏
        Positioned(
          left: 0,
          right: 0,
          bottom: 0,
          child: Container(
            color: Colors.black12,
            child: ListTile(
              leading: Text(
                widget.productName ?? 'Product Name',
                style: TextStyle(
                  color: Colors.black,
                  fontWeight: FontWeight.w700,
                ),
                textAlign: TextAlign.start,
              ),
            ),
          ),
        ),
      ],
    ),
  ],
),

方法2：给GridTile包裹固定高度容器 #

如果坚持使用GridTile，给它外层套一个SizedBox，设置明确高度（轮播图高度+footer高度），让GridTile获得有限尺寸约束：

body: ListView(
  scrollDirection: Axis.vertical,
  children: [
    SizedBox(
      height: 256, // 200(轮播图高度)+56(ListTile默认高度)
      child: GridTile(
        footer: Container(
          color: Colors.black12,
          child: ListTile(
            leading: Text(
              widget.productName ?? 'Product Name',
              style: TextStyle(
                color: Colors.black,
                fontWeight: FontWeight.w700,
              ),
              textAlign: TextAlign.start,
            ),
          ),
        ),
        child: Container(
          color: Colors.white10,
          child: CarouselSlider.builder(
            itemCount: carousel_image_list.length,
            itemBuilder: (context, index, realIndex) {
              final imageAdd = carousel_image_list[index];
              return buildImage(imageAdd, index);
            },
            options: CarouselOptions(
              onPageChanged: (index, reason) {
                setState(() {
                  activeIndex = index;
                });
              },
              initialPage: 0,
              height: 200,
              autoPlay: true,
              enlargeCenterPage: true,
              enableInfiniteScroll: false,
              enlargeStrategy: CenterPageEnlargeStrategy.height,
              viewportFraction: 0.8,
              pauseAutoPlayOnTouch: true,
              pauseAutoPlayOnManualNavigate: true,
              autoPlayCurve: Curves.fastOutSlowIn,
              autoPlayInterval: Duration(seconds: 3),
            ),
          ),
        ),
      ),
    ),
  ],
),

额外注意点 #

• 确保carousel_image_list不为空，否则CarouselSlider会因itemCount为0导致布局异常，可添加空判断逻辑。
• 若需自适应轮播图高度，可替换固定高度为AspectRatio组件，例如AspectRatio(aspectRatio: 16/9, child: CarouselSlider(...))。

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