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

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(),),);}
}
http://www.xdnf.cn/news/1657.html

相关文章:

  • PySide6 GUI 学习笔记——常用类及控件使用方法(常用类矩阵QRectF)
  • 在Vue3中,如何在父组件中使用v-model与子组件进行双向绑定?
  • DNS实验
  • 【Python语言基础】24、并发编程
  • 学习记录:DAY17
  • 机器学习(7)——K均值聚类
  • 【python】一文掌握 markitdown 库的操作(用于将文件和办公文档转换为Markdown的Python工具)
  • .NET代码保护混淆和软件许可系统——Eziriz .NET Reactor 7
  • Postgresql源码(143)统计信息基础知识(带实例)
  • Zynq7020 制作boot.bin及烧录到开发板全流程解析
  • 【AI平台】n8n入门1:详细介绍n8n的多种安装方式(含docer图形化安装n8n)
  • sass 变量
  • spark-streaming(二)
  • Python 爬虫实战 | 企名科技
  • 基于Pytorch的深度学习-第二章
  • 《仙剑奇侠传二》游戏秘籍
  • 01.02、判定是否互为字符重排
  • SpringCloud——负载均衡
  • 自动化标注软件解析
  • 颠覆传统NAS体验:耘想WinNAS让远程存储如同本地般便捷
  • 【leetcode100】组合总和Ⅳ
  • 【踩坑记录】stm32 jlink程序烧录不进去
  • 《Learning Langchain》阅读笔记7-RAG(3)生成embeddings
  • react 子组件暴露,父组件接收
  • Qt 入门 6 之布局管理
  • TinyVue v3.22.0 正式发布:深色模式上线!集成 UnoCSS 图标库!TypeScript 类型支持全面升级!
  • 架构-项目管理
  • 半导体---检测和量测
  • Shader 空间变换(七)
  • 深度学习3.7 softmax回归的简洁实现