Flutter底部导航栏的实现
效果
实现
先将自动生成的main.dart里面的代码删除,并创建app.dart文件作为app的入口文件
import 'package:flutter/material.dart';
import 'package:flutter_guohe/pages/main.dart';void main() {runApp(new Guohe());
}复制代码
创建main.dart作为首页的页面文件
class Guohe extends StatefulWidget {@overrideGuoheState createState() => new GuoheState();
}class GuoheState extends State<Guohe> {@overrideWidget build(BuildContext context) {}
}
复制代码
创建today.dart、kb.dart、playground.dart三个页面文件作为tabview的填充文件,这里用playground.dart为例。
import 'package:flutter/material.dart';class Playground extends StatefulWidget {@overridePlaygroundState createState() => new PlaygroundState();
}class PlaygroundState extends State<Playground> {@overrideWidget build(BuildContext context) {return new MaterialApp(home: new Scaffold(appBar: new AppBar(title: new Text("操场"),backgroundColor: Color.fromARGB(255, 119, 136, 213), //设置appbar背景颜色centerTitle: true, //设置标题是否局中),body: new Center(child: new Text('操场'),),),);}
}
复制代码
main.dart的完整代码
/*** APP的主入口文件*/import 'package:flutter/material.dart';import 'package:flutter_guohe/pages/main/today.dart';
import 'package:flutter_guohe/pages/main/playground.dart';
import 'package:flutter_guohe/pages/main/kb.dart';
import 'package:flutter_guohe/pages/main/leftmenu.dart';import 'package:flutter_guohe/common/eventBus.dart';//果核的主界面
class Guohe extends StatefulWidget {@overrideGuoheState createState() => new GuoheState();
}class GuoheState extends State<Guohe> with SingleTickerProviderStateMixin {TabController controller;@overridevoid initState() {controller = new TabController(length: 3, vsync: this);}@overridevoid dispose() {controller.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return new MaterialApp(home: new Scaffold(drawer: new LeftMenu(),body: new TabBarView(controller: controller,children: <Widget>[new Today(),new Kb(),new Playground(),],),bottomNavigationBar: new Material(color: Colors.white,child: new TabBar(controller: controller,labelColor: Colors.deepPurpleAccent,unselectedLabelColor: Colors.black26,tabs: <Widget>[new Tab(text: "今日",icon: new Icon(Icons.brightness_5),),new Tab(text: "课表",icon: new Icon(Icons.map),),new Tab(text: "操场",icon: new Icon(Icons.directions_run),),],),),),);}
}
复制代码
其中
labelColor: Colors.deepPurpleAccent,
unselectedLabelColor: Colors.black26,
复制代码
第一个属性是控制标签颜色,这里我选了紫色,第二个属性是未选中标签时的颜色。
Flutter底部导航栏的实现相关推荐
- Flutter底部导航栏BottomNavigationBar页面状态保持解决方案
网易云[玩转大前端]配套课程 EDU配套 教程 Flutter开发的点滴积累系列文章 一行代代码置灰应用?对就是这么干 在实际应用开发中,一般应用的首页面会有这种结构,在Flutter应用开发中,有多 ...
- Flutter 底部导航栏(Tab 页)的快速实现
Flutter 底部导航栏(Tab 页)的快速实现 我们知道 Scaffold 实现了基本的 Material 布局.只要是在 Material 中定义了的单个界面显示的布局控件元素,都可以使用 Sc ...
- flutter底部导航栏
更多文章请查看 lutter从入门 到精通 实现底部导航栏并点击切换页面可简述为有三种方式 TabBar + TabBarView BottomNavigationBar + BottomNaviga ...
- Flutter底部导航栏BottomNavigationBar
BottomNavigationBar是底部的导航栏,一般应用在多个视图进行选择.类比于Android的底部导航栏,由Text文本和Icon图标组成. 这里创建一个List为显示内容提供容器: sta ...
- Flutter - 底部导航详解与案例示范
Flutter - 底部导航栏解析与示范 作者: jcLee95 邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.net/qq_28550263?spm ...
- 【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )
文章目录 一.BottomNavigationBar 底部导航栏 二.PageView 滑动页面 三.BottomNavigationBar 与 PageView 关联 四.完整代码示例 1.核心导航 ...
- 【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )
文章目录 一.Scaffold 组件 二.底部导航栏整体架构 三.BottomNavigationBar 底部导航栏 四.BottomNavigationBarItem 导航栏条目 五.PageVie ...
- 【Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )
文章目录 一.BottomNavigationBar 组件 二.BottomNavigationBarItem 组件 三.BottomNavigationBar 底部导航栏代码示例 四.BottomN ...
- flutter TabBar 底部导航栏
更多文章请查看 lutter从入门 到精通 实现底部导航栏并点击切换页面可简述为有三种方式 TabBar + TabBarView BottomNavigationBar + BottomNaviga ...
最新文章
- 手把手教你画酷炫环形图(图文详解)
- 在ChemDraw中输入千分号的方法
- 墓志铭:非常了得其实早已死了
- PHP类参数_100 个最常用的 PHP 函数
- 一步一步写算法(之排序二叉树)
- [HDFS Manual] CH1 HDFS体系结构
- 迅捷cad_迅捷协议
- 微信小程序的获取openid的坑
- 凝聚 • 融合 • 协作——记webpower2015新春年会
- 《Renewable Energy》论文格式
- 为何最简单的破坏命令通过了众多杀软
- 追梦App系列博客——需求分析报告
- VirtualBox网络配置:NAT+Host-Only实现连接外网+主机互通
- 谈谈市场上常用语音芯片方案选型,录音芯片方案选型
- TDengine与中泰证券正式签约,打造金融量化交易场景解决方案
- 获取android设备唯一编号_android获取设备唯一标识完美解决方案的思考以及实现方式...
- tx2安装包报错error: command ‘aarch64-linux-gnu-gcc‘ failed with exit status 1
- 第六章-数据库与Access
- moment 取年月日_前端使用moment.js获取当前月份1号
- oracle里的AUE是什么意思,Oracle - 事务
热门文章
- 锁死AI基础研究的两个「智子」是什么?
- 李开复预测:未来20年 AI将深刻影响五大产业
- 为ML开发、部署提供靠谱的系统工程方法,NASA、牛津、微软等多家机构提出MLTRL框架
- 我眼中真正优秀的CTO
- SAP转储单全面总结
- 深度学习几种典型架构
- 如何“快”、“准”、“狠”成为优秀算法工程师
- 从换脸到换姿势,AI 在图像处理的道路上越走越魔幻
- 深度丨全球14家顶尖 AI 产业巨头深度学习实力及战略分析
- pandas中dataframe的构造(csv等结构化文件读取,字典读取)以及保存