Flutter全局底部导航栏插件global_bottom_navigation_bar的使用
Flutter全局底部导航栏插件 global_bottom_navigation_bar 的使用
简介
global_bottom_navigation_bar 是一个用于实现全局底部导航栏的Flutter插件，类似于原生开发中的底部导航栏功能。它简单易用、可扩展且轻量级。
开始使用
如果您尝试过在您的应用中实现全局底部导航栏，但多次失败并且花费了很多时间来完成这个看似简单的任务，那么不用担心，我们为您带来了一个新的库，它易于使用、易于扩展并且集成简便。
预览
以下是插件的效果预览图和动画：
示例代码
以下是一个完整的示例demo，展示了如何使用global_bottom_navigation_bar插件：
import 'package:flutter/material.dart';
import 'package:global_bottom_navigation_bar/global_bottom_navigation_bar.dart';
// 假设这些是您的页面文件
import 'main/fifth_screen.dart';
import 'main/first_screen.dart';
import 'main/fourth_screen.dart';
import 'main/second_screen.dart';
import 'main/third_screen.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, this.title}) : super(key: key);
final String? title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
@override
Widget build(BuildContext context) {
return ScaffoldGlobalBottomNavigation(
listOfChild: [
FirstScreen(),
SecondScreen(),
ThirdScreen(),
FourthScreen(),
FifthScreen(),
],
listOfBottomNavigationItem: buildBottomNavigationItemList(),
);
}
List<BottomNavigationItem> buildBottomNavigationItemList() => [
BottomNavigationItem(
activeIcon: Icon(Icons.notifications_active, color: Colors.amber, size: 18),
inActiveIcon: Icon(Icons.notifications_none, color: Colors.grey, size: 21),
title: 'explore',
color: Colors.white,
vSync: this,
),
BottomNavigationItem(
activeIcon: Icon(Icons.perm_camera_mic, color: Colors.amber, size: 18),
inActiveIcon: Icon(Icons.perm_contact_calendar, color: Colors.grey, size: 21),
title: 'favorite',
color: Colors.white,
vSync: this,
),
BottomNavigationItem(
activeIcon: Icon(Icons.person_pin, color: Colors.amber, size: 18),
inActiveIcon: Icon(Icons.person_outline, color: Colors.grey, size: 21),
title: 'learn',
color: Colors.white,
vSync: this,
),
BottomNavigationItem(
activeIcon: Icon(Icons.star, color: Colors.amber, size: 18),
inActiveIcon: Icon(Icons.star_border, color: Colors.grey, size: 21),
title: 'notifications',
color: Colors.white,
vSync: this,
),
BottomNavigationItem(
activeIcon: Icon(Icons.voice_chat, color: Colors.amber, size: 18),
inActiveIcon: Icon(Icons.edit, color: Colors.grey, size: 21),
title: 'more',
color: Colors.white,
vSync: this,
),
];
}
确保您已经添加了global_bottom_navigation_bar依赖到您的pubspec.yaml文件中：
dependencies:
flutter:
sdk: flutter
global_bottom_navigation_bar: ^0.0.8
更多关于Flutter全局底部导航栏插件global_bottom_navigation_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter全局底部导航栏插件global_bottom_navigation_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是如何在Flutter项目中使用global_bottom_navigation_bar插件的一个示例代码案例。这个插件允许你在整个应用中实现全局底部导航栏。
首先，确保你已经在pubspec.yaml文件中添加了global_bottom_navigation_bar依赖：
dependencies:
flutter:
sdk: flutter
global_bottom_navigation_bar: ^x.y.z # 替换为最新版本号
然后，运行flutter pub get来安装依赖。
接下来，我们来看一个完整的示例，展示如何使用这个插件。
主应用入口（main.dart）
import 'package:flutter/material.dart';
import 'package:global_bottom_navigation_bar/global_bottom_navigation_bar.dart';
import 'package:your_app/screens/home_screen.dart';
import 'package:your_app/screens/search_screen.dart';
import 'package:your_app/screens/profile_screen.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GlobalBottomNavigation(
onSelect: _navigator,
items: [
GlobalBottomNavigationItem(
icon: Icon(Icons.home),
title: 'Home',
),
GlobalBottomNavigationItem(
icon: Icon(Icons.search),
title: 'Search',
),
GlobalBottomNavigationItem(
icon: Icon(Icons.person),
title: 'Profile',
),
],
defaultSelectedIndex: 0,
backgroundColor: Colors.white,
color: Colors.blue,
activeColor: Colors.blueAccent,
inactiveColor: Colors.grey,
iconSize: 24,
labelStyle: TextStyle(fontSize: 12),
);
}
void _navigator(int index) {
GlobalNavigator().navigate(
context,
index,
routes: <Widget>[
HomeScreen(),
SearchScreen(),
ProfileScreen(),
],
);
}
}
创建屏幕文件
你需要为每个导航项创建一个屏幕文件，比如home_screen.dart、search_screen.dart和profile_screen.dart。
home_screen.dart
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Screen'),
),
body: Center(
child: Text('Welcome to the Home Screen!'),
),
);
}
}
search_screen.dart
import 'package:flutter/material.dart';
class SearchScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Search Screen'),
),
body: Center(
child: Text('Welcome to the Search Screen!'),
),
);
}
}
profile_screen.dart
import 'package:flutter/material.dart';
class ProfileScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Profile Screen'),
),
body: Center(
child: Text('Welcome to the Profile Screen!'),
),
);
}
}
说明
GlobalBottomNavigation：这是global_bottom_navigation_bar插件提供的主要小部件，用于创建全局底部导航栏。onSelect：这是一个回调函数，当底部导航项被点击时调用，并传递被点击项的索引。GlobalNavigator().navigate：这是插件提供的方法，用于根据索引导航到相应的屏幕。
通过这种方式，你可以在整个Flutter应用中实现全局底部导航栏，而无需在每个屏幕上手动添加底部导航栏。
