Flutter切换Tab时如何重置滚动位置？

要实现切换Tab时自动回到顶部，你可以给每个SingleChildScrollView绑定独立的ScrollController，并监听TabController的切换事件来触发滚动重置。具体修改如下：

步骤1：定义多个ScrollController #

在State类中为三个Tab分别创建控制器：

late TabController _tabController;
// 为每个Tab定义独立的滚动控制器
final _scrollController1 = ScrollController();
final _scrollController2 = ScrollController();
final _scrollController3 = ScrollController();

步骤2：监听Tab切换事件 #

在initState中添加TabController的监听，当索引变化时，让对应Tab的滚动控制器回到顶部：

@override
void initState() {
  super.initState();
  _tabController = TabController(length: 3, vsync: this);
  
  // 监听Tab切换事件
  _tabController.addListener(() {
    if (!_tabController.indexIsChanging) {
      // 根据当前Tab索引，重置对应滚动位置
      switch (_tabController.index) {
        case 0:
          _scrollController1.animateTo(
            0,
            duration: const Duration(milliseconds: 300),
            curve: Curves.easeInOut,
          );
          break;
        case 1:
          _scrollController2.animateTo(
            0,
            duration: const Duration(milliseconds: 300),
            curve: Curves.easeInOut,
          );
          break;
        case 2:
          _scrollController3.animateTo(
            0,
            duration: const Duration(milliseconds: 300),
            curve: Curves.easeInOut,
          );
          break;
      }
    }
  });
}

步骤3：绑定控制器到SingleChildScrollView #

修改每个SingleChildScrollView，添加对应的controller参数：

// Tab1的滚动视图
SingleChildScrollView(
  controller: _scrollController1,
  child: Column(...)
),
// Tab2的滚动视图
SingleChildScrollView(
  controller: _scrollController2,
  child: Column(...)
),
// Tab3的滚动视图
SingleChildScrollView(
  controller: _scrollController3,
  child: Column(...)
)

步骤4：销毁控制器 #

在dispose方法中销毁所有滚动控制器：

@override
void dispose() {
  _tabController.dispose();
  _scrollController1.dispose();
  _scrollController2.dispose();
  _scrollController3.dispose();
  super.dispose();
}

完整修改后的代码 #

// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';

class JobDetails extends StatefulWidget {
  const JobDetails({Key? key}) : super(key: key);

  @override
  _JobDetailsState createState() => _JobDetailsState();
}

class _JobDetailsState extends State<JobDetails>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;
  final _scrollController1 = ScrollController();
  final _scrollController2 = ScrollController();
  final _scrollController3 = ScrollController();

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
    
    _tabController.addListener(() {
      if (!_tabController.indexIsChanging) {
        switch (_tabController.index) {
          case 0:
            _scrollController1.animateTo(
              0,
              duration: const Duration(milliseconds: 300),
              curve: Curves.easeInOut,
            );
            break;
          case 1:
            _scrollController2.animateTo(
              0,
              duration: const Duration(milliseconds: 300),
              curve: Curves.easeInOut,
            );
            break;
          case 2:
            _scrollController3.animateTo(
              0,
              duration: const Duration(milliseconds: 300),
              curve: Curves.easeInOut,
            );
            break;
        }
      }
    });
  }

  @override
  void dispose() {
    _tabController.dispose();
    _scrollController1.dispose();
    _scrollController2.dispose();
    _scrollController3.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, isScrolled) {
          return [
            SliverPersistentHeader(
              pinned: true,
              delegate: MyHeaderDelegate(),
            ),
            SliverPadding(
              padding: EdgeInsets.symmetric(horizontal: 18),
              sliver: SliverAppBar(
                shape: ContinuousRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(20)),
                ),
                automaticallyImplyLeading: false,
                toolbarHeight: kTextTabBarHeight,
                primary: false,
                backgroundColor: Colors.grey[200],
                pinned: true,
                titleSpacing: 0,
                title: TabBar(
                  indicator: BoxDecoration(
                      border: Border.all(
                        color: AppConstants.primaryColor,
                      ),
                      borderRadius: BorderRadius.circular(7),
                      color: AppConstants.primaryColor),
                  unselectedLabelColor: const Color(0x66181D1A),
                  splashBorderRadius: BorderRadius.circular(7),
                  controller: _tabController,
                  tabs: const [
                    Tab(child: Text('About')),
                    Tab(text: 'Recs'),
                    Tab(text: 'References'),
                  ],
                ),
              ),
            ),
          ];
        },
        body: TabBarView(
          controller: _tabController,
          children: [
            SingleChildScrollView(
              controller: _scrollController1,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Padding(
                    padding: EdgeInsets.all(18.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [Text('Tab1')],
                    ),
                  ),
                ],
              ),
            ),
            SingleChildScrollView(
              controller: _scrollController2,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: const [
                  Padding(
                    padding: EdgeInsets.all(18.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        SizedBox(height: 12),
                        Text('Tab 2 Content'),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            SingleChildScrollView(
              controller: _scrollController3,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Padding(
                    padding: EdgeInsets.all(18.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        SizedBox(height: 12),
                        Text('Tab3')
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class MyHeaderDelegate extends SliverPersistentHeaderDelegate {
  // delegate implementation
}

class AppConstants {
  static const primaryColor = Colors.blue; // 这里根据你的实际颜色修改
}

说明：如果不需要动画效果，可以把animateTo换成jumpTo(0)，这样会直接跳到顶部，没有过渡动画。

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