Flutter底部导航栏插件dot_bottom_navigation_bar的使用
Flutter底部导航栏插件dot_bottom_navigation_bar的使用
简介
dot_bottom_navigation_bar
包为 Flutter 开发者提供了一个可定制且视觉效果良好的点状底部导航栏。此包允许您轻松地将底部导航栏集成到您的 Flutter 应用程序中,并实现平滑的屏幕切换。
特性
- 可定制图标:可以轻松自定义活动和非活动状态下的图标,支持每个状态的不同图标。
- 灵活的样式:可以调整选中和未选中项目的字体大小,并设置导航栏的背景颜色。
- 无缝集成:简单地集成到 Flutter 应用程序中,兼容各种屏幕尺寸和分辨率。
- 响应式设计:自动适应屏幕尺寸,确保响应式设计。
- 直观交互:通过
onTap
回调处理响应式点击事件,捕捉用户交互。
安装
要使用 dot_bottom_navigation_bar
,请在您的 pubspec.yaml
文件中添加以下依赖项:
dependencies:
dot_bottom_navigation_bar: ^1.0.0
然后运行:
flutter pub get
接着在 Dart 代码中导入该包:
import 'package:dot_bottom_navigation_bar/dot_bottom_navigation_bar.dart';
使用方法
DotBottomNavigationBar
一个带有点状图标的可定制底部导航栏。
DotBottomNavigationBar(
currentIndex: _currentIndex,
onTap: _onItemTapped,
items: [
DotBottomNavigationBarItem(
icon: Icon(Icons.home),
activeIcon: Icon(Icons.home, color: Colors.blue),
/// activeIcon: 是一个 widget,可以根据需要轻松自定义。
),
DotBottomNavigationBarItem(
icon: Icon(Icons.search),
activeIcon: Icon(Icons.search, color: Colors.blue),
),
DotBottomNavigationBarItem(
icon: Icon(Icons.favorite),
activeIcon: Icon(Icons.favorite, color: Colors.blue),
),
DotBottomNavigationBarItem(
icon: Icon(Icons.person),
activeIcon: Icon(Icons.person, color: Colors.blue),
),
],
)
DotBottomNavigationBarItem
一个表示导航栏中项目的数据类。
DotBottomNavigationBarItem(
icon: Icon(Icons.home),
activeIcon: Icon(Icons.home, color: Colors.blue),
/// activeIcon: 是一个 widget,可以根据需要轻松自定义。
)
完整实现示例
import 'package:dot_bottom_navigation_bar/dot_bottom_navigation_bar.dart';
import 'package:example/view/favourite_view.dart';
import 'package:example/view/home_view.dart';
import 'package:example/view/setting_view.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: '点状底部导航栏',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int currentIndex = 0;
final screen = [
const HomeView(),
const FavouriteView(),
const SettingView(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: screen[currentIndex],
bottomNavigationBar: DotBottomNavigationBar(
selectedFontSize: 0.0,
unselectedFontSize: 0.0,
onTap: (int index) {
setState(() {
currentIndex = index;
});
},
items: [
DotBottomNavigationBarItem(
activeIcon: const Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(
Icons.home,
color: Colors.green,
),
CircleAvatar(
radius: 3,
backgroundColor: Colors.green,
),
],
),
icon: const Icon(
Icons.home_outlined,
color: Colors.green,
)),
DotBottomNavigationBarItem(
activeIcon: const Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(
Icons.favorite,
color: Colors.green,
),
CircleAvatar(
radius: 3,
backgroundColor: Colors.green,
),
],
),
icon: const Icon(
Icons.favorite_border,
color: Colors.green,
)),
DotBottomNavigationBarItem(
activeIcon: const Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(
Icons.settings,
color: Colors.green,
),
CircleAvatar(
radius: 3,
backgroundColor: Colors.green,
),
],
),
icon: const Icon(
Icons.settings_outlined,
color: Colors.green,
)),
],
currentIndex: currentIndex),
);
}
}
问题
如果您遇到任何问题或有改进建议,请访问 GitHub 仓库 并提交问题或拉取请求。
开发者
更多关于Flutter底部导航栏插件dot_bottom_navigation_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复