程序入口

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-底部導航欄切換的更多相关文章

  1. initrd image比lvm.conf文件舊導致RHCS切換服務unmount failed,reboot

    在RHCS服務切換的時候,unmount盤的時候,發現會failed,並且直接導致reboot. 在message里看到這樣一段 [lvm] * initrd image needs to be ne ...

  2. Flutter-tabbar切換

    頂部tabbar切換 import 'package:flutter/material.dart'; import 'index_attendance_record.dart'; import 'in ...

  3. flutter 底部按钮切换页面

    界面如图: 我们就从上节里面的app.dartt修改 目录:lib lib/story 其它两个目录一样. 图片配置一下 app.dart import 'package:flutter/materi ...

  4. Flutter 底部导航栏bottomNavigationBar

    实现一个底部导航栏,包含3到4个功能标签,点击对应的导航标签可以切换到对应的页面内容,并且页面抬头显示的内容也会跟着改变. 实际上由于手机屏幕大小的限制,底部导航栏的功能标签一般在3到5个左右,如果太 ...

  5. flutter 底部bottomNavigationBar凸起效果

    概要 最近在做flutter 的时候,之前看到想实现 底部导航栏中间按钮 凸起效果, 最近想做又突然找不到方案了,因此记录下这里的实现方式. 预览效果 代码 主要使用 BottomAppBar 组建, ...

  6. NS5S1153 切換器

    昨天在研讀 NS5S1153 的 spec, 發現有一個詞 很陌生 DPDT, 原來是 double pole double throw 的縮寫,雙軸雙切, 更詳細的解釋可以看這個博客的另一篇 &qu ...

  7. 切換 java compiler 版本

    有些程式在執行時會顯示需要較新的 java jre 版本, 若系統裝有兩個 java jre 可以使用下列指令切協版本, sudo update-alternatives --config java ...

  8. 09 Flutter底部Tab切换保持页面状态的几种方法

    IndexedStack:保此所有页面的状态: AutomaticKeepAliveClientMixin:保此部分页面的状态: 修改的页面代码: 页面效果: Tabs.dart import 'pa ...

  9. Flutter 底部的renderflex溢出

    一开始直接使用Scaffold布局,body:new Column  然后模拟器会提示捕获异常: 然后百度了一下Flutter的溢出问题,发现解决办法是使用SingleChildScrollView包 ...

随机推荐

  1. 【HDOJ6685】Rikka with Coin(DP)

    题意:有10,20,30,100四种硬币,每种数量无限,给定n个a[i],问能组成所有a[i]的硬币的最小总数量 n<=1e2,a[i]<=1e9 思路: #include<bits ...

  2. Solr添加文档(XML)

    在上一章中,我们学习解释了如何向Solr中添加JSON和.CSV文件格式的数据.在本章中,将演示如何使用XML文档格式在Apache Solr索引中添加数据. 示例数据 假设我们需要使用XML文件格式 ...

  3. 学习日记10、easyui编辑器combobox绑定数据的两种方式

    1.数据本地绑定 var card = [{ "value": "正常", "text": "正常" }, { &quo ...

  4. windows下源码安装调试postgresql

    环境:windows 10 postgresql版本:postgresql-9.6.5 使用工具:vs2017社区版 辅助工具:perl.diff.flex.bison 相关工具下载地址: perl下 ...

  5. 在google chrome浏览器上安装 Vue Devtools工具

    [转]https://www.cnblogs.com/tanyongli/p/7554045.html Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的 ...

  6. Linux实用技巧--隧道

    平时开发过程中,可能会遇到一些网络问题,比如npm install 一些依赖包.本地电脑是可以,没有问题.但是测试环境服务器,由于公司内部网络安全限制,不可以随意访问外部网络.因此下载一个依赖包就变得 ...

  7. oracle blob 反序列化错误

    代码的目的是先将一个配置类JobConfig序列化存进Oracle中的Blob中,然后查的时候反序列化出来. 先看一下控制台报错 ### Cause: com.audaque.lib.core.exc ...

  8. jenkins持续集成、插件以及凭据

    Jenkins介绍 Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能. Jenkins功能包括: ...

  9. Wildfly安装以及集成idea(mac)

    文章目录 Linux发布运行 下载 集成idea Linux发布运行 首先说一下在linux环境,只需要将war包上传到wildfly-8.2.0.Final/standalone/deploymen ...

  10. 解读:nginx的一个神秘配置worker_cpu_affinity

    今天在查看nginx的相关知识的时候发现了一个nginx之前不认识的配置:worker_cpu_affinity. nginx默认是没有开启利用多核cpu的配置的.需要通过增加worker_cpu_a ...