小工具知识网

当前位置: 首页 > 行业知识 > flutter tab页面切换练手,手势滑动、禁止滑动、page切换动画,禁止切换动画。

行业知识

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],    );  }}

2:只tab点击切换,带page切换动画,关闭page手势切换。

3:关闭Tab点击切换动画

上一篇:宝塔面板内网访问指南,轻松实现网站内网访问秘籍!

下一篇:基于Springboot电子相册图片分享平台系统设计与实现 开题报告参考