底部导航栏目前在手机应用中非常常见,可见其对于软件设计来说非常的有必要和重要。下面简单总结使用flutter和dart如何实现底部导航栏的制作。

首先值得注意的是底部导航栏为动态的组件,所以继承的话应该是StatefulWidget类,而不是平常的StatelessWidget。

为了方便测试编写两个简单的页面,分别为home页和person页,页面的代码如下:

home.dart:

1
2
3
4
5
6
7
8
9
10
11
import 'package:flutter/material.dart';

class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: new Center(
child: new Text("首页"),
));
}
}

person.dart:

1
2
3
4
5
6
7
8
9
10
11
import 'package:flutter/material.dart';

class Person extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: new Center(
child: new Text("个人页"),
));
}
}

下面开始编写底部导航的代码:

除了继承动态组件之外,还要定义好图标以及相关导航文字,使用list数据结构实现,所有的页面都是类,所以定义类数组来初始化之前完成的home页和person页,特别需要注意的是bottomNavigationBar的类型,即type要为fixed。然后定义相关点击事件,body即为页面数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
class ListAppBar extends StatefulWidget {
@override
_ListState createState() => _ListState();
}

class _ListState extends State<ListAppBar> {
// 定义图标文字,不变
final List<BottomNavigationBarItem> bottomTabs = [
BottomNavigationBarItem(icon: Icon(CupertinoIcons.home), title: Text("首页")),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.person), title: Text("个人")),
];

//把页面类拿过来
final List tabPage = [
Home(),
Person(),
];

int index = 0;
var page;

//初始化
@override
void initState() {
// TODO: implement initState
page = tabPage[index];
super.initState();
}

@override
Widget build(BuildContext context) {
return new Scaffold(
bottomNavigationBar: new BottomNavigationBar(
type: BottomNavigationBarType.fixed,
iconSize: 22,
selectedFontSize: 12,
currentIndex: index,
items: bottomTabs,
onTap: (i) {
setState(() {
index = i;
page = tabPage[i];
});
},
),
body: page,
);
}
}

完成后的截图如下:

个人页

个人页

首页

首页

相关文章
评论
分享
  • dart中HTTP请求的处理

    dio是一个强大的Dart Http请求库,支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时、自定义适配器等… ,最重要的是国人开发,牛皮。 (1)添加dio库 找到项目中的pu...

    dart中HTTP请求的处理
  • Dart学习

    由于Flutter编写语言为Dart,所以想要学好Flutter就要先学好Dart的使用。 Dart语言的入口方法是main方法。即所有要被执行的代码都需要放在main方法中。 每条语句后面加分号代表语句结束。 123main()&#...

    Dart学习
  • Flutter初识

    Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。...

    Flutter初识
  • Windows下neo4j的安装

    neo4j是一个高性能的NOSQL图形数据库,他将结构化数据存储在网络上而不是表中。他是一个嵌入式的、基于磁盘的、具备完全的事物特性的Java持久化引擎,neo4j也可看做是一个高性能的图引擎,该引擎具有成熟数据库的所有特性。——百度...

    Windows下neo4j的安装
  • java实现类FTP程序

    继承程序设计实验,实验说明如图所示: 集成程序设计实验 TCP实现首先说明下基于TCP实现的功能: (1)能够实现多用户的同时连接 (2)用户执行成功的命令会在其他用户终端上显式说明 (3)当前用户数以及在线情况会在服务端实时显...

    java实现类FTP程序
  • Java中的流

    流是个抽象的概念,是对输入输出设备的抽象,Java程序中,对于数据的输入输出都是以流的方式进行。设备可以是文件、网络、内存等。 I/O字节流InputStream字节输入流OutputStream字节输出流用于以字节的形式读取和写入数...

    Java中的流
  • eclipse使用

    Eclipse是一个开放源代码的、基于Java的可拓展开发平台。 常用快捷键 快捷键 作用 alt+/ 代码快速补全 ctrl+1 快速修复 ctrl+shift+f 代码格式化 ctrl+d 删除一行代码 ...

    eclipse使用
  • Python网络编程

    网络编程从大的方面说就是对信息的发送到接收,中间传输为物理线路的作用。 它的含义是使用套接字来达到进程间的通信。套接字可以看成是两个网络应用程序进行通信时,各自通信连接中的一个端点。 套接字Socket=(IP地址:端口号) 端口号是...

    Python网络编程
  • Centos安装

    虚拟机下载及安装1.进入VMware官网,转到下载页面 https://my.vmware.com/cn/web/vmware/info/slug/desktop_end_user_computing/vmware_workstati...

    Centos安装
  • JavaEE开发准备

    个人电脑硬件配置: Windows 10 64位家庭中文版 8G运行内存 Intel(R) Core(TM) i5-7300HQ CPU @ 2.50GHz 1.Java JDK安装及配置(1)下载和安装首先进入oracle网站中Ja...

    JavaEE开发准备
Please check the comment setting in config.yml of hexo-theme-Annie!