Flutter 初学者之普通底部导航栏及自定义不规则底部导航栏的实现
2020 年，在这个不平凡的一年里，作为一名 Android 开发者，随着 Flutter 高热度的来临，深深体会到了 Android 市场的饱和，更何况我这种懒得要死菜狗子，只能被迫学习，于是近日学习了 Flutter，准备做一些功能性的 Flutter 项目，一方面便于学习，另一方面也便于自己后期对 Flutter 项目的开发，狗哥写的文章适合初学者及其想快速上手的同胞们学习参考，废话少说，今天我们一起来制作 APP 的底部导航栏吧！
[](
)普通底部导航栏
首先请先看效果图
废话不多说上代码
我们首先看下 main.dart 代码
void main() {
runApp(MyApp());
}
///自定义组件 StatelessWidget(无状态组件)
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Flutter 底部导航栏",
home: Scaffold(
// appBar: AppBar(
// title: Text("Flutter 底部导航栏"),
// ),
bottomNavigationBar: BottomNavigationWidget(),
),
theme: ThemeData.light(),
);
}
}
复制代码
main( )方法是 Flutter 程序的主入口 ，MaterialApp 组件一般配合 Scaffold 组件一起使用，一般主要是用来搭建 APP 的框架，比如 AppBar , BottmNavigationBar 等，这里我们主要做底部导航栏；Scaffold 组件中有自带的 bottomNavigationBar 属性就是用来设置底部导航栏的，这里我们去自定义一个组件，其实就相当于写一个类，然后在类里面去去实现底部导航栏的操作，最终赋值在?bottomNavigationBar 这个属性上，因为 Flutter 中万物皆为组件，也称为 Flutter 开发为组件式开发，这里我们自定义了?BottomNavigationWidget 组件。
以下是我们自定义的?BottomNavigationWidget 组件代码。
import 'package:flutter/material.dart';
import 'bottom_navigation/home_screen.dart';
import 'bottom_navigation/email_screen.dart';
import 'bottom_navigation/pages_screen.dart';
import 'bottom_navigation/airplay_screen.dart';
///底部导航栏制做，
class BottomNavigationWidget extends StatefulWidget {
@override
_BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
}
class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
///定义底部导航栏字体的颜色
final _BottomNavigationColor = Colors.blue;
///需要点击的 item 索引
int _currentIndex = 0;
///定义装有 4 个页面组件用到的 List ,所以范型用的 Widget
List<Widget> mList = List();
///重写 StatefulWidget 抽象类中的 initState()方法，用于初始化的操作
@override
void initState() {
///使用 List 的 ..add()方法，写法比逐个去 mList.add()要简单
mList
..add(HomeScreen())
..add(EmailScreen())
..add(PagesScreen())
..add(AirplayScreen());
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: mList[_currentIndex],
bottomNavigationB
ar: BottomNavigationBar(
///这是添加的 4 个 item
items: [ BottomNavigationBarItem(
icon: Icon(
Icons.home,
color: _BottomNavigationColor,
),
title: Text(
"home",
style: TextStyle(color: _BottomNavigationColor),
)),
BottomNavigationBarItem(
icon: Icon(
Icons.email,
color: _BottomNavigationColor,
),
title: Text(
"email",
style: TextStyle(color: _BottomNavigationColor),
)),
BottomNavigationBarItem(
icon: Icon(
Icons.pages,
color: _BottomNavigationColor,
),
title: Text(
"pages",
style: TextStyle(color: _BottomNavigationColor),
)),
BottomNavigationBarItem(
icon: Icon(
Icons.airplay,
color: _BottomNavigationColor,
),
title: Text(
"airplay",
style: TextStyle(color: _BottomNavigationColor),
))
],
///item 的索引赋值
currentIndex: _currentIndex,
///item 点击事件
onTap: (int index) {
setState(() {
///当前索引等于点击后的 item 索引
_currentIndex = index;
});
},
),
);
}
}
复制代码
因为我们需要定义的组件是可变化的，所以我们继承了 StatefulWidget 组件 ，这里简单说下 StatelessWdiget 组件和 StatefulWidget 组件的区别。
StatelessWdiget 组件：无状态的组件，复用某种组件。
StatefulWidget 组件：有状态的组件，数据处理，逻辑处理。
这里我们就把一般 App 使用的底部导航栏功能实现了，顺便还带有选中之后放大的效果。
[](
)自定义不规则底部导航栏
老规矩，先上效果图
一般我们做 APP 的都知道，很多 APP 底部导航栏采用这样的样式，如果用原生开发还是比较费劲的，但是用 Flutter 开发还是很便捷的，原理大概就是将 Flutter 中的 FloatActionButton 悬浮按钮融合到底部导航栏中去实现，上代码！
这里我们还是采用刚开始那段入口代码，只是我们的 bottomNavigationBar 属性实现的组件我们去单独定义，将这个自定义底部导航栏的功能单独写一个组件。
import 'dart:ui';
import 'package:flutter/material.dart';
import 'flutter/BottomAppBarDemo.dart';
import 'flutter/BottomNavigationWidget.dart';
import 'study/study.dart';
void main() {
runApp(MyApp());
}
///自定义组件 StatelessWidget(无状态组件)
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Flutter 底部导航栏",
home: Scaffold(
// appBar: AppBar(
// title: Text("Flutter 底部导航栏"),
// ),
///自定义的 BottomAppBarDemo 组件
bottomNavigationBar: BottomAppBarDemo(),
),
theme: ThemeData.light(),
);
还未添加个人签名 2021.10.31 加入
还未添加个人简介
评论