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点击切换动画

相关推荐
一只大侠的侠4 小时前
Flutter开源鸿蒙跨平台训练营 Day19自定义 useFormik 实现高性能表单处理
flutter·开源·harmonyos
恋猫de小郭5 小时前
Flutter Zero 是什么?它的出现有什么意义?为什么你需要了解下?
android·前端·flutter
一只大侠的侠10 小时前
Flutter开源鸿蒙跨平台训练营 Day 10特惠推荐数据的获取与渲染
flutter·开源·harmonyos
renke336413 小时前
Flutter for OpenHarmony:色彩捕手——基于HSL色轮与感知色差的交互式色觉训练系统
flutter
子春一15 小时前
Flutter for OpenHarmony:构建一个 Flutter 四色猜谜游戏,深入解析密码逻辑、反馈算法与经典益智游戏重构
算法·flutter·游戏
铅笔侠_小龙虾16 小时前
Flutter 实战: 计算器
开发语言·javascript·flutter
微祎_17 小时前
Flutter for OpenHarmony:构建一个 Flutter 重力弹球游戏,2D 物理引擎、手势交互与关卡设计的工程实现
flutter·游戏·交互
一起养小猫18 小时前
Flutter for OpenHarmony 实战_魔方应用UI设计与交互优化
flutter·ui·交互·harmonyos
hudawei99618 小时前
flutter和Android动画的对比
android·flutter·动画
一只大侠的侠18 小时前
Flutter开源鸿蒙跨平台训练营 Day7Flutter+ArkTS双方案实现轮播图+搜索框+导航组件
flutter·开源·harmonyos