Flutter TabBarView搭配SliverFillRemaining无显示报错问题排查求助

问题原因 #

1. Sliver组件嵌套错误：SliverFillRemaining本身属于Sliver类型组件，只能直接作为CustomScrollView的slivers数组的直接子元素，你把它放在了SliverList的SliverChildListDelegate中，而这个delegate只接受普通的非Sliver组件（RenderBox类型），这就是报错中提到的期望RenderBox却收到RenderSliver类型的直接原因。
2. TabBarView高度约束缺失：TabBarView本身是无边界高度的滚动组件，你把它放在Column中时没有设置高度约束，就算解决第一个问题也会出现高度溢出报错。

修复方案 #

直接删除嵌套的SliverList，把SliverFillRemaining直接放到slivers数组中，同时给Column内的TabBarView套上Expanded来填充剩余高度即可，修改后的核心代码如下：

CustomScrollView(
  slivers: [
    SliverAppBar(
      elevation: 1,
      title: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          const SizedBox(
            width: 0.2,
          ),
          Image.asset(
            'assets/Images/logo.png',
            fit: BoxFit.contain,
            height: 60,
          ),
          IconButton(
            onPressed: () {},
            icon: const Icon(Icons.help),
            color: Colors.amber[700],
          )
        ],
      ),
      bottom: TabBar(
        tabs: const [
          Tab(
            icon: Icon(Icons.add),
          ),
          Tab(
            icon: Icon(Icons.subdirectory_arrow_left),
          )
        ],
        controller: controller,
      ),
    ),
    // 直接将SliverFillRemaining作为slivers的子元素
    SliverFillRemaining(
      child: Column(
        children: [
          // 给TabBarView套Expanded填充剩余高度
          Expanded(
            child: TabBarView(
              controller: controller,
              children: const [
                Text('data1'),
                // AccesTrait(
                //     traitement: widget.traitement, user: widget.user),
                Text('data')
              ],
            ),
          ),
        ],
      ),
    )
  ],
)

如果Column内不需要放置其他子元素，还可以直接删掉外层Column，代码更简洁：

SliverFillRemaining(
  child: TabBarView(
    controller: controller,
    children: const [
      Text('data1'),
      Text('data')
    ],
  ),
)

内容的提问来源于stack exchange，提问作者Rémy Alvarez