Flutter标签页滚动同步异常：如何实现各标签页独立滚动？

Flutter的Element复用机制会在新旧Widget类型一致且无唯一标识时，复用旧Element的状态（包括滚动位置）。你的tabA和tabB结构完全相同，切换标签时，Flutter会把前一个标签页中SingleChildScrollView的滚动状态转移到新标签页的对应组件上，导致两个标签页的滚动位置同步。

以下两种方式均可实现各标签页滚动状态独立：

方式一：为滚动组件设置唯一GlobalKey #

给两个标签页内的SingleChildScrollView分别分配唯一的GlobalKey，让Flutter能够区分不同组件，避免状态复用：

// 定义全局唯一Key
final _tabAScrollKey = GlobalKey<SingleChildScrollViewState>();
final _tabBScrollKey = GlobalKey<SingleChildScrollViewState>();

Widget tabA() {
  return Container(
    padding: const EdgeInsets.only(left: 12, right: 12),
    child: Column(
      children: [
        Text("sometext"),
        SingleChildScrollView(
          key: _tabAScrollKey, // 绑定专属Key
          scrollDirection: Axis.horizontal,
          child: Container(
            child: Card(
              child: DataTable(
                // 表格内容填充
              ),
            ),
          ),
        ),
      ],
    ),
  );
}

Widget tabB() {
  return Container(
    padding: const EdgeInsets.only(left: 12, right: 12),
    child: Column(
      children: [
        Text("othertext"),
        SingleChildScrollView(
          key: _tabBScrollKey, // 绑定专属Key
          scrollDirection: Axis.horizontal,
          child: Container(
            child: Card(
              child: DataTable(
                // 表格内容填充
              ),
            ),
          ),
        ),
      ],
    ),
  );
}

方式二：为每个标签页单独维护ScrollController #

创建独立的ScrollController来保存各自的滚动位置，切换标签时能持久化状态：

// 定义独立的滚动控制器
final _tabAController = ScrollController();
final _tabBController = ScrollController();

Widget tabA() {
  return Container(
    padding: const EdgeInsets.only(left: 12, right: 12),
    child: Column(
      children: [
        Text("sometext"),
        SingleChildScrollView(
          controller: _tabAController, // 绑定专属控制器
          scrollDirection: Axis.horizontal,
          child: Container(
            child: Card(
              child: DataTable(
                // 表格内容填充
              ),
            ),
          ),
        ),
      ],
    ),
  );
}

Widget tabB() {
  return Container(
    padding: const EdgeInsets.only(left: 12, right: 12),
    child: Column(
      children: [
        Text("othertext"),
        SingleChildScrollView(
          controller: _tabBController, // 绑定专属控制器
          scrollDirection: Axis.horizontal,
          child: Container(
            child: Card(
              child: DataTable(
                // 表格内容填充
              ),
            ),
          ),
        ),
      ],
    ),
  );
}

// 组件销毁时释放控制器，避免内存泄漏
@override
void dispose() {
  _tabAController.dispose();
  _tabBController.dispose();
  super.dispose();
}

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