flutter实现appbar下选项卡切换
更新时间:2021年7月12日 00:00 点击:1679
本文实例为大家分享了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; } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
相关文章
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要介绍了基于Ionic3实现选项卡切换并重新加载echarts,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-24
- 最近项目不多忙,于是抽点时间巩固下切换窗口问题,感兴趣的朋友跟着小编一起学习吧...2020-06-25
- 这篇文章主要为大家详细介绍了Bootstrap选项卡学习笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-02-19
- 下面小编就为大家带来一篇javascript的列表切换【实现代码】。小编觉得挺不错的,现在分享给大家,也给大家做个参考。...2016-05-05
- 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title...2013-10-13
- 这篇文章主要介绍了Vue鼠标滚轮滚动切换路由效果的实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-08-04
- 这篇文章主要为大家详细介绍了Vue.js组件tabs实现选项卡切换效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-12-02
- 本文实例讲述了JS+CSS实现仿msn风格选项卡效果代码。分享给大家供大家参考,具体如下:这是一款来自MSN网站的选项卡,清新淡蓝色风格,新闻类、资讯类、文章类网站都比较适合使用,代码扩展性高,W3C标准设计,兼容IE、火狐等多种...2015-10-23
- 这篇文章主要为大家介绍了简单实现js选项卡切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-02-05
- 带上下箭头jquery垂直tab选项卡切换标签,技持左侧列表上下滚动,滚动到底部带信息提示。复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml...2015-03-15
- TAB选项卡是一个非常不错可以在同样大小的空间中放更多的内容了,现在我们看很多门户网站都有这个功能,可能大家见得最多的就是QQ弹窗了,有很多的分类可以进行切换的哦。...2017-07-06
- 这篇文章主要介绍了Pytorch如何切换 cpu和gpu的使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-01
- 这篇文章主要为大家分享了一款很棒的Bootstrap选项卡切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-07-06
- 这篇文章主要为大家详细介绍了js编写选项卡效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-27
- 这篇文章主要为大家详细介绍了jquery实现有过渡效果的tab切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-17
- 这篇文章主要介绍了javascript实现点击图片切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-04-05
- 这篇文章主要为大家详细介绍了vue实现商品详情页功能之商品选项卡,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-04-21
- 本文实例讲述了js实现索引图片切换效果的代码。分享给大家供大家参考。具体如下: 运行效果截图如下:具体代码如下html代码: <div id="slideshowHolder"> <img src="img/1.jpg" /> <img src="img/2.jpg" /> <im...2015-11-24