Flutter浮动导航栏插件floaty_navy_bar的使用
Flutter浮动导航栏插件floaty_navy_bar的使用
版本: 1.0.5
示例
下面是使用FloatyNavyBar
插件的基本示例:
class DemoScreen extends StatefulWidget {
const DemoScreen({super.key});
[@override](/user/override)
_DemoScreenState createState() => _DemoScreenState();
}
class _DemoScreenState extends State<DemoScreen> {
int currentIndex = 0;
bool _isVisible = true;
late ScrollController _scrollController;
[@override](/user/override)
void initState() {
super.initState();
_scrollController = ScrollController();
_scrollController.addListener(() {
setState(() {
_isVisible = _scrollController.position.userScrollDirection == ScrollDirection.forward;
});
});
}
[@override](/user/override)
Widget build(BuildContext context) {
var pageList = [
Scaffold(
body: Center(
child: ListView.builder(
controller: _scrollController,
itemCount: 500,
itemBuilder: (context, index) {
return ListTile(title: Text('Item $index'));
},
),
),
backgroundColor: Colors.amberAccent,
),
const Center(
child: Text("Search Page"),
),
const Center(
child: Text("Settings Page"),
),
const Center(
child: Text("Profile Page"),
),
];
return Scaffold(
backgroundColor: Colors.grey[140],
body: Stack(
children: [
pageList[currentIndex],
FloatyNavyBar(
opacityAnimation: _isVisible, // 控制导航栏的透明度动画
backgroundColor: Colors.black, // 导航栏背景颜色
barHeight: 70.0, // 导航栏高度
iconColor: Colors.white, // 图标颜色
textStyle: const TextStyle(
color: Colors.white,
fontSize: 14.0,
), // 文字样式
iconSize: 28.0, // 图标大小
indicatorColor: Colors.white, // 指示器颜色
indicatorHeight: 3, // 指示器高度
indicatorWidth: 14.0, // 指示器宽度
items: [
NavyBarItem(
icon: EvaIcons.homeOutline, // 首页图标
),
NavyBarItem(
icon: EvaIcons.search, // 搜索图标
title: "Search", // 搜索标题
),
NavyBarItem(
icon: EvaIcons.settingsOutline, // 设置图标
),
NavyBarItem(
icon: EvaIcons.personOutline, // 个人资料图标
title: "Profile", // 个人资料标题
),
],
onChanged: (value) {
currentIndex = value; // 更新当前选中的索引
setState(() {}); // 更新UI
},
),
],
),
);
}
}
更多关于Flutter浮动导航栏插件floaty_navy_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter浮动导航栏插件floaty_navy_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,下面是一个关于如何在Flutter项目中使用floaty_navy_bar
插件来实现浮动导航栏的代码示例。这个插件允许你创建一个浮动在屏幕底部的导航栏,非常适合需要快速访问不同功能的应用。
首先,你需要在你的pubspec.yaml
文件中添加floaty_navy_bar
依赖:
dependencies:
flutter:
sdk: flutter
floaty_navy_bar: ^0.22.0 # 请检查最新版本号并替换
然后运行flutter pub get
来安装依赖。
接下来,在你的main.dart
文件中,你可以按照以下方式使用FloatyNavyBar
:
import 'package:flutter/material.dart';
import 'package:floaty_navy_bar/floaty_navy_bar.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Floaty Navy Bar Demo'),
),
body: Center(
child: Text('Tap on the floating navigation bar below'),
),
floatingActionButton: FloatyNavyBar(
data: [
FloatyNavyBarItem(
iconData: Icons.home,
title: 'Home',
onTap: () {
// 导航到首页的逻辑
Navigator.pushNamed(context, '/home');
},
),
FloatyNavyBarItem(
iconData: Icons.search,
title: 'Search',
onTap: () {
// 导航到搜索页的逻辑
Navigator.pushNamed(context, '/search');
},
),
FloatyNavyBarItem(
iconData: Icons.add,
title: 'Add',
onTap: () {
// 添加新项目的逻辑
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text('Add item tapped'),
));
},
),
FloatyNavyBarItem(
iconData: Icons.settings,
title: 'Settings',
onTap: () {
// 导航到设置页的逻辑
Navigator.pushNamed(context, '/settings');
},
),
],
mainButton: FloatyButton(
iconData: Icons.menu,
title: 'Menu',
),
onMainButtonPressed: () {
// 主按钮点击事件
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text('Main button tapped'),
));
},
floatyButtonLocation: FloatyButtonLocation.start, // 按钮位置:开始位置
curve: Curves.easeInOut, // 动画曲线
animationDuration: Duration(milliseconds: 300), // 动画时长
backgroundColor: Colors.blue, // 背景颜色
itemCount: 4, // 显示的项目数量(可选,用于自定义布局)
itemAngle: 0.0, // 项目角度(可选,用于自定义布局)
mainAxisAlignment: MainAxisAlignment.spaceBetween, // 主轴对齐方式
crossAxisAlignment: CrossAxisAlignment.center, // 交叉轴对齐方式
hideOnScroll: true, // 滚动时隐藏
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, // 确保浮动按钮显示在底部
),
routes: {
'/home': (context) => HomeScreen(),
'/search': (context) => SearchScreen(),
'/settings': (context) => SettingsScreen(),
},
);
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Screen'),
),
body: Center(
child: Text('You are on the Home Screen'),
),
);
}
}
class SearchScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Search Screen'),
),
body: Center(
child: Text('You are on the Search Screen'),
),
);
}
}
class SettingsScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Settings Screen'),
),
body: Center(
child: Text('You are on the Settings Screen'),
),
);
}
}
在这个示例中,我们创建了一个包含四个导航项的浮动导航栏。每个导航项都关联了一个点击事件,用于导航到不同的屏幕。此外,我们还设置了一个主按钮,当用户点击它时会显示一个SnackBar。
请根据你的具体需求调整代码中的逻辑和样式。希望这个示例能帮助你更好地理解如何在Flutter项目中使用floaty_navy_bar
插件。