Flutter快速导航栏操作插件quick_navbar的使用

关于

这是什么？

quick_navbar 是一个快速且易于使用的包，允许你创建简单但时尚的底部导航栏。它还包括一些额外的功能，如iOS风格的静态导航栏，关闭所有Material Design动画（如水波纹效果），以及超级简单的格式来简化你的应用的初期阶段。

使用

格式

QuickNavBar(
    items: [
        QuickNavBarItem(
            label: String, // 可选
            icon: IconData, // 必须
            selectedIcon: IconData, // 可选
            widget: Widget, // 必须
        ),
    ],
    showLabels: bool,
    type: QuickNavBarType,
    fontSize: double,
    selectedFontSize: double,
    selectedColor: Color,
    hoverEffect: bool,
)

items

• 必需：是
• 类型：List
• 描述：这定义了你的导航项。你需要至少两个导航栏项。每个项包含以下内容：

label

• 必需：有时
• 类型：String
• 描述：这是在导航栏图标下方显示的文本。如果 showLabels 为 true，则必须提供；如果 showLabels 为 false，则可选。

icon

• 必需：是
• 类型：Material Icon
• 描述：这是显示在标签上方的图标（如果有）。

selectedIcon

• 必需：否
• 类型：Material Icon
• 默认值：icon 参数
• 描述：这是当导航栏项被选中时显示的图标。默认情况下，它与你在前一个参数中指定的图标相同。

widget

• 必需：是
• 类型：Material Widget
• 描述：将其设置为与导航项对应的页面。当导航到该导航项时，此页面将作为主体显示。目前不支持自定义动作，但将来可能会更新。

onPressed

• 必需：否
• 类型：Function
• 默认值：无
• 描述：将其设置为在导航到该选项卡时执行的函数对象。可以用于刷新内容、检查更新等。

showLabels

• 必需：否
• 类型：boolean
• 默认值：true
• 描述：决定是否显示导航栏的标签。如果为 true，则标签会显示出来，即使你没有在项中添加标签，它们也会占用空间。如果为 false，则标签不会显示，并且不会占用空间。

type

• 必需：否
• 类型：QuickNavBarType
• 默认值：QuickNavBarType.auto
• 描述：这决定了你拥有的导航栏类型。可能的值包括：
  • QuickNavBarType.animate - 启用所有Material Design动画
  • QuickNavBarType.static - 禁用所有Material Design动画，使其像iOS标签样式
  • QuickNavBarType.auto - 如果平台是Apple设备，则使用static，否则使用animate

fontSize

• 必需：否
• 类型：double
• 默认值：12
• 描述：这决定了导航栏项文本的默认字体大小。

selectedFontSize

• 必需：否
• 类型：double
• 默认值：如果type是static，则与fontSize参数相同，否则是fontSize参数的1.25倍
• 描述：这是当前选中的导航栏项文本的字体大小。

color

• 必需：否
• 类型：Material Color
• 默认值：由Flutter决定
• 描述：这决定了导航栏项文本和图标的默认主题颜色。

selectedColor

• 必需：否
• 类型：Material Color
• 默认值：应用程序的强调色
• 描述：这是当前选中的导航栏项的主题颜色。

hoverEffect

• 必需：否
• 类型：boolean
• 默认值：false
• 描述：决定是否应该在图标周围显示一个小气泡。这是BottomNavBar Flutter小部件的默认功能，但我已经覆盖了它以默认不显示。但如果此值为 true，则会显示。

sidebar

• 必需：否
• 类型：boolean
• 默认值：auto
• 描述：侧边栏是一个特性，可以在大屏幕上显示侧边导航栏而不是底部导航栏。true 显示侧边栏，false 隐藏，留空则根据屏幕宽度是否大于屏幕高度来决定。
• 注意：要使用此功能，请将可选的 sidebarBeta 参数设置为 true。否则，除非你显式地将 sidebar 设置为 true 或 sidebarBeta 设置为 true，否则此功能将不可用。

示例代码

import 'package:flutter/material.dart';
import 'package:quick_navbar/quick_navbar.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        useMaterial3: true,
        brightness: Brightness.light,
      ),
      darkTheme: ThemeData(
        useMaterial3: true,
        brightness: Brightness.dark,
      ),
      themeMode: ThemeMode.system,
      home: QuickNavBar(items: [
        QuickNavBarItem(
            label: "Home",
            icon: Icons.home_outlined,
            selectedIcon: Icons.home,
            widget: const HomePage(),
            onPressed: () {
              debugPrint("Page 1: Home navigated to");
            }),
        QuickNavBarItem(
            label: "Search",
            icon: Icons.search_outlined,
            selectedIcon: Icons.search,
            widget: const SearchPage(),
            onPressed: () {
              debugPrint("Page 2: Search navigated to");
            }),
        QuickNavBarItem(
            label: "Settings",
            icon: Icons.settings_outlined,
            selectedIcon: Icons.settings,
            widget: const SettingsPage(),
            onPressed: () {
              debugPrint("Page 3: Settings navigated to");
            }),
      ], selectedColor: Colors.blue),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Text("Home page");
  }
}

class SearchPage extends StatefulWidget {
  const SearchPage({super.key});

  [@override](/user/override)
  State<SearchPage> createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Text("Search page");
  }
}

class SettingsPage extends StatefulWidget {
  const SettingsPage({super.key});

  [@override](/user/override)
  State<SettingsPage> createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Text("Settings page");
  }
}