Flutter-底部導航欄切換
程序入口
import 'package:flutter/material.dart';
import 'botton_navigation_widget.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'demo',
theme:ThemeData.light(),
home: BottomNavigationWidget()//導航Widget
);
}
}
導航widget
import 'package:flutter/material.dart';
import 'index.dart';
import 'campus_network.dart';
import 'curriculum.dart';
import 'personal_center.dart'; class BottomNavigationWidget extends StatefulWidget {
@override
_BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
} class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
final _BottomNavigationColor = Colors.blue;
//現在的索引
int _currentIndex = 0;
//widget集合
List<Widget> list = List();
//重寫初始化方法,將需要導航的widget添加到集合
@override
void initState() {
list
//..相當於list.
..add(IndexScreen())
..add(CurriculumScreen())
..add(CampusNetworkScreen())
..add(PersonalCenterScreen());
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: list[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
//超過3個不顯示名字,需要設置
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.crop_3_2,
color:_BottomNavigationColor,
),
title: Text(
'首頁'
),
),
BottomNavigationBarItem(
icon: Icon(
Icons.crop_3_2,
color:_BottomNavigationColor,
),
title: Text(
'課程'
),
),
BottomNavigationBarItem(
icon: Icon(
Icons.crop_3_2,
color:_BottomNavigationColor,
),
title: Text(
'分校網絡'
),
),
BottomNavigationBarItem(
icon: Icon(
Icons.crop_3_2,
color:_BottomNavigationColor,
),
title: Text(
'個人中心'
),
),
],
//高亮顯示
currentIndex: _currentIndex,
//點擊導航時更新現在的下標
onTap: (int index){
setState(() {
_currentIndex = index;
});
},
),
);
}
}
需要跳轉的widget
import 'package:flutter/material.dart'; class IndexScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('index'),
),
body: Center(
child: Text('index'),
),
);
}
}
Flutter-底部導航欄切換的更多相关文章
- initrd image比lvm.conf文件舊導致RHCS切換服務unmount failed,reboot
在RHCS服務切換的時候,unmount盤的時候,發現會failed,並且直接導致reboot. 在message里看到這樣一段 [lvm] * initrd image needs to be ne ...
- Flutter-tabbar切換
頂部tabbar切換 import 'package:flutter/material.dart'; import 'index_attendance_record.dart'; import 'in ...
- flutter 底部按钮切换页面
界面如图: 我们就从上节里面的app.dartt修改 目录:lib lib/story 其它两个目录一样. 图片配置一下 app.dart import 'package:flutter/materi ...
- Flutter 底部导航栏bottomNavigationBar
实现一个底部导航栏,包含3到4个功能标签,点击对应的导航标签可以切换到对应的页面内容,并且页面抬头显示的内容也会跟着改变. 实际上由于手机屏幕大小的限制,底部导航栏的功能标签一般在3到5个左右,如果太 ...
- flutter 底部bottomNavigationBar凸起效果
概要 最近在做flutter 的时候,之前看到想实现 底部导航栏中间按钮 凸起效果, 最近想做又突然找不到方案了,因此记录下这里的实现方式. 预览效果 代码 主要使用 BottomAppBar 组建, ...
- NS5S1153 切換器
昨天在研讀 NS5S1153 的 spec, 發現有一個詞 很陌生 DPDT, 原來是 double pole double throw 的縮寫,雙軸雙切, 更詳細的解釋可以看這個博客的另一篇 &qu ...
- 切換 java compiler 版本
有些程式在執行時會顯示需要較新的 java jre 版本, 若系統裝有兩個 java jre 可以使用下列指令切協版本, sudo update-alternatives --config java ...
- 09 Flutter底部Tab切换保持页面状态的几种方法
IndexedStack:保此所有页面的状态: AutomaticKeepAliveClientMixin:保此部分页面的状态: 修改的页面代码: 页面效果: Tabs.dart import 'pa ...
- Flutter 底部的renderflex溢出
一开始直接使用Scaffold布局,body:new Column 然后模拟器会提示捕获异常: 然后百度了一下Flutter的溢出问题,发现解决办法是使用SingleChildScrollView包 ...
随机推荐
- 【HDOJ6685】Rikka with Coin(DP)
题意:有10,20,30,100四种硬币,每种数量无限,给定n个a[i],问能组成所有a[i]的硬币的最小总数量 n<=1e2,a[i]<=1e9 思路: #include<bits ...
- Solr添加文档(XML)
在上一章中,我们学习解释了如何向Solr中添加JSON和.CSV文件格式的数据.在本章中,将演示如何使用XML文档格式在Apache Solr索引中添加数据. 示例数据 假设我们需要使用XML文件格式 ...
- 学习日记10、easyui编辑器combobox绑定数据的两种方式
1.数据本地绑定 var card = [{ "value": "正常", "text": "正常" }, { &quo ...
- windows下源码安装调试postgresql
环境:windows 10 postgresql版本:postgresql-9.6.5 使用工具:vs2017社区版 辅助工具:perl.diff.flex.bison 相关工具下载地址: perl下 ...
- 在google chrome浏览器上安装 Vue Devtools工具
[转]https://www.cnblogs.com/tanyongli/p/7554045.html Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的 ...
- Linux实用技巧--隧道
平时开发过程中,可能会遇到一些网络问题,比如npm install 一些依赖包.本地电脑是可以,没有问题.但是测试环境服务器,由于公司内部网络安全限制,不可以随意访问外部网络.因此下载一个依赖包就变得 ...
- oracle blob 反序列化错误
代码的目的是先将一个配置类JobConfig序列化存进Oracle中的Blob中,然后查的时候反序列化出来. 先看一下控制台报错 ### Cause: com.audaque.lib.core.exc ...
- jenkins持续集成、插件以及凭据
Jenkins介绍 Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能. Jenkins功能包括: ...
- Wildfly安装以及集成idea(mac)
文章目录 Linux发布运行 下载 集成idea Linux发布运行 首先说一下在linux环境,只需要将war包上传到wildfly-8.2.0.Final/standalone/deploymen ...
- 解读:nginx的一个神秘配置worker_cpu_affinity
今天在查看nginx的相关知识的时候发现了一个nginx之前不认识的配置:worker_cpu_affinity. nginx默认是没有开启利用多核cpu的配置的.需要通过增加worker_cpu_a ...