如何为CustomScrollView内页面设置动态高度？IndexedStack高度异常求助

问题原因分析 #

• 使用double.infinity作为SizedBox高度时，CustomScrollView无法确定子组件的具体高度，导致页面无法渲染显示；
• 使用double.maxFinite时，SizedBox会被拉伸到极大高度，直接造成底部出现无限空白；
• 标签页本身是滚动页面，嵌套在CustomScrollView中时，滚动逻辑与高度计算相互冲突，加剧了异常表现。

可行解决方案 #

方案一：用NestedScrollView替代CustomScrollView

NestedScrollView天生适配嵌套滚动场景，能自动处理子页面的高度适配，不需要额外的SizedBox包裹IndexedStack：

NestedScrollView(
  headerSliverBuilder: (context, innerBoxIsScrolled) => [
    const SliverAppBar(
      floating: true,
      expandedHeight: 0,
      title: Text("abc"),
    ),
  ],
  body: IndexedStack(
    index: controller.selectedTabIndex,
    children: _tabPage,
  ),
)

方案二：用IntrinsicHeight让IndexedStack自适应高度

通过IntrinsicHeight计算当前激活标签页的实际高度，避免无效的无限高度设置，但注意该组件会增加性能开销（需遍历子组件计算高度）：

CustomScrollView(
  slivers: [
    const SliverAppBar(
      floating: true,
      expandedHeight: 0,
      title: Text("abc"),
    ),
    SliverToBoxAdapter(
      child: IntrinsicHeight(
        child: IndexedStack(
          index: controller.selectedTabIndex,
          children: _tabPage,
        ),
      ),
    ),
  ],
)

方案三：让子滚动组件自适应内容高度

如果标签页是ListView这类滚动组件，设置shrinkWrap: true让其自适应内容高度，同时禁用自身滚动（由外层CustomScrollView统一处理），再手动计算可用高度：

CustomScrollView(
  slivers: [
    const SliverAppBar(
      floating: true,
      expandedHeight: 0,
      title: Text("abc"),
    ),
    SliverToBoxAdapter(
      child: SizedBox(
        height: MediaQuery.of(context).size.height - kToolbarHeight,
        child: IndexedStack(
          index: controller.selectedTabIndex,
          children: _tabPage.map((page) {
            if (page is ListView) {
              return ListView(
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                children: page.children,
              );
            }
            return page;
          }).toList(),
        ),
      ),
    ),
  ],
)

额外优化提示 #

IndexedStack会预加载所有子页面，若页面包含大量数据，可能拖慢初始化速度。可改用Offstage配合PageStorageKey，仅渲染当前激活的标签页，同时保留页面状态。

内容的提问来源于stack exchange，提问作者M.ArslanKhan