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’ 不是内部或外部命令,也不是可运行的程序 或批处理文件。 错误方…
阅读更多...
TCP/IP网络编程 第十一章:进程间通信

TCP/IP网络编程 第十一章:进程间通信

进程间通信的基本概念 在上一章中我们讲到&#xff0c;进程自身有独立的内存空间&#xff0c;进程之间是相互独立的存在。因此在没有任何机制的支持下&#xff0c;我们可以将进程看作相互孤立的存在。 但是进程之间在某种程度上也是要“交流”的&#xff0c;下面正式介绍进程…
阅读更多...
在uni中使用vue3写h5的pdf导出

在uni中使用vue3写h5的pdf导出

先安装依赖 npm install --save html2canvas npm install jspdf --save 把dom转canvas&#xff0c;屏幕截图基于 DOM&#xff0c;因此可能不是 100% 准确到真实表示&#xff0c;因为它不会制作实际的屏幕截图&#xff0c;而是根据页面上可用的信息构建屏幕截图。 components…
阅读更多...
linux 一键安装docker docker-compose

linux 一键安装docker docker-compose

# 环境 deploy.sh docker-19.03.9.tgz docker-compose-linux-x86_64 tar -zxvf docker-19.03.9.tgz mv docker-19.03.9 docker cp docker/* /usr/bin/ touch /etc/systemd/system/docker.service cat << EOG > /etc/systemd/system/docker.service [Unit] Descripti…
阅读更多...
【技巧】Maven重复依赖分析查找

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

【技巧】Maven重复依赖分析查找 遇到奇葩的错误可以考虑是不是依赖冲突了 比如同一段代码 再这个项目中好好的 另一个项目中不能用等 idea安装插件 maven helper 打开pom文件 输入要查找的依赖 将不用的排除掉 右键排除即可
阅读更多...
“深入解析API接口：原理、用途和最佳实践“

“深入解析API接口：原理、用途和最佳实践“

API&#xff08;Application Programming Interface&#xff0c;应用程序编程接口&#xff09;是不同软件或系统之间进行交互的桥梁&#xff0c;它提供了一组定义好的规则和功能&#xff0c;使得不同的应用程序能够相互通信和交换数据。API接口的理解、应用和最佳实践对于开发者…
阅读更多...
在阿里云平台注册一个域名

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

我们访问阿里云官网 阿里云 然后 我们右上角点击登录 然后 按正常操作流程登录 登录成功后 我们点击控制台 我们将鼠标 移入 右上角 图片指向的位置 我们点击域名 进入界面后点击注册域名 在输入框中输入域名内容 然后 按回车 然后弹出的列表 我们可以选一个未注册的 点击…
阅读更多...
解决Linux打开文件数过多error:too many open files

解决Linux打开文件数过多error:too many open files

解决Linux打开文件数过多error:too many open files #查看当前的最大打开文件数 ulimit -n #默认只有1024,当负载较大的服务器时&#xff0c;很容易遇到error: too many open files。因此&#xff0c;需要将其改大。#可临时修改&#xff0c;但重启后就无效 ulimit -n 65535 #查…
阅读更多...
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;包…
阅读更多...
【Docker】docker-compose基本使用

【Docker】docker-compose基本使用

【Docker】docker-compose基本使用 文章目录 【Docker】docker-compose基本使用1. docker 项目部署弊端2. docker-compose 简介3. 实践4. 模板命令4.1 build 指令4.2 command 指令4.3 container_name 指令4.4 depends_on 指令4.5 env_file 指令4.6 environment 指令4.7 image 指…
阅读更多...
基于Redisson的Redis分布式锁

基于Redisson的Redis分布式锁

Redisson分布式锁_redissonclient_甩锅虾的博客-CSDN博客 *** 分布式锁*/ public interface DistributedLock {/*** 尝试获取锁* param lockName* param seconds* return*/Boolean tryAcquire(String lockName, long seconds, TimeUnit unit);/*** 释放锁* param lockKey*/v…
阅读更多...
如何使用自动化构造随机路由模型

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

为什么要仿真随机路由&#xff1f; 路由器测试中&#xff0c;为了最大程度还原现网路由情况&#xff0c;评估路由器在现网环境下稳定工作各项指标&#xff0c;需要对导入路由进行离散仿真&#xff0c;目前路由仿真可分为导入路由与生成路由两种方式&#xff0c;导入路由需要现…
阅读更多...
vue如何使用webscorket实现多人协同在线表格填写

vue如何使用webscorket实现多人协同在线表格填写

要使用WebSocket在Vue中实现多人协同在线表格填写&#xff0c;你可以按照以下步骤进行操作&#xff1a;1. 安装WebSocket库&#xff1a;首先&#xff0c;在Vue项目中安装WebSocket库。你可以使用 socket.io-client 库来处理WebSocket通信。使用npm或yarn安装它&#xff1a;npm …
阅读更多...
学习遇上的一点补救

学习遇上的一点补救

从开始学习java到现在逐步确定好发展路线。是时候停一下步伐了。 之前不停的往前走&#xff0c;从学校的课程、书本开始&#xff0c;没有借助网课、视频&#xff0c;依靠自己一步一个脚印。从Java实用程序、Javaweb、JavaEE然后选择MySQL数据库、然后觉得有必要对前端了解&…
阅读更多...
think-on-graph: 基于知识图谱的大模型推理

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

概述 本文的研究背景是大规模语言模型在复杂推理任务中存在困难并展示了较低的性能&#xff0c;特别是在需要知识的追溯能力、及时性和准确性的场景中。 过去的方法主要面临两个问题&#xff1a;推理不负责任容易生成虚构或带有有害文本&#xff0c;以及模型在预训练阶段无法…
阅读更多...
【深入浅出C#】章节 5: 高级面向对象编程：泛型编程和集合类型

【深入浅出C#】章节 5: 高级面向对象编程：泛型编程和集合类型

高级面向对象编程是在基础面向对象编程的基础上进一步深入和拓展的一种编程范式。它强调封装、继承和多态的概念&#xff0c;并引入了泛型编程和集合类型等高级特性。高级面向对象编程提供了更灵活、可扩展和可复用的代码结构&#xff0c;能够帮助开发者构建更复杂、更高效的应…
阅读更多...
基于IPC-CFX的点对点通信C#

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

IPC-CFX有两种主要的通信方式&#xff0c;可以通过RabbitMQ发布和订阅&#xff0c;也可以通过request和response进行点对点的通信&#xff0c;本文主要讲的是点对点的通信方式。 在vscode里建立新的dotnet项目&#xff0c;可以通过终端输入dotnet new console来建立&#xff0c…
阅读更多...
【拿来就能用】C#指定打印机打印的类

【拿来就能用】C#指定打印机打印的类

之前写过一个“C#WinForm程序中选择打印机打印”的文章&#xff0c;但在使用过程中&#xff0c;尤其是生成Word文档时&#xff0c;会感觉系统响应较慢。如果不需要留存打印文档的电子版&#xff0c;可以使用下面的类直接打印。相比之前的方法&#xff0c;这种方法更简单&#x…
阅读更多...
MySQL常用语句大全

MySQL常用语句大全

语句 DDL MySQL的DDL&#xff08;数据定义语言&#xff09;是一组用于创建、修改和删除数据库、表、索引、视图、存储过程和触发器等数据库对象的语句。下面是一些常用的MySQL DDL语句和它们的详细说明&#xff1a; alter 在MySQL中&#xff0c;DDL&#xff08;数据定义语言…
阅读更多...
最新文章

Copyright @ 2022~2023