TabBar和TabBarView实现顶部滑动导航

 home.dart子页面主要代码：

import 'package:flutter/material.dart';class HomePage extends StatefulWidget {const HomePage({super.key});@overrideState<HomePage> createState() => _HomePageState();
}class _HomePageState extends State<HomePage>with SingleTickerProviderStateMixin {late TabController _tabController;//生命周期函数：初始化时触发@overridevoid initState() {super.initState();_tabController = TabController(length: 9, vsync: this);}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(//背景颜色backgroundColor: Colors.white,//阴影高度elevation: 0,title: TabBar(//是否可滚动isScrollable: true,controller: _tabController,//指示器高度indicatorWeight: 1,//指示器边距// indicatorPadding: const EdgeInsets.all(2),//选中字体颜色labelColor: Colors.white,//未选中字体颜色unselectedLabelColor: Colors.grey,//指示器宽度，默认tab:撑满选项卡宽度; label:宽度跟随内容，不撑满选项卡// indicatorSize: TabBarIndicatorSize.label,//指示器颜色// indicatorColor: Colors.white,//指示器Decorationindicator: BoxDecoration(color: Colors.blue,borderRadius: BorderRadius.circular(10),),//选中label样式labelStyle: const TextStyle(fontSize: 15),//未选中label样式unselectedLabelStyle: const TextStyle(fontSize: 14),tabs: const [Tab(child: Text("关注"),),Tab(child: Text("热门"),),Tab(child: Text("视频"),),Tab(child: Text("关注"),),Tab(child: Text("热门"),),Tab(child: Text("视频"),),Tab(child: Text("关注"),),Tab(child: Text("热门"),),Tab(child: Text("视频"),),],),),body: TabBarView(controller: _tabController,children: const [Center(child: Text("关注"),),Center(child: Text("热门"),),Center(child: Text("视频"),),Center(child: Text("关注"),),Center(child: Text("热门"),),Center(child: Text("视频"),),Center(child: Text("关注"),),Center(child: Text("热门"),),Center(child: Text("视频"),),],),);}
}

首先需要with SingleTickerProviderStateMixin方法，然后initState生命周期函数中设置Tab长度，最后在Scaffold中设置TabBar和TabBarView。

appBar高度设置：

appBar: PreferredSize(//appBar高度设置preferredSize: const Size.fromHeight(40),child: AppBar(//背景颜色backgroundColor: Colors.transparent,//阴影高度elevation: 0,title: TabBar(//是否可滚动isScrollable: true,controller: _tabController,//指示器高度// indicatorWeight: 1,//指示器边距indicatorPadding: const EdgeInsets.all(5),//选中字体颜色labelColor: Colors.red,//指示器颜色indicatorColor: Colors.red,//指示器Decoration/* indicator: BoxDecoration(color: Colors.blue,borderRadius: BorderRadius.circular(10),),*///未选中字体颜色unselectedLabelColor: Colors.black,//指示器宽度，默认tab:撑满选项卡宽度; label:宽度跟随内容，不撑满选项卡indicatorSize: TabBarIndicatorSize.label,//选中label样式labelStyle: const TextStyle(fontSize: 15),//未选中label样式unselectedLabelStyle: const TextStyle(fontSize: 15),//只监听点击事件，多次点击同一个tab且每次都会监听/*onTap: (index) {print(index);},*/tabs: const [Tab(child: Text("关注"),),Tab(child: Text("热门"),),Tab(child: Text("视频"),),Tab(child: Text("关注"),),Tab(child: Text("热门"),),Tab(child: Text("视频"),),Tab(child: Text("关注"),),Tab(child: Text("热门"),),Tab(child: Text("视频"),),],),),
),

AppBar外嵌套PreferredSize组件，PreferredSize组件中通过preferredSize: const Size.fromHeight(40),属性设置AppBar的高度。

onTap属性只监听点击事件，多次点击同一个tab且每次都会监听。

TabController监听事件：

@override
void initState() {super.initState();_tabController = TabController(length: 9, vsync: this);//监听_tabController事件的改变(滑动和点击都会监听，且同一tab多次点击只监听一次)_tabController.addListener(() {if (_tabController.animation?.value == _tabController.index) {print(_tabController.index);}});
}///生命周期函数，组件销毁时触发
@override
void dispose() {super.dispose();_tabController.dispose();
}

TabController滑动和点击都会监听，且同一tab多次点击只监听一次。

dispose()为生命周期销毁函数。

TabBar下的主要属性代码中已注释，更多属性请参考源码：

const TabBar({super.key,required this.tabs,this.controller,this.isScrollable = false,this.padding,this.indicatorColor,this.automaticIndicatorColorAdjustment = true,this.indicatorWeight = 2.0,this.indicatorPadding = EdgeInsets.zero,this.indicator,this.indicatorSize,this.dividerColor,this.labelColor,this.labelStyle,this.labelPadding,this.unselectedLabelColor,this.unselectedLabelStyle,this.dragStartBehavior = DragStartBehavior.start,this.overlayColor,this.mouseCursor,this.enableFeedback,this.onTap,this.physics,this.splashFactory,this.splashBorderRadius,}) : _isPrimary = true,assert(indicator != null || (indicatorWeight > 0.0));

main.dart首页代码：

import 'package:flutter/material.dart';
import 'package:flutter_demo/tabs/category.dart';
import 'package:flutter_demo/tabs/home.dart';
import 'package:flutter_demo/tabs/people.dart';
import 'package:flutter_demo/tabs/setting.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(//隐藏DEBUG图标debugShowCheckedModeBanner: false,theme: ThemeData(primarySwatch: Colors.blue),home: const Scaffold(body: MyHomePage(),),);}
}class MyHomePage extends StatelessWidget {const MyHomePage({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return const Tabs();}
}class Tabs extends StatefulWidget {const Tabs({super.key});@overrideState<Tabs> createState() => _TabsState();
}class _TabsState extends State<Tabs> {int currentIndex = 0;List<Widget> pages = const [HomePage(),CategoryPage(),SettingPage(),PeoplePage()];@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("Flutter"),),body: pages[currentIndex],drawer: const Drawer(child: Column(children: [Row(children: [Expanded(flex: 1,child: UserAccountsDrawerHeader(accountName: Text("张三"),accountEmail: Text("xxx@qq.com"),currentAccountPicture: CircleAvatar(backgroundImage: NetworkImage("https://www.itying.com/images/flutter/1.png"),),decoration: BoxDecoration(image: DecorationImage(image: NetworkImage("https://www.itying.com/images/flutter/2.png"),fit: BoxFit.cover,),),),),],),ListTile(leading: CircleAvatar(child: Icon(Icons.people,),),title: Text("个人中心"),),Divider(),ListTile(leading: CircleAvatar(child: Icon(Icons.settings,),),title: Text("系统设置"),)],),),bottomNavigationBar: BottomNavigationBar(//选中菜单颜色fixedColor: Colors.blue,//图标大小，默认24.0iconSize: 30,//第几个菜单选中currentIndex: currentIndex,//当item数量大于3个时需要设置type属性type: BottomNavigationBarType.fixed,unselectedItemColor: Colors.grey.shade600,onTap: (index) {setState(() {currentIndex = index;});},items: const [BottomNavigationBarItem(icon: Icon(Icons.home),label: "首页",),BottomNavigationBarItem(icon: Icon(Icons.category),label: "分类",),BottomNavigationBarItem(icon: Icon(Icons.settings),label: "设置",),BottomNavigationBarItem(icon: Icon(Icons.people),label: "用户",),],),);}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/2746.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

windows环境hadoop报错‘D:\Program‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。

windows环境hadoop报错‘D:\Program‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。

Hadoop版本为2.7.3&#xff0c;在环境配置好后&#xff0c;检查hadoop安装版本&#xff0c;报如标题所示错误&#xff0c;尝试网上主流的几种方法均无效。 错误&#xff1a;windows环境hadoop报错’D:\Program’ 不是内部或外部命令,也不是可运行的程序 或批处理文件。 错误方…
阅读更多...
【技巧】Maven重复依赖分析查找

【技巧】Maven重复依赖分析查找

【技巧】Maven重复依赖分析查找 遇到奇葩的错误可以考虑是不是依赖冲突了 比如同一段代码 再这个项目中好好的 另一个项目中不能用等 idea安装插件 maven helper 打开pom文件 输入要查找的依赖 将不用的排除掉 右键排除即可
阅读更多...
在阿里云平台注册一个域名

在阿里云平台注册一个域名

我们访问阿里云官网 阿里云 然后 我们右上角点击登录 然后 按正常操作流程登录 登录成功后 我们点击控制台 我们将鼠标 移入 右上角 图片指向的位置 我们点击域名 进入界面后点击注册域名 在输入框中输入域名内容 然后 按回车 然后弹出的列表 我们可以选一个未注册的 点击…
阅读更多...
Druid-排查conditionDoubleConstAllow配置问题(double const condition)

Druid-排查conditionDoubleConstAllow配置问题(double const condition)

Druid-排查conditionDoubleConstAllow配置问题(double const condition) 报错信息 Caused by: java.sql.SQLException: sql injection violation, dbType postgresql, druid-version 1.2.18, double const condition : SELECT * FROM test where 11 AND TRUE AND TRUE关键词&…
阅读更多...
正则表达式概念以及语法的使用

正则表达式概念以及语法的使用

目录 1.概念 2. 为什么使用正则表达式&#xff1f; 3. 语法 1.普通字符 非打印字符 2. 特殊字符 3. 限定符 4. 定位符 5. 运算优先级 3.匹配规则 1. 基本模式匹配 2. 字符簇 3. 确定重复出现 1.概念 正则表达式(Regular Expression)是一种文本模式&#xff0c;包…
阅读更多...
如何使用自动化构造随机路由模型

如何使用自动化构造随机路由模型

为什么要仿真随机路由&#xff1f; 路由器测试中&#xff0c;为了最大程度还原现网路由情况&#xff0c;评估路由器在现网环境下稳定工作各项指标&#xff0c;需要对导入路由进行离散仿真&#xff0c;目前路由仿真可分为导入路由与生成路由两种方式&#xff0c;导入路由需要现…
阅读更多...
think-on-graph: 基于知识图谱的大模型推理

think-on-graph: 基于知识图谱的大模型推理

概述 本文的研究背景是大规模语言模型在复杂推理任务中存在困难并展示了较低的性能&#xff0c;特别是在需要知识的追溯能力、及时性和准确性的场景中。 过去的方法主要面临两个问题&#xff1a;推理不负责任容易生成虚构或带有有害文本&#xff0c;以及模型在预训练阶段无法…
阅读更多...
基于IPC-CFX的点对点通信C#

基于IPC-CFX的点对点通信C#

IPC-CFX有两种主要的通信方式&#xff0c;可以通过RabbitMQ发布和订阅&#xff0c;也可以通过request和response进行点对点的通信&#xff0c;本文主要讲的是点对点的通信方式。 在vscode里建立新的dotnet项目&#xff0c;可以通过终端输入dotnet new console来建立&#xff0c…
阅读更多...
LCD—STM32液晶显示（2.使用FSMC模拟8080时序）

LCD—STM32液晶显示（2.使用FSMC模拟8080时序）

目录 使用STM32的FSMC模拟8080接口时序 FSMC简介 FSMC NOR/PSRAM中的模式B时序图 用FSMC模拟8080时序 重点&#xff1a;HADDR内部地址与FSMC地址信号线的转换&#xff08;实现地址对齐&#xff09; 使用STM32的FSMC模拟8080接口时序 ILI9341的8080通讯接口时序可以由STM32使…
阅读更多...
北邮国院物联网 Microprocessor 微处理器笔记

北邮国院物联网 Microprocessor 微处理器笔记

Introduction-随便聊 嵌入式系统是什么&#xff1f;专用的计算机系统。为专门功能可能对计算机架构&#xff0c;外设等做出一些取舍。 通常的限制&#xff1a;Cost&#xff08;比如大量部署传感器节点&#xff09;&#xff0c;Size and weight limits&#xff08;特定应用场景…
阅读更多...
配置Hadoop_0

配置Hadoop_0

配置Hadoop_0 1配置Hadoop100模板虚拟机1.1配置Hadoop100模板虚拟机硬件1.2配置Hadoop100模板虚拟机软件1.3配置Hadoop100模板虚拟机IP地址1.4配置Hadoop100模板虚拟机主机名称/主机名称映射1.5配置Hadoop100模板虚拟机远程操作工具 1配置Hadoop100模板虚拟机 Hadoop100 内存…
阅读更多...
TRT4-trt-integrate - 1 YOLOV5导出、编译、推理

TRT4-trt-integrate - 1 YOLOV5导出、编译、推理

模型导出 修改Image的Input动态维度 首先可以看到这个模型导出的时候Input有三个维度都是动态&#xff0c;而我们之前说过只需要一个batch维度是动态&#xff0c;所以要在export的export onnx 进行修改&#xff0c;将 torch.onnx.export(model, im, f, verboseFalse, opset_ver…
阅读更多...
华为云子网路由表作用及价值

华为云子网路由表作用及价值

子网路由表 子网路由表作用云专线、VPN的配置与子网路由表强关联&#xff0c;本质是在相应的子网路由表中添加了一条路由Nat路由表问题地址变更问题snat和dnat 子网路由表作用 子网内部作为一个二层网络&#xff0c;通过mac地址互通&#xff0c;不通过路由互通。跨子网&#x…
阅读更多...
实时网络更改检测

实时网络更改检测

未经授权的配置更改可能会对业务连续性造成严重破坏&#xff0c;这就是为什么使用实时更改检测来检测和跟踪更改是网络管理员的一项关键任务。尽管可以手动跟踪更改&#xff0c;但此方法往往非常耗时&#xff0c;并且通常会导致人为错误&#xff0c;例如在跟踪时错过关键网络设…
阅读更多...
企业需要一个数字体验平台（DXP）吗？

企业需要一个数字体验平台（DXP）吗？

数字体验平台是一个软件框架&#xff0c;通过与不同的业务系统喝解决方案集成&#xff0c;帮助企业和机构建立、管理和优化跨渠道的数字体验。帮助企业实现跨网站、电子邮件、移动应用、社交平台、电子商务站点、物联网设备、数字标牌、POS系统等传播内容&#xff0c;除了为其中…
阅读更多...
文心一言 VS 讯飞星火 VS chatgpt （58）-- 算法导论6.4 2题

文心一言 VS 讯飞星火 VS chatgpt （58）-- 算法导论6.4 2题

文心一言 VS 讯飞星火 VS chatgpt &#xff08;58&#xff09;-- 算法导论6.4 2题 二、试分析在使用下列循环不变量时&#xff0c;HEAPSORT 的正确性&#xff1a;在算法的第 2~5行 for 循环每次迭代开始时&#xff0c;子数组 A[1…i]是一个包含了数组A[1…n]中第i小元素的最大…
阅读更多...
如果微信消息显示“已读”的话......

如果微信消息显示“已读”的话......

近日&#xff0c;一则 #如果微信显示已读的话# 话题冲上了微博热搜榜单。 “已读”是很多社交软件拥有的功能&#xff0c;如果对方接收并查看了消息&#xff0c;就会在消息上显示“已读”&#xff0c;但目前微信还没有推出这项功能。 对于“已读”功能&#xff0c;不少网友纷纷…
阅读更多...
自动化用例编写思路 (使用pytest编写一个测试脚本)

自动化用例编写思路 (使用pytest编写一个测试脚本)

目录 一&#xff0c;明确测试对象 二&#xff0c;编写测试用例 构造请求数据 封装测试代码 断言设置 三&#xff0c;执行脚本获取测试结果 四&#xff0c;总结 经过之前的学习铺垫&#xff0c;我们尝试着利用pytest框架编写一条接口自动化测试用例&#xff0c;来厘清接口…
阅读更多...
【CNN记录】pytorch中BatchNorm2d

【CNN记录】pytorch中BatchNorm2d

torch.nn.BatchNorm2d(num_features, eps1e-05, momentum0.1, affineTrue, track_running_statsTrue, deviceNone, dtypeNone) 功能&#xff1a;对输入的四维数组进行批量标准化处理&#xff08;归一化&#xff09; 计算公式如下&#xff1a; 对于所有的batch中样本的同一个ch…
阅读更多...
商城-学习整理-基础-环境搭建（二）

商城-学习整理-基础-环境搭建（二）

目录 一、环境搭建1、安装linux虚拟机1&#xff09;下载&安装 VirtualBox https://www.virtualbox.org/&#xff0c;要开启 CPU 虚拟化2&#xff09;虚拟机的网络设置3&#xff09;虚拟机允许使用账号密码登录4&#xff09;VirtualBox冲突5&#xff09;修改 linux 的 yum 源…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023