flutter实现appbar下选项卡切换
作者:早起的年轻人 发布时间:2023-06-21 13:35:24
标签:flutter,选项卡,切换
本文实例为大家分享了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
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- 目录Java反射超详解1.反射基础1.1Class类1.2类加载2.反射的使用2.1Class对象的获取 2.2Construct
- eclipse 创建 user library 方法1、Window - Preferences - Java - Build Path -
- 本文实例分析了Android编程画图之抗锯齿解决方法。分享给大家供大家参考,具体如下:在画图的时候,图片如果旋转或缩放之后,总是会出现那些华
- 前言:JSON 是轻量级的数据交换格式,很常用,尤其是在使用 Ajax 时,在后台将数据封装为 JSON 字符串更是常见。之前在做项目的时候
- 多个条件使用Map传递参数进行批量删除1、使用场景因为项目需要针对资源文件(视频、音频、文档),编辑时候可能出现以下3种情况:实现的项目效果
- 初步计划:或许由于个人原因,排球计分系统在假期就完成了,一直未写博客,就这样一直在推就是不想写,在加上过完年就工作了,可能刚实习工作比较紧所
- 从概念上看,值类型直接存储其值,而引用类型存储对其值的引用。这两种类型存储在内存的不同地方。在C#中,我们必须在设计类型的时候就决定类型实例
- 一、背景1.1、前言当我们写好代码并测试功能符合要求时,有可能每天都要执行这个程序(比如我写了一个爬虫脚本,每天定时运行获取我想看的小说更新
- anroid 5.0 Design v7 包中引用了TabLayout 简单快速的写出属于自己的Tab切换效果 如图所示:但是正
- 对于开发游戏项目的同胞来说,Timer 这个东西肯定不会陌生,今天对以前自己经常使用的定时进行了一番小小的总结!没有写具体实现的原理,只是列
- 本文为大家分享了JSplitPane的使用方法,供大家参考,具体内容如下1、swing分割窗口控件JSplitPane,用来将窗口分割成两个
- 一本书的页码从自然数1开始顺序编码直到自然数n。书的页码按照通常的习惯编排,每个页码都不含多余的前导数字0。例如第6页用6表示而不是06或0
- 在市面上很多的APP都使用了对图片作模糊化处理后作为背景的效果,来使得整个页面更具有整体感。如下就是网易云音乐的音乐播放页面:很明显这个页面
- 本文实例分析了C#反射内存的处理。分享给大家供大家参考。具体分析如下:这段时间由于公司的项目的要求,我利用c#的反射的机制做了一个客户端框架
- 最近公司项目中有一个类似滴滴出行填写验证码的弹框,下面是我撸出来的效果: 中间的那个输入密码的6个框框其实就是用shape画的背景
- C# goto 语句用于直接在一个程序中转到程序中的标签指定的位置,标签实际上由标识符加上冒号构成。语法形式如下。goto Labell;
- 文章描述可能我标题描述不太准确,所以还是要稍微解释下:横线样式就是将TextBox以一条底横线的形式展示在页面,占位提示就是Web的Plac
- 这一篇网络爬虫的实现就要联系上大数据了。在前两篇java实现网络爬虫和heritrix实现网络爬虫的基础上,这一次是要完整的做一次数据的收集
- java中对List分段操作的实例问题:假设A系统查询出来一个很大很大的List,现在B系统想要得到这个List来导出报表,但是B系统部署环
- 常需要对list进行排序,小到List<String>,大到对自定义的类进行排序。不需要自行归并或堆排序。简单实现一个接口即可。