flutter实现appbar下选项卡切换
作者:早起的年轻人 时间:2023-06-21 13:35:24
本文实例为大家分享了flutter实现appbar下选项卡切换的具体代码,供大家参考,具体内容如下
TabBar 、Tab、TabBarView 结合实现
这里实现的是appbar下的选项卡
import 'package:flutter/material.dart';
/**
* 有状态StatefulWidget
* 继承于 StatefulWidget,通过 State 的 build 方法去构建控件
*/
class TabBarAndTopTab extends StatefulWidget {
通过构造方法传值
TabBarAndTopTab();
//主要是负责创建state
@override
_DemoStateWidgetState createState() => _DemoStateWidgetState();
}
/**
* 在 State 中,可以动态改变数据
* 在 setState 之后,改变的数据会触发 Widget 重新构建刷新
*/
class _DemoStateWidgetState extends State<TabBarAndTopTab>
with SingleTickerProviderStateMixin {
_DemoStateWidgetState();
List tabs = ["首页", "发现", "我的", "设置"];
//用于控制/监听Tab菜单切换
//TabBar和TabBarView正是通过同一个controller来实现菜单切换和滑动状态同步的。
TabController tabController;
@override
void initState() {
///初始化,这个函数在生命周期中只调用一次
super.initState();
tabController = TabController(length: tabs.length, vsync: this);
}
@override
void didChangeDependencies() {
///在initState之后调 Called when a dependency of this [State] object changes.
super.didChangeDependencies();
}
@override
Widget build(BuildContext context) {
return buildTabScaffold();
}
//通过“bottom”属性来添加一个导航栏底部tab按钮组,将要实现的效果如下:
Widget buildTabScaffold() {
return Scaffold(
appBar: AppBar(
title: Text('标题'),
//设置选项卡
bottom: buildTabBar(),
//设置标题居中
centerTitle: true,
),
//设置选项卡对应的page
body: buildBodyView(),
);
}
//当整个页面dispose时,记得把控制器也dispose掉,释放内存
@override
void dispose() {
tabController.dispose();
super.dispose();
}
buildBodyView() {
//构造 TabBarView
Widget tabBarBodyView = TabBarView(
controller: tabController,
//创建Tab页
children: tabs.map((e) {
return Container(
alignment: Alignment.center,
child: Text(e, textScaleFactor: 1),
);
}).toList(),
);
return tabBarBodyView;
}
buildTabBar() {
//构造 TabBar
Widget tabBar = TabBar(
//tabs 的长度超出屏幕宽度后,TabBar,是否可滚动
//设置为false tab 将平分宽度,为true tab 将会自适应宽度
isScrollable: false,
//设置tab文字得类型
labelStyle: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
//设置tab选中得颜色
labelColor: Colors.white,
//设置tab未选中得颜色
unselectedLabelColor: Colors.white70,
//设置自定义tab的指示器,CustomUnderlineTabIndicator
//若不需要自定义,可直接通过
//indicatorColor 设置指示器颜色
//indicatorWight 设置指示器厚度
//indicatorPadding
//indicatorSize 设置指示器大小计算方式
///指示器大小计算方式,TabBarIndicatorSize.label跟文字等宽,TabBarIndicatorSize.tab跟每个tab等宽
indicatorSize: TabBarIndicatorSize.tab,
//生成Tab菜单
controller: tabController,
//构造Tab集合
tabs: tabs.map((e) => Tab(text: e)).toList());
return tabBar;
}
}
来源:https://biglead.blog.csdn.net/article/details/94964148
标签:flutter,选项卡,切换
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
java根据模板导出PDF的详细实现过程
2022-04-07 21:48:52
![](https://img.aspxhome.com/file/2023/6/77346_0s.png)
详解Java String字符串获取每一个字符及常用方法
2022-12-14 05:15:33
![](https://img.aspxhome.com/file/2023/6/85486_0s.jpg)
Android 自定义对话框 showSetPwdDialog
2022-04-25 22:55:00
![](https://img.aspxhome.com/file/2023/1/108331_0s.png)
Android应用更新之自动检测版本及自动升级
2023-12-27 07:23:01
![](https://img.aspxhome.com/file/2023/0/138230_0s.jpg)
使用maven profile指定配置文件打包适用多环境的方法
2022-06-30 03:49:11
![](https://img.aspxhome.com/file/2023/7/64507_0s.png)
Java Swing中的工具栏(JToolBar)和分割面版(JSplitPane)组件使用案例
2021-09-07 14:45:17
![](https://img.aspxhome.com/file/2023/5/98645_0s.jpg)
使用javafx更新UI的方法
2023-05-02 17:32:30
Android嵌套RecyclerView左右滑动替代自定义view
2023-03-27 14:51:17
![](https://img.aspxhome.com/file/2023/9/89549_0s.gif)
深入浅析Java中普通代码块、构造代码块与静态代码块
2023-04-14 15:16:35
基于spring security实现登录注销功能过程解析
2023-11-29 06:09:05
![](https://img.aspxhome.com/file/2023/8/59378_0s.png)
Java基本类型与byte数组之间相互转换方法
2023-11-16 22:49:23
spring boot使用自定义的线程池执行Async任务
2023-08-15 07:41:25
解决Jenkins集成SonarQube遇到的报错问题
2023-11-24 08:54:10
![](https://img.aspxhome.com/file/2023/6/64396_0s.png)
Logback配置文件这么写,还说你不会整理日志?
2022-10-30 10:23:09
![](https://img.aspxhome.com/file/2023/7/105967_0s.png)
Android实现简单实用的垂直进度条
2023-10-22 19:10:13
![](https://img.aspxhome.com/file/2023/9/96749_0s.jpg)
Android调用手机摄像头拍照和录音功能
2022-10-22 15:37:16
SpringBoot Redis用注释实现接口限流详解
2022-03-15 17:40:55
C#支付宝扫码支付代码完整版
2021-07-19 18:48:08
Java 多线程等待优雅的实现方式之Phaser同步屏障
2023-11-29 09:47:43
![](https://img.aspxhome.com/file/2023/9/60549_0s.png)
C#引用类型和值类型的适用场合和区别
2022-10-20 03:37:25
![](https://img.aspxhome.com/file/2023/3/111183_0s.png)