Flutter底部导航与浮动操作菜单插件fab_menu_bottomnav的使用
Flutter底部导航与浮动操作菜单插件fab_menu_bottomnav的使用
本Flutter应用程序展示了带有中心浮动操作按钮（FAB）的可自定义底部导航栏，该按钮包含一个弹出菜单。它提供了在四个不同屏幕之间的导航。
主要功能：
- 可定制设计：可以自定义导航栏和FAB的颜色、图标和大小。
- 居中FAB：包含一个可自定义选项的弹出菜单。
- 底部导航：使用图标和标签提供四个导航项。
- 屏幕导航：在四个预定义的屏幕之间进行导航（您可以替换为自己的屏幕）。
- 小部件：
- NaviBar：管理整个导航栏及其组件。
- BottomNav：表示底部导航栏中的各个项目。
- FabCont：表示FAB的弹出菜单中的各个选项。
代码示例视频：
探索NaviBar小部件属性以调整：
- 颜色：
fabColor、navBarColor、navIconColor和FabCont.color（可选）。 - 图标：
navIcon1、navIcon2、navIcon3和navIcon4用于底部导航，FabCont.icon用于菜单选项。 - 大小：
navIconSize用于底部导航图标。 - 标签：
nav1Name、nav2Name、nav3Name和nav4Name用于底部导航项。
完整示例代码：
import 'package:fab_menu_bottomnav/fab_menu_bottomnav.dart';
import 'package:flutter/material.dart';
// 导入不同的页面视图
import 'samplePages/helpView.dart';
import 'samplePages/homeview.dart';
import 'samplePages/profileView.dart';
import 'samplePages/searchview.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
[@override](/user/override)
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
[@override](/user/override)
Widget build(BuildContext context) {
return const NaviBar(
fabColor: Colors.blue, // 设置FAB背景色
navBarColor: Colors.white, // 设置导航栏背景色
fabIconColor: Colors.white, // 设置FAB内图标的颜色
fabItems: [ // 设置FAB内部的选项
FabCont(
icon: Icons.place, // 图标
text: 'plane', // 文本
color: Colors.red, // 颜色
),
FabCont(
icon: Icons.javascript,
text: 'plane',
color: Colors.blue,
),
FabCont(
icon: Icons.air,
text: 'plane',
color: Colors.purple,
),
],
navIconSize: 24, // 设置底部导航图标大小
navIcon1: Icons.home, // 设置底部导航图标1
navIcon2: Icons.branding_watermark, // 设置底部导航图标2
navIcon3: Icons.padding, // 设置底部导航图标3
navIcon4: Icons.search, // 设置底部导航图标4
navIconColor: Colors.black, // 设置底部导航图标颜色
nav1Name: 'home', // 设置底部导航项1的名称
nav2Name: 'search', // 设置底部导航项2的名称
nav3Name: 'help', // 设置底部导航项3的名称
nav4Name: 'profile', // 设置底部导航项4的名称
routeList: [ // 设置导航到的不同页面
Home(),
Search(),
Help(),
Profile(),
],
);
}
}
更多关于Flutter底部导航与浮动操作菜单插件fab_menu_bottomnav的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
