话不多说,上代码

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的更多相关文章

  1. Flutter 底部导航栏bottomNavigationBar

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

  2. Android------底部导航栏BottomNavigationBar

    Android 的底部导航栏 BottomNavigationBar 由Google官方Material design中增加的. Android底部导航栏的实现方式特别多,例如TabHost,TabL ...

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

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

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

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

  5. 【Flutter学习】基本组件之BottomNavigationBar底部导航栏

    一,概述 BottomNavigationBar即是底部导航栏控件,显示在页面底部的设计控件,用于在试图切换,底部导航栏包含多个标签.图标或者两者搭配的形式,简而言之提供了顶级视图之间的快速导航. 二 ...

  6. Flutter - 创建底部导航栏

    之前写过的一篇文章介绍了 Flutter - 创建横跨所有页面的侧滑菜单, 这次就一起来学习一下底部导航栏. 底部导航栏在ios平台上非常常见,app store就是这样的风格.还有就是大家最常用的微 ...

  7. Flutter移动电商实战 --(4)打通底部导航栏

    关于界面切换以及底栏的实现可参考之前写的一篇文章:Flutter实 ViewPager.bottomNavigationBar界面切换 1.新建4个基本dart文件 在pages目录下,我们新建下面四 ...

  8. Flutter移动电商实战 --(3)底部导航栏制作

    1.cupertino_IOS风格介绍 在Flutter里是有两种内置风格的: material风格: Material Design 是由 Google 推出的全新设计语言,这种设计语言是为手机.平 ...

  9. 底部导航栏使用BottomNavigationBar

    1.github地址 https://github.com/zhouxu88/BottomNavigationBar 2.基本使用 2,1添加依赖 implementation 'com.ashokv ...

  10. Flutter实战视频-移动电商-03.底部导航栏制作

    03.底部导航栏制作 material是谷歌退出的 还有另外的一种:cupertino是IOS的风格 我们底部的导航栏,静态的widget是不合适的,这垃圾我们用到动态的widget 这重新改成动态的 ...

随机推荐

  1. 【python/pyside2】向QVBoxLayout添加滚动条

    import sys from PySide2.QtWidgets import * from PySide2.QtGui import QFont from PySide2 import QtCor ...

  2. java常用开发学习网站列表

    持续更新中 kettle国内镜像下载 版本 地址 7.1版本 http://mirror.bit.edu.cn/pentaho/Data%20Integration/ 8.2版本 http://mir ...

  3. 视频直播源码,js实现节流和防抖

    视频直播源码,js实现节流和防抖 防抖: 就是指连续触发事件但是在设定的一段时间内中只执行最后后一次,例如:设定1000毫秒执行,当你触发事件了,他会1000毫秒后执行,但是在还剩500毫秒的时候你又 ...

  4. postgresql源码解读

    大量模块源码解读 https://blog.csdn.net/cuichao1900?type=blog 存储管理(内存管理.外存管理)源码解读,每行都有注释 https://blog.csdn.ne ...

  5. CIL指令和指针类型的操作

    对象引用的使用在CIL中受到严格限制.它们几乎完全被使用带有VOS(Virtual Object System)指令,这些指令是专门为处理对象和部分对象引用而设计的. 常规操作如下: 首先我们需要将加 ...

  6. 【文献阅读】Automatic berthing for an underactuated unmanned surface vehicle: A real-time motion planning approach

    (1)文章工作 This paper presents Extended Dynamic Window Approach (EDWA) for the automatic berthing of an ...

  7. logstash输出到MySQL

    1.安装插件/bin/logstash-plugin install logstash-output-jdbc 2.下载jdbc  https://mvnrepository.com/artifact ...

  8. [MicroPython ESP32] 内存分析

    [MicroPython ESP32] 内存分析 [(1)芯片:ESP32-WROOM-DA] 手册: https://www.espressif.com.cn/zh-hans/support/doc ...

  9. 10 个常用的 JS 工具库,80% 的项目都在用!

    Day.js 一个极简的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持一样, 但体积仅有2KB. npm install dayjs 基本用法 import ...

  10. 如何在 Visual Studio 中自定义 Docker 容器 和 使用 Docker Compose 为 Visual Studio 创建多容器应用

    https://learn.microsoft.com/zh-cn/visualstudio/containers/container-build?WT.mc_id=visualstudio_cont ...