效果:

/**
 * Flutter  BottomNavigationBar 自定义底部导航条、以及实现页面切换:
 * BottomNavigationBar是底部导航条,可以让我们定义底部Tab切换,
 * bottomNavigationBar是Scaffold组件的参数。
 *BottomNavigationBar常见的属性:
 items  List<BottomNavigationBaritem> 底部导航条按钮集合。
 iconSize icon
 currentIndex 默认选中第几个
 onTap 选中变化回调函数
 fixedColor 选中的颜色
 type  
 BottomNavigationBarType.fixed
 BottomNavigationBarType.shifting
*/
main.dart
import 'package:flutter/material.dart';
import 'pages/Tabs.dart'; void main() {
runApp(MyApp());
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Tabs(),
);
}
}

pages/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 = ;
List _pageList=[
HomePage(),
CategoryPage(),
SettingPage()
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: this._currentIndex,
onTap: (int index) {
// print(index);
setState(() {
this._currentIndex = index;
});
},
iconSize: 36.0,
type: BottomNavigationBarType.fixed,
fixedColor: Colors.red,
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')),
BottomNavigationBarItem(
icon: Icon(Icons.category), title: Text('分类')),
BottomNavigationBarItem(
icon: Icon(Icons.settings), title: Text('设置')),
]),
body: this._pageList[this._currentIndex],
);
}
}

pages/tabs/Home.dart

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
const HomePage({Key key}) : super(key: key); @override
Widget build(BuildContext context) {
return Container(
child: Text('首页'),
);
}
}

pages/tabs/Category.dart

import 'package:flutter/material.dart';

class CategoryPage extends StatelessWidget {
const CategoryPage({Key key}) : super(key: key); @override
Widget build(BuildContext context) {
return Container(
child: Text('分类')
);
}
}

pages/tabs/Setting.dart

import 'package:flutter/cupertino.dart';

class SettingPage extends StatelessWidget {
const SettingPage({Key key}) : super(key: key); @override
Widget build(BuildContext context) {
return Container(
child: Text('设置'),
);
}
}

15 Flutter BottomNavigationBar自定义底部导航条 以及实现页面切换 以及模块化的更多相关文章

  1. BottomNavigationBar 自定义 底部导航条

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

  2. tab 切换 和 BottomNavigationBar 自定义 底部导航条

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

  3. android开发(1):底部导航条的实现 | navigation tab | activity的创建

    底部导航条,在iOS中叫tabbar,在android中叫bottombar或bottom navigation,是一个常用的切换页面的导航条. 同样,如果有良好的第三方库,我们应该优先考虑,能用好别 ...

  4. Android开发关闭虚拟按钮、底部导航条

    在Android开发中,遇到了一系列大大小小的问题,其中一个就是屏蔽底部实体键,我找了很多的博客也尝试了许许多多的方法,但始终不能屏蔽 HOME键,后来看见一篇博客说在Android 4.0以后,屏蔽 ...

  5. 微信小程序-自定义底部导航

    代码地址如下:http://www.demodashi.com/demo/14258.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  6. VS 2015 开发Android底部导航条----[实例代码,多图]

      1.废话背景介绍  在Build 2016开发者大会上,微软宣布,Xamarin将被整合进所有版本的Visual Studio之中. 这也就是说,Xamarin将免费提供给所有购买了Visual ...

  7. Android 修改TabLayout底部导航条Indicator的长短

    关于Tablayout,使用的应该很频繁了,但是底部导航条长短是固定死的,需要自己来改动长短,找了半天没找着方法,看了下官方建议,可以通过映射来修改自己想要的长短,其实也就几行代码的问题,看代码: p ...

  8. OS开发(2):自定义tabbar | 导航条 | 突显中间按钮

    tabbar是放在APP底部的控件,也叫navigationbar或导航条.常见的APP都使用tabbar来进行功能分类的管理,比如微信.QQ等等. 需求是这样的,需要一个特殊一点的tabbar,要求 ...

  9. Flutter AppBar 自定义顶部导航按钮 图标、颜色 以及 TabBar 定义顶部 Tab 切换

    Flutter AppBar 自定义顶部按钮图 标.颜色 属性 描述 leading 在标题前面显示的一个控件,在首页通常显示应用 的 logo;在其他界面通常显示为返回按钮 title 标题,通常显 ...

随机推荐

  1. 自动化测试 selenium 模块 webdriver使用(一)

    一.webdriver基本使用命令 from selenium import webdriver # 导入webdriver模块 >>> chrome_obj = webdriver ...

  2. 使用C#的Flags特性

    举个例子:我有如下的一个需求,当我想要取得用户信息的时候,会先从本地缓存中查找,找不到然后从分布式缓存中查找,最后找不到再从数据库中查询.但是有些场景我又不需要查询数据库. 所以我想建立如下这种模型. ...

  3. HRNet网络结构

    最近正在阅读CVPR2019的论文Deep High-Resolution Representation Learning for Human Pose Estimation. 无奈看论文中的Netw ...

  4. 揭秘PHP深受Web开发者喜爱的原因

    我们再次回顾一下在软件开发的发展中非常有名的技术"PHP"(Hypertext Pre-Processor),它是由Rasmus Lerdorf在1995年发明的.开始阶段,PHP ...

  5. linux实操_shell判断语句

    常用判断条件: (1)两个数的比较 = 字符串的比较 -lt 小于 -le 小于等于 -eq 等于 -gt 大于 -ge 大于等于 -ne 不等于 (2)按照文件权限进行判断 -r 有读的权限 -w ...

  6. mac安装MySQLdb(mysql-python模块)

    折腾了有一会,网上资料很多,但是在实际安装时就会发现有很多坑,如下实战操作可行.供参考. Command "python setup.py egg_info" failed wit ...

  7. RHEL7-RHCE培训系列教程,让您零基础入门Linux运维

    本教程是旨在帮助那些刚入门IT行业或计划从事IT行业的初学者(包括开发人员和运维人员,以及想要在Linux系统维护上提升自己的网络管理员),0基础入门Linux运维,完整学习完成本系列课程相当于培训机 ...

  8. office+visio2016版本一同安装说明

    安装所需软件: Office或者visio镜像 比如:cn_visio_professional_2016_x86_x64_dvd_6970929.iso 下载网址:http://pan.baidu. ...

  9. Python 13--数据库

  10. 【概率论】2-3:贝叶斯定理(Bayes' Theorem)

    title: [概率论]2-3:贝叶斯定理(Bayes' Theorem) categories: Mathematic Probability keywords: Bayes' Theorem 贝叶 ...