行业知识
flutter tab页面切换练手,手势滑动、禁止滑动、page切换动画,禁止切换动画。
2026-11-05 20:00:43
来源:互联网转载
1:AppBar、TabBar、TabBarView实现页面切换,点击tab后tabBarView有左右切换动画,滑动page联动tabBar
class DevicePage extends StatefulWidget { const DevicePage({super.key}); @override State createState() => _DeviceState();}class _DeviceState extends State with SingleTickerProviderStateMixin { TabController? _tabController; List tabs = [ const Tab( text: '设备类型', ), const Tab( text: '设备规格', ), const Tab( text: '设备台账', ), ]; int _cuttentIndex = 0; List tabViews = [ const TabDeviceType(), const TabDeviceSpecs(), const TabDeviceLedger() ]; @override void initState() { super.initState(); _tabController = TabController(length: tabs.length, vsync: this); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( automaticallyImplyLeading: false, backgroundColor: AppColors.baseColor, centerTitle: true, title: TabBar( controller: _tabController, tabs: tabs, isScrollable: false, labelStyle: TextStyle( color: Colors.white, fontSize: 16.sp, fontWeight: FontWeight.bold), unselectedLabelStyle: TextStyle( color: const Color(0x99FFFFFF), fontSize: 15.sp, fontWeight: FontWeight.normal), indicatorColor: Colors.white, piderHeight: 0, indicatorPadding: EdgeInsets.only(top: 3.h), indicator: MyCustomIndicator(indWidth: 13.w, indHeight: 3.w, radius: 2.w), // onTap:(int index){ 针对点击tab page无切换动画 // _cuttentIndex = index; // print('index = $index'); // setState(() {}); //刷新状态 // }, ), ), body: TabBarView( controller: _tabController, children: tabViews, // physics: new NeverScrollableScrollPhysics(), //禁止页面左右手势滑动 ), // body: tabViews[_cuttentIndex], ); }}