TabController

class TabsView extends StatefulWidget {
const TabsView({super.key});

@override
State<TabsView> createState() => _TabsViewState();
}

class _TabsViewState extends State<TabsView>
with SingleTickerProviderStateMixin {
late TabController _tabController;
final List<String> _dataSource = [
"12323423",
"12323423",
"12323423",
"12323423",
"12323423",
"12323423",
"12323423",
"12323423",
"12323423",
"12323423222222",
"123234239999999999",
"123234231111111111111",
];

@override
void initState() {
//生命周期函数。组件初始化的时候触发
// TODO: implement initState
super.initState();
_tabController = TabController(length: 3, vsync: this);
_tabController.addListener((){//点击事件
if(_tabController.indexIsChanging){
print("选中了${_tabController.index}");
}
});
}

@override
void dispose() {//生命周期函数。组件销毁的时候触发
// TODO: implement dispose
_tabController.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(50),
child: AppBar(
backgroundColor: Colors.white,
elevation: 1, //底部阴影线条
//导航栏
title: SizedBox(
height: 50,
child: TabBar(
controller: _tabController,
indicatorColor: Colors.red, //（指示器）底部线条颜色
indicatorWeight: 1, //（指示器）底部线条高度
indicatorPadding: EdgeInsets.all(3),
indicatorSize: TabBarIndicatorSize.label, //和lable等宽
unselectedLabelColor: Colors.black, //指示器未选中颜色
labelColor: Colors.orange, //选中文字颜色
tabs: [
Tab(child: Text("关注")),
Tab(child: Text("热门")),
Tab(child: Text("视频")),
],
),
),
),
),

  body: TabBarView(
    controller: _tabController,
    children: [
      KeepAlivewrapper(//自定义的缓存组件
        keepAlive: true,
        child: ListView.builder(
          itemCount: _dataSource.length,
          itemBuilder: (context,index){
            String v = _dataSource[index];
            return ListTile(title: Text(v),onTap: (){
              print("点击了列表$v-$index");
            },);
          }
         ),
      ),
      ListView(
        children: [
          ListTile(title: Text("2ewd")),
          ListTile(title: Text("2ewd2")),
        ],
      ),
      ListView(
        children: [
          ListTile(title: Text("3ewd")),
          ListTile(title: Text("3ewd2")),
        ],
      ),
    ],
  ),
);

}
}

import 'package:flutter/material.dart';
//缓存列表滑动位置使用
class KeepAlivewrapper extends StatefulWidget {
const KeepAlivewrapper(
{super.key, this.child, required this.keepAlive}
);
final Widget? child;
final bool keepAlive;
@override
State<KeepAlivewrapper> createState() => _KeepAlivewrapperState();
}

class _KeepAlivewrapperState extends State<KeepAlivewrapper> with AutomaticKeepAliveClientMixin
{
@override
Widget build(BuildContext context) {
return widget.child!;
}
@override
// TODO: implement wantKeepAlive
bool get wantKeepAlive => widget.keepAlive;
@override
void didUpdateWidget(covariant KeepAlivewrapper oldWidget) {
// TODO: implement didUpdateWidget

if(oldWidget.keepAlive != widget.keepAlive){
// keepAlive 状态需要更新，实现在 AutomaticKeepAliveClientMixin
updateKeepAlive();
}
super.didUpdateWidget(oldWidget);
}
}