BottomNavigationBar 是底部导航条,可以让我们定义底部 Tab 切换,bottomNavigationBar是 Scaffold 组件的参数。

BottomNavigationBar 常见的属性

属性名

说明

items

List<BottomNavigationBarItem> 底 部 导 航 条按钮集合

iconSize

icon

currentIndex

默认选中第几个

onTap

选中变化回调函数

fixedColor

选中的颜色

type

BottomNavigationBarType.fixed BottomNavigationBarType.shifting

示例代码:

import 'package:flutter/material.dart';
void main() => runApp(MyApp()); class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home:Scaffold(
appBar: AppBar(
title: Text("Flutter Demo"),
),
body: Text("tabBar"),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("首页")
),
BottomNavigationBarItem(
icon: Icon(Icons.category),
title: Text("分类")
), BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text("设置")
)
],
),
)
);
}
}
import 'package:flutter/material.dart';
void main() => runApp(MyApp()); class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home:Tabs()
);
}
} class Tabs extends StatefulWidget {
Tabs({Key key}) : super(key: key); _TabsState createState() => _TabsState();//_xxx私有变量
} class _TabsState extends State<Tabs> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Demo"),
),
body: Text("tabBar"),
bottomNavigationBar: BottomNavigationBar( currentIndex: 1,
onTap: (int index){
print(index);
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("首页")
),
BottomNavigationBarItem(
icon: Icon(Icons.category),
title: Text("分类")
), BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text("设置")
)
],
),
);
}
}
import 'package:flutter/material.dart';
void main() => runApp(MyApp()); class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home:Tabs()
);
}
} class Tabs extends StatefulWidget {
Tabs({Key key}) : super(key: key); _TabsState createState() => _TabsState();
} class _TabsState extends State<Tabs> { int _currentIndex=0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Demo"),
),
body: Text("tabBar"),
bottomNavigationBar: BottomNavigationBar( currentIndex: this._currentIndex,
onTap: (int index){
setState(() {
this._currentIndex=index;
});
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("首页")
),
BottomNavigationBarItem(
icon: Icon(Icons.category),
title: Text("分类")
), BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text("设置")
)
],
),
);
}
}

开发中推荐(抽取分离):

import 'package:flutter/material.dart';

import 'pages/Tabs.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home:Tabs()
);
}
}

tabs.dart

import 'package:flutter/material.dart';
import 'tabs/Home.dart';
import 'tabs/Category.dart';
import 'tabs/Setting.dart'; class Tabs extends StatefulWidget {
Tabs({Key key}) : super(key: key); _TabsState createState() => _TabsState();
} class _TabsState extends State<Tabs> { int _currentIndex=0;
List _pageList=[
HomePage(),
CategoryPage(),
SettingPage(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Demo"),
),
body: this._pageList[this._currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: this._currentIndex, //配置对应的索引值选中
onTap: (int index){
setState(() { //改变状态
this._currentIndex=index;
});
},
iconSize:36.0, //icon的大小
fixedColor:Colors.red, //选中的颜色
type:BottomNavigationBarType.fixed, //配置底部tabs可以有多个按钮
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("首页")
),
BottomNavigationBarItem(
icon: Icon(Icons.category),
title: Text("分类")
), BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text("设置")
)
],
),
);
}
}

home.dart

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
HomePage({Key key}) : super(key: key); _HomePageState createState() => _HomePageState();
} class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Text("首页");
}
}

其他类似

即可实现常用的底部导航条tab切换,实现显示不同的页面内容!

Flutter BottomNavigationBar 组件的更多相关文章

  1. Flutter——BottomNavigationBar组件(底部导航栏组件)

    BottomNavigationBar常用的属性: 属性名 说明 items List<BottomNavigationBarItem> 底部导航条按钮集合 iconSize icon c ...

  2. Flutter学习笔记(16)--Scaffold脚手架、AppBar组件、BottomNavigationBar组件

    如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解 今天的内容是Scaffold脚手架.AppBar组件.BottomNavigationBa ...

  3. 15 Flutter BottomNavigationBar自定义底部导航条 以及实现页面切换 以及模块化

    效果: /**  * Flutter  BottomNavigationBar 自定义底部导航条.以及实现页面切换:  * BottomNavigationBar是底部导航条,可以让我们定义底部Tab ...

  4. Flutter 父子组件传值

    Flutter 父子组件传值 一父传子: 父中: void onButtonChange(val1,val2,val3){ print('============================子向父 ...

  5. flutter Container组件和Text组件

    在开始之前,我们先写一个最简单的入口文件:     后面,都是在这个结构的基础上面完成的. 由于Container组件和Text组件都是写在body里面的,所以下面,先将body抽离成一个组件的形式. ...

  6. Flutter InkWell - Flutter每周一组件

    Flutter Inkwell使用详解 该文章属于[Flutter每周一组件]系列,其它组件可以查看该系列下的文章,该系列会不间断更新:所有组件的demo已经上传值Github: https://gi ...

  7. Flutter ListTile - Flutter每周一组件

    该文章属于[Flutter每周一组件]系列,其它组件可以查看该系列下的文章,该系列会不间断更新:所有组件的demo已经上传值Github: https://github.com/xj124456/fl ...

  8. Flutter - BottomNavigationBar底部导航栏切换后,状态丢失。底部

    import 'package:flutter/material.dart'; import './pages/home_page.dart'; import './pages/book_page.d ...

  9. Flutter - BottomNavigationBar底部导航栏切换后,状态丢失

    如果你用过BottomNavigationBar.TabBar.还有Drawer,你就会发现,在切换页面之后,原来的页面状态就会丢失. 要是上一页有一个数据列表,很多数据,你滚动到了下头,切换页面后, ...

随机推荐

  1. 如何通过cmd获取到域名下的ip地址?例如获取百度的域名

    百度首页的IP地址为[119.75.217.109] 你可以通过电脑本机进行查询,查询步骤如下: 1.点击[开始]--->>[运行],输入[cmd]: 按键盘上的[Win键]+[R键],调 ...

  2. 大数据之路week07--day06 (Sqoop 将关系数据库(oracle、mysql、postgresql等)数据与hadoop数据进行转换的工具)

    为了方便后面的学习,在学习Hive的过程中先学习一个工具,那就是Sqoop,你会往后机会发现sqoop是我们在学习大数据框架的最简单的框架了. Sqoop是一个用来将Hadoop和关系型数据库中的数据 ...

  3. 《少年先疯队》第九次团队作业:Beta冲刺第二天

    2.1 今日完成任务情况 姚玉婷:房间管理功能测试文档的编写 马丽莎:酒店系统中商品管理功能的完善 张   琼:商品管理功能的测试 孙苗坤:商品管理功能的测试 2.2 明天任务安排 姚玉婷:酒店系统中 ...

  4. 前端学习笔记--css案例

    要实现的案例: 1.分析布局 2.划分文件结构: 3.编写css代码 * { padding: 0; margin: 0; } body { font-size: 16px; color: burly ...

  5. 在eclipse运行一个项目报端口被占的问题

    1.端口被占问题解决方法. 我们运行javaweb项目的时候,如果不幸你的项目出现了上图的那种情况,不要慌,仅仅是端口被占了而已,只需要打开你tomcat里面的bin里面的shutdown.bat即可 ...

  6. Handling skewed data---Error metrics for skewed(偏斜的) classes(precision&recall)

    skewed classes skewed classes: 一种类里面的数量远远高于(或低于)另一个类,即两个极端的情况. 预测cancer的分类模型,如果在test set上只有1%的分类误差的话 ...

  7. Oracle 数据库中的GROUP BY与HAVING

    一.GROUP BY GROUP BY语句用来与聚合函数(aggregate functions such as COUNT, SUM, AVG, MIN, or MAX.)联合使用来得到一个或多个列 ...

  8. docker的笔记

    docker run 命令 docker run ubuntu:15.10 /bin/echo "Hello world" 各个参数解析: docker: Docker 的二进制执 ...

  9. Default Trace 查找日志文件快速增长的原因

    select loginname, loginsid, spid, hostname, applicationname, servername, databasename, objectname, e ...

  10. Prometheus监控学习笔记

    K8S最佳实战(包括了K8S的Prometheus监控和EFK日志搜集) https://jimmysong.io/kubernetes-handbook/practice/ Prometheus-b ...