Flutter带标签的弧形导航栏插件curved_navigation_bar_with_label的使用
Flutter带标签的弧形导航栏插件 curved_navigation_bar_with_label
的使用
curved_navigation_bar_with_label
是一个基于 curved_navigation_bar
的 Flutter 插件,提供了带有标签的弧形导航栏。它可以帮助你轻松实现具有动画效果和标签的底部导航栏。
添加依赖
首先,在你的 pubspec.yaml
文件中添加依赖:
dependencies:
curved_navigation_bar_with_label: ^2.1.2 # 请确保使用最新版本
然后运行 flutter pub get
来安装依赖。
使用示例
下面是一个完整的示例代码,展示了如何使用 CurvedNavigationBar
带有标签的导航栏,并且可以通过按钮或编程方式切换页面。
完整的示例代码
import 'package:curved_navigation_bar_with_label/curved_navigation_bar.dart';
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: BottomNavBar()));
class BottomNavBar extends StatefulWidget {
@override
_BottomNavBarState createState() => _BottomNavBarState();
}
class _BottomNavBarState extends State<BottomNavBar> {
int _page = 0;
GlobalKey<CurvedNavigationBarState> _bottomNavigationKey = GlobalKey();
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: CurvedNavigationBar(
key: _bottomNavigationKey,
index: 0,
height: 76.0,
items: [
CurvedNavigationBarItem(icon: Icon(Icons.add, size: 30), label: "Add"),
CurvedNavigationBarItem(icon: Icon(Icons.list, size: 30), label: "List"),
CurvedNavigationBarItem(icon: Icon(Icons.compare_arrows, size: 30), label: "Compare"),
CurvedNavigationBarItem(icon: Icon(Icons.call_split, size: 30), label: "Split"),
CurvedNavigationBarItem(icon: Icon(Icons.perm_identity, size: 30), label: "User"),
],
backgroundColor: Colors.blueAccent,
animationCurve: Curves.easeInOut,
animationDuration: Duration(milliseconds: 600),
onTap: (index) {
setState(() {
_page = index;
});
},
letIndexChange: (index) => true,
),
body: Container(
color: Colors.blueAccent,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(_page.toString(), textScaleFactor: 10.0),
ElevatedButton(
child: Text('Go To Page of index 1'),
onPressed: () {
final CurvedNavigationBarState? navBarState = _bottomNavigationKey.currentState;
navBarState?.setPage(1);
},
)
],
),
),
),
);
}
}
属性说明
items
: 导航栏中的项目列表。index
: 当前选中的导航栏索引,可以用于设置初始索引或更改当前索引。color
: 导航栏的颜色,默认为白色。buttonBackgroundColor
: 浮动按钮的背景颜色,默认与color
相同。backgroundColor
: 导航栏背景的颜色,默认为蓝色。onTap
: 处理点击事件的回调函数。animationCurve
: 动画曲线,默认为Curves.easeOutCubic
。animationDuration
: 动画持续时间,默认为Duration(milliseconds: 600)
。height
: 导航栏的高度,默认最小值为 0.0,最大值为 75.0。letIndexChange
: 返回布尔值的函数,用于控制是否允许页面更改,默认返回true
。
编程方式更改页面
你可以通过编程的方式更改当前显示的页面,例如:
final CurvedNavigationBarState? navBarState = _bottomNavigationKey.currentState;
navBarState?.setPage(1); // 设置当前页面为索引 1 对应的页面
更多关于Flutter带标签的弧形导航栏插件curved_navigation_bar_with_label的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter带标签的弧形导航栏插件curved_navigation_bar_with_label的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,下面是一个关于如何在Flutter中使用curved_navigation_bar_with_label
插件的示例代码。这个插件允许你创建一个带有标签的弧形导航栏。首先,确保你已经在pubspec.yaml
文件中添加了该插件的依赖:
dependencies:
flutter:
sdk: flutter
curved_navigation_bar_with_label: ^0.x.x # 请替换为最新版本号
然后,运行flutter pub get
来安装依赖。
接下来是一个完整的示例代码,展示如何使用curved_navigation_bar_with_label
插件:
import 'package:flutter/material.dart';
import 'package:curved_navigation_bar_with_label/curved_navigation_bar_with_label.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Curved Navigation Bar with Label Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
int _selectedIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Curved Navigation Bar with Label Demo'),
),
body: Center(
child: Text('You have selected: ${_getPageTitle(_selectedIndex)}'),
),
bottomNavigationBar: CurvedNavigationBarWithLabel(
items: [
CurvedNavigationBarItemWithLabel(
icon: Icons.home,
label: 'Home',
),
CurvedNavigationBarItemWithLabel(
icon: Icons.search,
label: 'Search',
),
CurvedNavigationBarItemWithLabel(
icon: Icons.library_books,
label: 'Library',
),
CurvedNavigationBarItemWithLabel(
icon: Icons.account_circle,
label: 'Profile',
),
CurvedNavigationBarItemWithLabel(
icon: Icons.settings,
label: 'Settings',
),
],
backgroundColor: Colors.white,
buttonBackgroundColor: Colors.blue,
buttonActiveColor: Colors.lightBlueAccent,
labelStyle: TextStyle(fontSize: 10),
onTap: (index) {
setState(() {
_selectedIndex = index;
});
},
),
);
}
String _getPageTitle(int index) {
switch (index) {
case 0:
return 'Home';
case 1:
return 'Search';
case 2:
return 'Library';
case 3:
return 'Profile';
case 4:
return 'Settings';
default:
return '';
}
}
}
代码解释:
- 依赖导入:在
pubspec.yaml
中添加curved_navigation_bar_with_label
依赖。 - 创建主应用:
MyApp
类负责创建主应用,设置主题和主页。 - 主页逻辑:
MyHomePage
是一个有状态组件,用于处理导航栏项的点击事件和显示当前选中的页面标题。 - 导航栏项:
CurvedNavigationBarItemWithLabel
定义了导航栏的每一项,包括图标和标签。 - 导航栏设置:
CurvedNavigationBarWithLabel
负责显示导航栏,并处理点击事件。 - 点击事件处理:在
onTap
回调中,更新_selectedIndex
以反映当前选中的导航栏项。
这个示例展示了如何使用curved_navigation_bar_with_label
插件创建一个带有标签的弧形导航栏,并处理用户的点击事件。你可以根据需求进一步自定义导航栏的样式和功能。