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

相关推荐
恋猫de小郭1 小时前
Android 禁止侧载将正式实施,需要等待 24 小时冷静期
android·flutter·harmonyos
FFF-X1 小时前
解决 Flutter Gradle 下载报错:修改默认 distributionUrl
flutter
程序员Ctrl喵21 小时前
异步编程:Event Loop 与 Isolate 的深层博弈
开发语言·flutter
前端不太难1 天前
Flutter 如何设计可长期维护的模块边界?
flutter
小蜜蜂嗡嗡1 天前
flutter列表中实现置顶动画
flutter
始持1 天前
第十二讲 风格与主题统一
前端·flutter
始持1 天前
第十一讲 界面导航与路由管理
flutter·vibecoding
始持1 天前
第十三讲 异步操作与异步构建
前端·flutter
新镜1 天前
【Flutter】 视频视频源横向、竖向问题
flutter
黄林晴1 天前
Compose Multiplatform 1.10 发布:统一 Preview、Navigation 3、Hot Reload 三箭齐发
android·flutter