flutter 底部导航栏 BottomNavigationBar
话不多说,上代码
import 'package:flutter/material.dart';
import 'package:flutter_zhihu/pages/tabs/homeTab.dart'; class TabsController extends StatefulWidget {
@override
_TabsControllerState createState() => _TabsControllerState();
} class _TabsControllerState extends State<TabsController> { int _currentIndex = 0;
final pages = [HomeTab(),HomeTab(),HomeTab(),HomeTab(),HomeTab()];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('标题'),
actions: [
IconButton(icon: Icon(Icons.search), onPressed: (){
print('惦记了搜索');
})
],
),
bottomNavigationBar: BottomNavigationBar(
items: bottomNavItems,//配置底部菜单
currentIndex: _currentIndex,//当前菜单在第几个
onTap: (index){
//菜单切换事件
_changePage(index);
},
type: BottomNavigationBarType.fixed,//菜单切换效果
),
body: pages[_currentIndex],//菜单页面切换
);
}
//定义底部菜单
final List<BottomNavigationBarItem> bottomNavItems = [
BottomNavigationBarItem(
backgroundColor: Colors.blue,
icon: Icon(Icons.home),
label: '首页',
),
BottomNavigationBarItem(
backgroundColor: Colors.green,
icon: Icon(Icons.message),
label: '视频',
),
BottomNavigationBarItem(
backgroundColor: Colors.amber,
icon: Icon(Icons.shopping_cart),
label: '会员',
),
BottomNavigationBarItem(
backgroundColor: Colors.red,
icon: Icon(Icons.person),
label: '消息',
),
BottomNavigationBarItem(
backgroundColor: Colors.red,
icon: Icon(Icons.person),
label: '我的',
),
]; /*切换页面*/
void _changePage(int index) {
/*如果点击的导航项不是当前项 切换 */
if (index != _currentIndex) {
setState(() {
_currentIndex = index;
});
}
}
}
flutter 底部导航栏 BottomNavigationBar的更多相关文章
- Flutter 底部导航栏bottomNavigationBar
实现一个底部导航栏,包含3到4个功能标签,点击对应的导航标签可以切换到对应的页面内容,并且页面抬头显示的内容也会跟着改变. 实际上由于手机屏幕大小的限制,底部导航栏的功能标签一般在3到5个左右,如果太 ...
- Android------底部导航栏BottomNavigationBar
Android 的底部导航栏 BottomNavigationBar 由Google官方Material design中增加的. Android底部导航栏的实现方式特别多,例如TabHost,TabL ...
- Flutter - BottomNavigationBar底部导航栏切换后,状态丢失
如果你用过BottomNavigationBar.TabBar.还有Drawer,你就会发现,在切换页面之后,原来的页面状态就会丢失. 要是上一页有一个数据列表,很多数据,你滚动到了下头,切换页面后, ...
- Flutter——BottomNavigationBar组件(底部导航栏组件)
BottomNavigationBar常用的属性: 属性名 说明 items List<BottomNavigationBarItem> 底部导航条按钮集合 iconSize icon c ...
- 【Flutter学习】基本组件之BottomNavigationBar底部导航栏
一,概述 BottomNavigationBar即是底部导航栏控件,显示在页面底部的设计控件,用于在试图切换,底部导航栏包含多个标签.图标或者两者搭配的形式,简而言之提供了顶级视图之间的快速导航. 二 ...
- Flutter - 创建底部导航栏
之前写过的一篇文章介绍了 Flutter - 创建横跨所有页面的侧滑菜单, 这次就一起来学习一下底部导航栏. 底部导航栏在ios平台上非常常见,app store就是这样的风格.还有就是大家最常用的微 ...
- Flutter移动电商实战 --(4)打通底部导航栏
关于界面切换以及底栏的实现可参考之前写的一篇文章:Flutter实 ViewPager.bottomNavigationBar界面切换 1.新建4个基本dart文件 在pages目录下,我们新建下面四 ...
- Flutter移动电商实战 --(3)底部导航栏制作
1.cupertino_IOS风格介绍 在Flutter里是有两种内置风格的: material风格: Material Design 是由 Google 推出的全新设计语言,这种设计语言是为手机.平 ...
- 底部导航栏使用BottomNavigationBar
1.github地址 https://github.com/zhouxu88/BottomNavigationBar 2.基本使用 2,1添加依赖 implementation 'com.ashokv ...
- Flutter实战视频-移动电商-03.底部导航栏制作
03.底部导航栏制作 material是谷歌退出的 还有另外的一种:cupertino是IOS的风格 我们底部的导航栏,静态的widget是不合适的,这垃圾我们用到动态的widget 这重新改成动态的 ...
随机推荐
- CCF 201909-1 小明种苹果
#include <iostream> #include <bits/stdc++.h> #include <string> using namespace std ...
- KingbaseES V8R6集群运维案例之---repmgr standby promote应用案例
案例说明: 在容灾环境中,跨区域部署的异地备节点不会自主提升为主节点,在主节点发生故障或者人为需要切换时需要手动执行切换操作.若主节点已经失效,希望将异地备机提升为主节点. $bin/repmgr s ...
- Jmeter学习:字符串,加密相关函数,groovy脚本函数
一.__digest 功能介绍: 将输入进行 MD5 加密 ${__MD5(参数 1,参数 2)} 参数 1:加密算法,必选,MD2 MD5 SHA-1 SHA-224 SHA-256 SHA-384 ...
- 转载-Shell脚本中字符串截取功能
在Shell脚本编写中,有几个地方都是要用到字符串截取的功能,那将这块的内容进行下记录: 1.字符串变量的截取操作 对字符串变量的截取操作一般都是通过${操作符}的方式进行 1)从指定位置index截 ...
- Educational Codeforces Round 112 (Rated for Div
Educational Codeforces Round 112 (Rated for Div. 2) CodeForces - 1555D Say No to Palindromes 如果一个字符串 ...
- Influxdb客户端使用
Influxdb客户端使用 1. 简介 Influxdb在网络上可以搜索到一个叫InfluxdbStudio的工具,但只能在window下使用,有时在其他系统下做简单数据查询时就比较麻烦,下面以Inf ...
- MySQL 的limit
题目 limit:从倒数第二行开始,往前查找一行
- celery学习
1.清空队列:celery -A 项目名称 purge 2.原理参考 https://www.cnblogs.com/sui776265233/p/10004679.html 消息中间件(messa ...
- SDIO接口WIFI&BT之相关常备知识
SDIO接口WIFI&BT之相关常备知识 <VBAT>:>Main Power Voltage Soure Input 主电源输入(SDIO WIFI目前知道的都是 ...
- RepVGG:一个结构重参数化网络
本文来自公众号"AI大道理" ResNet.DenseNet 等复杂的多分支网络可以增强模型的表征能力,使得训练效果更好.但是多分支的结构在推理的时候效率严重不足. 看起来二 ...