Flutter——BottomNavigationBar组件(底部导航栏组件)
BottomNavigationBar常用的属性:
属性名 | 说明 |
items |
List<BottomNavigationBarItem> 底部导航条按钮集合
|
iconSize | icon |
currentIndex
|
默认选中第几个
|
onTap
|
选中变化回调函数
|
fixedColor
|
选中的颜色
|
type
|
BottomNavigationBarType.fixed
BottomNavigationBarType.shifting
|
import 'package:flutter/material.dart'; void main() {
runApp(MaterialApp(
title: "BottomNavigationBarWidget",
home: MyApp(),
));
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("底部导航栏")),
body: Tabs(),
);
}
} class Tabs extends StatefulWidget {
@override
_TabsState createState() => _TabsState();
} class _TabsState extends State<Tabs> {
int _currentIndex = 0;
List _pageList = [Page("首页页面"), Page("分类页面"), Page("设置页面")]; @override
Widget build(BuildContext context) {
return Scaffold(
body:_pageList[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
type: BottomNavigationBarType.fixed,
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("分类")
),
],
),
);
}
} class Page extends StatelessWidget {
String text; Page(this.text); @override
Widget build(BuildContext context) {
return Center(
child: Text(text),
);
}
}
Flutter——BottomNavigationBar组件(底部导航栏组件)的更多相关文章
- 微信小程序自定义底部导航栏组件+跳转
微信小程序本来封装有底部导航栏,但对于想自定义样式和方法的开发者来说,这并不是很好. 参考链接:https://github.com/ljybill/miniprogram-utils/tree/ma ...
- Vue 如何实现一个底部导航栏组件
参考网址: https://www.jianshu.com/p/088936b7b1bd/ Vue 如何实现一个底部导航栏组件 可以看到父组件是知道我点击了底部TabBar的哪个item的. 实现 实 ...
- 15 Flutter BottomNavigationBar自定义底部导航条 以及实现页面切换 以及模块化
效果: /** * Flutter BottomNavigationBar 自定义底部导航条.以及实现页面切换: * BottomNavigationBar是底部导航条,可以让我们定义底部Tab ...
- flutter 主页面底部导航栏实现以及主题风格设置
import 'package:flutter/material.dart'; import 'package:flutter_app/bottom_navigation_widget.dart'; ...
- 【Flutter学习】基本组件之BottomNavigationBar底部导航栏
一,概述 BottomNavigationBar即是底部导航栏控件,显示在页面底部的设计控件,用于在试图切换,底部导航栏包含多个标签.图标或者两者搭配的形式,简而言之提供了顶级视图之间的快速导航. 二 ...
- Flutter - BottomNavigationBar底部导航栏切换后,状态丢失
如果你用过BottomNavigationBar.TabBar.还有Drawer,你就会发现,在切换页面之后,原来的页面状态就会丢失. 要是上一页有一个数据列表,很多数据,你滚动到了下头,切换页面后, ...
- Flutter 底部导航栏bottomNavigationBar
实现一个底部导航栏,包含3到4个功能标签,点击对应的导航标签可以切换到对应的页面内容,并且页面抬头显示的内容也会跟着改变. 实际上由于手机屏幕大小的限制,底部导航栏的功能标签一般在3到5个左右,如果太 ...
- Flutter移动电商实战 --(4)打通底部导航栏
关于界面切换以及底栏的实现可参考之前写的一篇文章:Flutter实 ViewPager.bottomNavigationBar界面切换 1.新建4个基本dart文件 在pages目录下,我们新建下面四 ...
- Flutter移动电商实战 --(3)底部导航栏制作
1.cupertino_IOS风格介绍 在Flutter里是有两种内置风格的: material风格: Material Design 是由 Google 推出的全新设计语言,这种设计语言是为手机.平 ...
随机推荐
- linux常用的命令和工具
screen 管理会话工具 与之相似的工具还有tmux # screen // 进入一个回话 .还可以给会话取名 screen -S modify_screen #vim screen.txt ...
- JavaScript this指向问题
this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定,this最终指向调用它的对象. 1.函数调用模式: 当一个函数并非一个对象的属性时,那么它就是被当做函数来调用的.在此种模式下, ...
- 慕课零基础学java语言翁恺老师——第二周编程题
1.时间换算(5分) 题目内容: UTC是世界协调时,BJT是北京时间,UTC时间相当于BJT减去8.现在,你的程序要读入一个整数,表示BJT的时和分.整数的个位和十位表示分,百位和千位表示小时.如果 ...
- C#使用KingAOP实现AOP面向切面编程一
AOP面向切面编程(Aspect Oriented Programming),是通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术. 实现AOP主要由两种方式,一种是编译时静态植入,优点是 ...
- IO-file-07 递归
package com.bwie.io; /** * 递归: * 方法自己调用自己 * 递归头:何时结束递归 * 递归体:重复调用 * @author Allen17805272076 * */ pu ...
- vue 强制刷新组件重新渲染
实现功能:使用富文本编辑器编写文章,然后把编写成功的文章用子组件显示. 问题描述:父组件给子组件传递数据,子组件第一次调用数据的时候页面渲染是正常的,当数据变化的时候,子组件的页面渲染就失效了. 问题 ...
- K8S踩坑篇-master节点作为node节点加入集群
前面我们二进制部署K8S集群时,三台master节点仅仅作为集群管理节点,所以master节点上中并未部署docker.kubelet.kube-proxy等服务.后来我在部署mertics-serv ...
- java源码 -- AbstractCollection抽象类
简介 AbstractCollection是一个抽象类,它实现了Collection中除了iterator()和size()之外的所有方法.AbstractCollection的主要作用是方便其他类 ...
- java基础--Java虚拟机
·JVM (Java Virtual Machine ):Java虚拟机,简称JVM,是运行所有Java程序的假想计算机,是Java程序的运行环境,是Java 最具吸引力的特性之一.我们编写的Java ...
- (五)Respose 知识点总结 (来自那些年的笔记)
目录 HttpServletResponse简介 向客户机写数据 HttpServletResponse应用 打印中文,让浏览器显示不乱码 : 下载文件 输出随机图片(验证码) 不要缓存 图片的src ...