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

bupafengyu 1楼•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...
  ],
)