flutter tab页面切换练手,手势滑动、禁止滑动、page切换动画,禁止切换动画。

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

Dart 复制代码
class DevicePage extends StatefulWidget {
  const DevicePage({super.key});

  @override
  State<DevicePage> createState() => _DeviceState();
}

class _DeviceState extends State<DevicePage>
    with SingleTickerProviderStateMixin {
  TabController? _tabController;

  List<Tab> tabs = [
    const Tab(
      text: '设备类型',
    ),
    const Tab(
      text: '设备规格',
    ),
    const Tab(
      text: '设备台账',
    ),
  ];
  int _cuttentIndex = 0;
  List<Widget> 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,
          dividerHeight: 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点击切换动画

相关推荐
行者9611 分钟前
Flutter与OpenHarmony深度集成:数据导出组件的实战优化与性能提升
flutter·harmonyos·鸿蒙
小雨下雨的雨13 分钟前
Flutter 框架跨平台鸿蒙开发 —— Row & Column 布局之轴线控制艺术
flutter·华为·交互·harmonyos·鸿蒙系统
小雨下雨的雨1 小时前
Flutter 框架跨平台鸿蒙开发 —— Center 控件之完美居中之道
flutter·ui·华为·harmonyos·鸿蒙
小雨下雨的雨1 小时前
Flutter 框架跨平台鸿蒙开发 —— Icon 控件之图标交互美学
flutter·华为·交互·harmonyos·鸿蒙系统
小雨下雨的雨2 小时前
Flutter 框架跨平台鸿蒙开发 —— Placeholder 控件之布局雏形美学
flutter·ui·华为·harmonyos·鸿蒙系统
行者962 小时前
OpenHarmony Flutter弹出菜单组件深度实践:从基础到高级的完整指南
flutter·harmonyos·鸿蒙
前端不太难3 小时前
Flutter / RN / iOS,在长期维护下的性能差异本质
flutter·ios
小雨下雨的雨3 小时前
Flutter 框架跨平台鸿蒙开发 —— Padding 控件之空间呼吸艺术
flutter·ui·华为·harmonyos·鸿蒙系统
行者963 小时前
Flutter到OpenHarmony:横竖屏自适应布局深度实践
flutter·harmonyos·鸿蒙
小雨下雨的雨3 小时前
Flutter 框架跨平台鸿蒙开发 —— Align 控件之精准定位美学
flutter·ui·华为·harmonyos·鸿蒙