当前位置:   article > 正文

flutter tab页面切换练手,手势滑动、禁止滑动、page切换动画,禁止切换动画。_flutter tabcontroller 现在左右滑动

flutter tabcontroller 现在左右滑动

1:AppBar、TabBar、TabBarView实现页面切换,点击tab后tabBarView有左右切换动画,滑动page联动tabBar

  1. class DevicePage extends StatefulWidget {
  2. const DevicePage({super.key});
  3. @override
  4. State<DevicePage> createState() => _DeviceState();
  5. }
  6. class _DeviceState extends State<DevicePage>
  7. with SingleTickerProviderStateMixin {
  8. TabController? _tabController;
  9. List<Tab> tabs = [
  10. const Tab(
  11. text: '设备类型',
  12. ),
  13. const Tab(
  14. text: '设备规格',
  15. ),
  16. const Tab(
  17. text: '设备台账',
  18. ),
  19. ];
  20. int _cuttentIndex = 0;
  21. List<Widget> tabViews = [
  22. const TabDeviceType(),
  23. const TabDeviceSpecs(),
  24. const TabDeviceLedger()
  25. ];
  26. @override
  27. void initState() {
  28. super.initState();
  29. _tabController = TabController(length: tabs.length, vsync: this);
  30. }
  31. @override
  32. Widget build(BuildContext context) {
  33. return Scaffold(
  34. appBar: AppBar(
  35. automaticallyImplyLeading: false,
  36. backgroundColor: AppColors.baseColor,
  37. centerTitle: true,
  38. title: TabBar(
  39. controller: _tabController,
  40. tabs: tabs,
  41. isScrollable: false,
  42. labelStyle: TextStyle(
  43. color: Colors.white,
  44. fontSize: 16.sp,
  45. fontWeight: FontWeight.bold),
  46. unselectedLabelStyle: TextStyle(
  47. color: const Color(0x99FFFFFF),
  48. fontSize: 15.sp,
  49. fontWeight: FontWeight.normal),
  50. indicatorColor: Colors.white,
  51. dividerHeight: 0,
  52. indicatorPadding: EdgeInsets.only(top: 3.h),
  53. indicator:
  54. MyCustomIndicator(indWidth: 13.w, indHeight: 3.w, radius: 2.w),
  55. // onTap:(int index){ 针对点击tab page无切换动画
  56. // _cuttentIndex = index;
  57. // print('index = $index');
  58. // setState(() {}); //刷新状态
  59. // },
  60. ),
  61. ),
  62. body: TabBarView(
  63. controller: _tabController,
  64. children: tabViews,
  65. // physics: new NeverScrollableScrollPhysics(), //禁止页面左右手势滑动
  66. ),
  67. // body: tabViews[_cuttentIndex],
  68. );
  69. }
  70. }

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

3:关闭Tab点击切换动画

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/431975
推荐阅读
相关标签
  

闽ICP备14008679号