当前位置: 首页 > news >正文

PageView 内嵌套 TabBarView 的滑动冲突

要解决 PageView 内嵌套 TabBarView 的滑动冲突,并在 TabBarView 滑动到边界时将滑动事件提交给上一级的 PageView,可以使用 NotificationListener 和自定义的 TabBarView 来实现滑动事件的传递。以下是具体的实现方法:

import 'package:flutter/material.dart';
import '../../util/theme_util.dart';///主体框架---- 筛选工单状态
class WorkTabBarPage extends StatefulWidget {late PageController? _pageController;WorkTabBarPage(this._pageController, {Key? key,}) : super(key: key);_WorkTabBarState createState() => _WorkTabBarState();
}class _WorkTabBarState extends State<WorkTabBarPage>with SingleTickerProviderStateMixin {late TabController _tabController;int _currentIndex = 0;List<Map<String, dynamic>> _tabData = [{'title': '全部订单', 'count': 0},{'title': '待提交', 'count': 5},{'title': '已提交', 'count': 3},{'title': '待处理', 'count': 2},{'title': '已处理', 'count': 5},{'title': '已完成', 'count': 3},];void initState() {super.initState();_tabController = TabController(length: _tabData.length, vsync: this);_tabController.addListener(_handleTabSelection);}void _handleTabSelection() {if (_tabController.indexIsChanging) {setState(() {_currentIndex = _tabController.index;});}}void dispose() {_tabController.dispose();super.dispose();}Widget build(BuildContext context) {return Scaffold(backgroundColor: ThemeUtils.getBgProminent(context),appBar: AppBar(backgroundColor: ThemeUtils.getBgProminent(context),title: TabBar(isScrollable: true,// 设置标题栏可滚动indicator: UnderlineTabIndicator(borderSide: BorderSide(width: 2.0, color: ThemeUtils.getThemeColor(context)),// 设置选中下的横线颜色和宽度insets: EdgeInsets.symmetric(horizontal: 10.0),),dividerColor: Colors.transparent,indicatorSize: TabBarIndicatorSize.label,// 设置下划线的长度为标签的宽度labelColor: ThemeUtils.getThemeColor(context),// 设置选中标签的颜色unselectedLabelColor: ThemeUtils.getTextDeepColor(context),labelStyle: TextStyle(fontSize: 16.0, // 选中时的字体大小fontWeight: FontWeight.bold, // 选中时的字体加粗),unselectedLabelStyle: TextStyle(fontSize: 14.0, // 未选中时的字体大小fontWeight: FontWeight.normal, // 未选中时的字体加粗),controller: _tabController,tabAlignment: TabAlignment.start,tabs: _tabData.map((tab) {return Tab(child: Row(children: [Text(tab['title']),if (tab['count'] > 0)Container(padding: EdgeInsets.all(2),decoration: BoxDecoration(color: Colors.red,borderRadius: BorderRadius.circular(8),),constraints: BoxConstraints(minWidth: 14,minHeight: 14,),child: Text(tab['count'].toString(),style: TextStyle(color: Colors.white,fontSize: 10,),textAlign: TextAlign.center,),),],),);}).toList(),),),body: _buildCustomTabBarView(),);}Widget _buildCustomTabBarView() {return NotificationListener<ScrollNotification>(onNotification: (ScrollNotification notification) {if (notification is ScrollEndNotification) {// Check if the TabBarView has reached the beginning or endif (_tabController.index <= 0) {print('cexxxxx001 ${_tabController.index}  extentBefore ${notification.metrics.extentBefore}  extentAfter ${notification.metrics.extentAfter}');// Reached the beginning, pass the left swipe to the PageViewif (notification.metrics.extentBefore == 0) {widget. _pageController!.previousPage(duration: const Duration(milliseconds: 300),curve: Curves.ease,);print('cexxxxx001');}} else if (_tabController.index >= _tabData.length - 1) {print('cexxxxx002 ${_tabController.index}  extentAfter ${notification.metrics.extentAfter} extentBefore ${notification.metrics.extentBefore}');// Reached the end, pass the right swipe to the PageViewif (notification.metrics.extentAfter == 0) {widget._pageController!.nextPage(duration: const Duration(milliseconds: 300),curve: Curves.ease,);print('cexxxxx002');}}}return false;},child: TabBarView(controller: _tabController,children: _tabData.map((tab) {return Container(child: Center(child: Text('这里是${tab['title']}页面内容'),),);}).toList(),),);}
}

相关文章:

  • 【C++指南】位运算知识详解
  • 利用软件I2C驱动OLED,点亮、熄灭OLED屏幕以及获取当前OLED屏幕开启状态
  • 【蓝桥杯】水质检测
  • 基于大语言模型的AI智能体开发:构建具备工具使用能力的智能助手
  • 一行命令打开iOS模拟器
  • [C] 第6章 C51函数
  • Spring Boot单元测试实战指南:从零到高效测试
  • SEO(Search Engine Optimization,搜索引擎优化)相关知识点
  • Linux:库的制作与原理
  • 第二章:langchain文本向量化(embed)搭建与详细教程-openai接口方式(上)
  • Linux网络编程 深入Linux网络栈:原始套接字链路层实战解析
  • 多语言笔记系列:共享数据
  • 从零开始学Python游戏编程37-精灵4
  • C++中的next_permutation全排列函数
  • Java学习手册:TCP 协议基础
  • C语言教程(十六): C 语言字符串详解
  • 初识Redis · 主从复制(下)
  • Redis 核心应用场景
  • rsync实现内网两台服务器文件同步
  • 【含文档+PPT+源码】基于SpringBoot+Vue的移动台账管理系统
  • 中国气象局:针对山西、广西、陕西启动抗旱四级应急响应
  • 国防部:“台独”武装摆练纯属搞心理安慰,怎么演都是溃败的死局
  • 正荣地产旗下“H20正荣2”债未能于宽限期内支付分期偿付款,尚未就新兑付方案达成一致
  • “听公交时听一听”,上海宝山街头遍布“有声图书馆”
  • 开发国内首个泌尿专科智能体,医生们将临床经验转变为知识图谱
  • 外交部:制裁在涉港问题上表现恶劣的美方人士是对等反制