Flutter导航栏插件pinterest_nav_bar的使用
Flutter导航栏插件pinterest_nav_bar的使用
Pinterest应用的点赞底部导航栏。
Light 主题 | Dark 主题
Light 主题模式视频GIF | Dark 主题模式视频GIF |
---|---|
![]() |
![]() |
开始使用
将 [MaterialApp]
包裹在 [PinterestNavBarController]
中。
return PinterestNavBarController(
child: MaterialApp(
title: 'Pinterest Nav Bar Example',
home: Pages(),
),
);
添加导航栏
注意:建议将其用作浮动操作按钮。
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: PinterestNavBar(
currentIndex: selectedPageIndex,
onTap: (i) {
print('PinterestNavBar.onTap($i)');
setState(() {
selectedPageIndex = i;
});
},
items: [
Icons.home,
Icons.search,
Icons.chat_bubble_outline_rounded,
Icons.person
],
),
完整的示例代码可以在 这里 查看。
完整示例代码
main.dart
import 'package:example/pages.dart';
import 'package:flutter/material.dart';
import 'package:pinterest_nav_bar/pinterest_nav_bar.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
final TextStyle textStyle = TextStyle(fontWeight: FontWeight.bold);
[@override](/user/override)
Widget build(BuildContext context) {
return PinterestNavBarController(
child: MaterialApp(
title: 'Pinterest Nav Bar Example',
home: Pages(),
themeMode: ThemeMode.light,
theme: ThemeData(
brightness: Brightness.light,
primaryColor: Colors.white,
// scaffoldBackgroundColor: Colors.grey.shade100,
// bottomNavigationBarTheme: BottomNavigationBarThemeData(
// backgroundColor: Colors.white,
// selectedItemColor: Colors.orange,
// unselectedItemColor: Colors.orange[100],
// ),
tabBarTheme: TabBarTheme(
indicator: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(50),
),
labelColor: Colors.white,
unselectedLabelColor: Colors.black,
labelStyle: textStyle,
unselectedLabelStyle: textStyle,
),
),
darkTheme: ThemeData(
brightness: Brightness.dark,
primaryColor: Colors.black,
scaffoldBackgroundColor: Colors.black87,
// bottomNavigationBarTheme: BottomNavigationBarThemeData(
// backgroundColor: Colors.black,
// selectedItemColor: Colors.pink,
// unselectedItemColor: Colors.pink[100],
// ),
tabBarTheme: TabBarTheme(
indicator: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(50),
),
labelColor: Colors.black,
unselectedLabelColor: Colors.white,
labelStyle: textStyle,
unselectedLabelStyle: textStyle,
),
),
),
);
}
}
更多关于Flutter导航栏插件pinterest_nav_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter导航栏插件pinterest_nav_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
pinterest_nav_bar
是一个用于 Flutter 的导航栏插件,它模仿了 Pinterest 应用中的底部导航栏样式。这个插件提供了一个漂亮的、带有动画效果的底部导航栏,非常适合需要类似 Pinterest 风格的应用。
安装
首先,你需要在 pubspec.yaml
文件中添加 pinterest_nav_bar
依赖:
dependencies:
flutter:
sdk: flutter
pinterest_nav_bar: ^1.0.0 # 请检查最新版本
然后运行 flutter pub get
来安装依赖。
基本用法
以下是一个简单的示例,展示如何使用 pinterest_nav_bar
:
import 'package:flutter/material.dart';
import 'package:pinterest_nav_bar/pinterest_nav_bar.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Pinterest Nav Bar Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
int _selectedIndex = 0;
final List<Widget> _pages = [
Center(child: Text('Home Page')),
Center(child: Text('Search Page')),
Center(child: Text('Notifications Page')),
Center(child: Text('Profile Page')),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Pinterest Nav Bar Demo'),
),
body: _pages[_selectedIndex],
bottomNavigationBar: PinterestNavBar(
selectedIndex: _selectedIndex,
onTap: _onItemTapped,
items: [
PinterestNavBarItem(
icon: Icons.home,
activeIcon: Icons.home_filled,
title: 'Home',
),
PinterestNavBarItem(
icon: Icons.search,
activeIcon: Icons.search,
title: 'Search',
),
PinterestNavBarItem(
icon: Icons.notifications,
activeIcon: Icons.notifications_active,
title: 'Notifications',
),
PinterestNavBarItem(
icon: Icons.person,
activeIcon: Icons.person_outline,
title: 'Profile',
),
],
),
);
}
}
参数说明
selectedIndex
: 当前选中的导航栏项的索引。onTap
: 当用户点击导航栏项时调用的回调函数。items
: 导航栏项的列表,每个项都是一个PinterestNavBarItem
对象。icon
: 未选中时的图标。activeIcon
: 选中时的图标。title
: 导航栏项的标题。
自定义
你可以通过设置 PinterestNavBar
的其他属性来自定义导航栏的外观,例如:
backgroundColor
: 导航栏的背景颜色。activeColor
: 选中项的颜色。inactiveColor
: 未选中项的颜色。fontSize
: 标题的字体大小。
PinterestNavBar(
selectedIndex: _selectedIndex,
onTap: _onItemTapped,
backgroundColor: Colors.white,
activeColor: Colors.blue,
inactiveColor: Colors.grey,
fontSize: 14,
items: [
// PinterestNavBarItem...
],
)