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 推出的全新设计语言,这种设计语言是为手机.平 ...
随机推荐
- MongoDB集群之分片技术应用 —— 学习笔记
课程链接:https://www.imooc.com/learn/501 一.什么是分片? 分片:将数据进行2拆分,将数据水平的分散到不同的服务器上. 二.为什么要分片? 架构上:读写均衡.去中心化 ...
- IE和火狐的css兼容性问题
CSS对浏览器器的兼容性具有很高的价值,通常情况下IE和Firefox存在很大的解析差异,这里介绍一下兼容要点. 1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-le ...
- git的压缩原理;git的pack文件;git gc操作原理;Resolving deltas: 100% (2695/2695), done.做了什么
文件含义 verify-pack -- validate packed git archive files .git/objects/pack/.pack为压缩后的文件,把.git/objects/下 ...
- 2.app自动化测试--adb常用API
adb常用API Driver.current_activity 获取当前运行应用界面的启动名 Driver.current_package 获取当前运行应用的包名 Driver.contexts ...
- 快速配置和切换http和https
<link href="//maze.gxrc.com/css/global.css" rel="stylesheet" type="text/ ...
- 49.Django起步学习
django起步 django安装 pip install django==2.0.4(版本号) pip install django 默认安装最新版本 创建项目 django-admin start ...
- 1024多人激情在线聊天室---select函数的使用
效果展示 step1.服务器启动!端口号3006 step2.1号客户端启动!jack加入了群聊 step3.2号客户端启动!kelly加入了群聊 step4.3号客户端启动!zwj加入了群聊 ste ...
- (二)javaweb开发的常见概念总结(来自那些年的笔记)
目录 WEB开发相关知识 WEB服务器 Tomcat服务器 WEB应用程序 配置WEB应用 配置缺省的WEB应用 Web设置首页 web.xml文件 配置虚拟主机 配置https连接器 为我们的网站, ...
- 跳转语句 break;continue; return; goto 区别用法
C语言是按顺序执行语句的语言——一个接一个.即使它有条件语句或循环语句,程序的流程也是自上而下的.没有顺序流的随机跳转或跳转.但我们的程序是为了满足任何现实世界的需求,一个接一个地执行永远不会很直接. ...
- Python开发【模块】:paramiko
一.堡垒机前戏 开发堡垒机之前,先来学习Python的paramiko模块,该模块基于SSH用于连接远程服务器并执行相关操作 模块安装 C:\Program Files\Python 3.5\Scri ...