Flutter底部导航栏插件dot_navigation_bar的使用
Flutter底部导航栏插件dot_navigation_bar的使用
Dot Navigation Bar
dot_navigation_bar
是一个高度可定制的底部导航栏插件,提供了简单平滑的动画效果,为应用提供良好的UI/UX体验。
Getting Started
安装
在 pubspec.yaml
文件中添加依赖:
dependencies:
dot_navigation_bar: ^latest_version # 替换为最新版本号
然后在 Dart 文件中导入:
import 'package:dot_navigation_bar/dot_navigation_bar.dart';
使用方法
基本实现
下面是一个简单的示例,演示了如何创建一个带有四个选项卡(Home、Likes、Search 和 Profile)的底部导航栏:
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> with TickerProviderStateMixin {
var _selectedTab = _SelectedTab.home;
void _handleIndexChanged(int i) {
setState(() {
_selectedTab = _SelectedTab.values[i];
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
extendBody: true, // 如果你想要body显示在navbar后面,这个值应该为true
body: Container(
child: Image.asset("lib/img/1.png"), // 这里可以替换成你自己的内容
),
bottomNavigationBar: Padding(
padding: EdgeInsets.only(bottom: 10),
child: DotNavigationBar(
margin: EdgeInsets.only(left: 10, right: 10),
currentIndex: _SelectedTab.values.indexOf(_selectedTab),
dotIndicatorColor: Colors.white,
unselectedItemColor: Colors.grey[300],
splashBorderRadius: 50,
onTap: _handleIndexChanged,
items: [
/// Home
DotNavigationBarItem(
icon: Icon(Icons.home),
selectedColor: Color(0xff73544C),
),
/// Likes
DotNavigationBarItem(
icon: Icon(Icons.favorite),
selectedColor: Color(0xff73544C),
),
/// Search
DotNavigationBarItem(
icon: Icon(Icons.search),
selectedColor: Color(0xff73544C),
),
/// Profile
DotNavigationBarItem(
icon: Icon(Icons.person),
selectedColor: Color(0xff73544C),
),
],
),
),
);
}
}
enum _SelectedTab { home, favorite, search, person }
构造函数属性
DotNavigationBar
的构造函数有18个与组件相关的属性:
属性 | 描述 |
---|---|
items | 要显示的标签列表 |
currentIndex | 当前选中的索引 |
onTap | 点击事件回调 |
selectedItemColor | 选中时的颜色 |
unselectedItemColor | 未选中时的颜色 |
margin | 组件外边距 |
itemPadding | 每个项目的内边距 |
duration | 动画持续时间 |
curve | 动画曲线 |
dotIndicatorColor | 圆点指示器颜色 |
marginR | 设置圆角的外边距 |
paddingR | 设置圆角的内边距 |
borderRadius | 导航栏的圆角大小 |
backgroundColor | 导航栏背景色 |
boxShadow | 浮动导航栏阴影 |
enableFloatingNavBar | 是否启用浮动导航栏 |
enablePaddingAnimation | 是否启用项目切换时的动画 |
splashColor | 点击时的水波纹颜色 |
默认值
- marginR = const EdgeInsets.symmetric(horizontal: 50, vertical: 20)
- paddingR = const EdgeInsets.only(bottom: 5, top: 10)
- borderRadius = 30
- backgroundColor = Colors.white
- enableFloatingNavBar=true
- enablePaddingAnimation=true
示例项目
更多例子可以在 example/lib/main.dart 中找到。你可以参考此文件来深入了解如何使用 dot_navigation_bar
插件。
更多关于Flutter底部导航栏插件dot_navigation_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter底部导航栏插件dot_navigation_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,下面是一个关于如何在Flutter中使用dot_navigation_bar
插件实现底部导航栏的示例代码。这个插件允许你创建一个简洁的、具有点样式的底部导航栏。
首先,确保你的pubspec.yaml
文件中已经添加了dot_navigation_bar
依赖:
dependencies:
flutter:
sdk: flutter
dot_navigation_bar: ^2.0.0 # 请检查最新版本号
然后运行flutter pub get
来安装依赖。
接下来,你可以在你的Flutter项目中实现底部导航栏。以下是一个完整的示例代码:
import 'package:flutter/material.dart';
import 'package:dot_navigation_bar/dot_navigation_bar.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Dot Navigation Bar Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _selectedIndex = 0;
final List<Widget> _widgetOptions = <Widget>[
Text('Home'),
Text('Search'),
Text('Profile'),
Text('Settings'),
];
void _onItemSelected(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Dot Navigation Bar Demo'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: DotNavigationBar(
controllers: [
DotController(
activeColor: Colors.blue,
inactiveColor: Colors.grey,
activeSize: 22.0,
inactiveSize: 16.0,
),
DotController(
activeColor: Colors.green,
inactiveColor: Colors.grey,
activeSize: 22.0,
inactiveSize: 16.0,
),
DotController(
activeColor: Colors.red,
inactiveColor: Colors.grey,
activeSize: 22.0,
inactiveSize: 16.0,
),
DotController(
activeColor: Colors.purple,
inactiveColor: Colors.grey,
activeSize: 22.0,
inactiveSize: 16.0,
),
],
onTap: _onItemSelected,
currentIndex: _selectedIndex,
itemCount: 4,
),
);
}
}
在这个示例中:
- 我们定义了一个
MyApp
类作为应用的入口。 MyHomePage
类是一个状态类,用于管理导航栏的选中项。_widgetOptions
列表包含了每个底部导航项对应的页面内容(这里只是简单的Text
组件,实际应用中可以是复杂的页面)。_onItemSelected
方法用于更新当前选中的导航项。DotNavigationBar
组件被添加到Scaffold
的bottomNavigationBar
属性中。我们为每个导航项创建了一个DotController
对象,用于定义激活和未激活状态下的颜色和大小。onTap
回调方法用于处理导航项点击事件,更新当前选中的索引。
运行这个示例,你将看到一个带有四个导航项的底部导航栏,每个导航项在点击时会改变颜色并更新页面内容。