Flutter导航面板插件navigation_panel的使用

Flutter导航面板插件navigation_panel的使用

特性

本插件提供了三种不同的动画导航栏。

  1. 中心浮动菜单 - CenterFloatAnimatedNav
  2. 中心停靠菜单 - CenterDockedAnimatedNav
  3. 末端停靠菜单 - EndDockedAnimatedNav



安装

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  navigation_panel: <最新版本>

然后导入该库：

import 'package:navigation_panel/navigation_panel.dart';

使用方法

示例代码可以在 /example 文件夹中找到。

简单实现

1. 中心停靠菜单 (CenterDockedAnimatedNav)

// 您可以最多拥有5个导航项
Scaffold(
  backgroundColor: Colors.grey[200],
  floatingActionButton: CenterDockedAnimatedNav(navItems: [
    MenuNavItem(onTap: () {}, icon: LineIcons.amazonWebServicesAws),
    MenuNavItem(onTap: () {}, icon: LineIcons.fire),
    MenuNavItem(onTap: () {}, icon: LineIcons.meteor),
    MenuNavItem(onTap: () {}, icon: LineIcons.futbol),
    MenuNavItem(onTap: () {}, icon: LineIcons.swimmer),
  ]),
);

2. 中心浮动菜单 (CenterFloatAnimatedNav)

Scaffold(
  backgroundColor: Colors.grey[200],
  floatingActionButton: CenterFloatAnimatedNav(
    navItems: [
      MenuNavItem(
        onTap: () {
          ScaffoldMessenger.of(context).showSnackBar(snackBar);
        },
        icon: LineIcons.amazonWebServicesAws,
      ),
      MenuNavItem(onTap: () {}, icon: LineIcons.fire),
      MenuNavItem(onTap: () {}, icon: LineIcons.meteor),
      MenuNavItem(onTap: () {}, icon: LineIcons.futbol),
      MenuNavItem(onTap: () {}, icon: LineIcons.areaChart),
      MenuNavItem(onTap: () {}, icon: LineIcons.lifeRing),
      MenuNavItem(onTap: () {}, icon: LineIcons.paperPlane),
      MenuNavItem(onTap: () {}, icon: LineIcons.moon),
    ],
  ),
);

3. 末端停靠菜单 (EndDockedAnimatedNav)

Scaffold(
  backgroundColor: Colors.grey[200],
  floatingActionButton: EndDockedAnimatedNav(
    key: animatedNavKey,
    menuBgColor: Colors.white,
    menuOpenIcon: const Icon(Icons.menu, color: primaryColor),
    menuCloseIcon: const Icon(Icons.close, color: primaryColor),
    navItems: [
      MenuNavItem(onTap: () {}, icon: LineIcons.fire),
      MenuNavItem(onTap: () {}, icon: LineIcons.meteor),
      MenuNavItem(onTap: () {}, icon: LineIcons.futbol),
      MenuNavItem(onTap: () {}, icon: LineIcons.areaChart),
      MenuNavItem(onTap: () {}, icon: LineIcons.lifeRing),
      MenuNavItem(onTap: () {}, icon: LineIcons.paperPlane),
      MenuNavItem(onTap: () {}, icon: LineIcons.moon),
    ],
  ),
);

自定义

参数名称 描述
activeNavItemBgColor 可以用来设置激活的导航项背景颜色。
activeNavItemIconColor 设置激活的导航项图标颜色。
menuIconColor 设置菜单图标的颜色。
navItemIconColor 设置非激活的导航项图标颜色。
backgroundColor 停靠菜单的背景颜色。

完整示例

以下是完整的示例代码：

import 'package:flutter/material.dart';
import 'package:line_icons/line_icons.dart';
import 'package:navigation_panel/navigation_panel.dart';

/// 应用程序入口点
void main() {
  runApp(const MyApp());
}

/// 类 [MyApp]
///
/// 示例代码
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Nav',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Navigation'),
    );
  }
}

/// 可用的导航类型枚举
enum AnimatedNavs { centerFloat, centerDocked, endDocked }

/// 类 [MyHomePage]
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static const Color primaryColor = Color(0xff613EEA);

  /// 初始菜单打开状态
  bool toggle = false;
  final GlobalKey<EndDockedAnimatedNavState> animatedNavKey = GlobalKey();
  AnimatedNavs? _navs = AnimatedNavs.centerDocked;
  SnackBar snackBar = SnackBar(
    action: SnackBarAction(
      label: '撤销',
      onPressed: () {
        // 撤销操作
      },
    ),
    content: const Text('导航项被点击'),
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      appBar: AppBar(
        backgroundColor: primaryColor,
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          ListTile(
            title: const Text('中心浮动'),
            leading: Radio<AnimatedNavs>(
              value: AnimatedNavs.centerFloat,
              groupValue: _navs,
              onChanged: (AnimatedNavs? value) {
                setState(() {
                  _navs = value;
                });
              },
            ),
          ),
          ListTile(
            title: const Text('中心停靠'),
            leading: Radio<AnimatedNavs>(
              value: AnimatedNavs.centerDocked,
              groupValue: _navs,
              onChanged: (AnimatedNavs? value) {
                setState(() {
                  _navs = value;
                });
              },
            ),
          ),
          ListTile(
            title: const Text('末端停靠'),
            leading: Radio<AnimatedNavs>(
              value: AnimatedNavs.endDocked,
              groupValue: _navs,
              onChanged: (AnimatedNavs? value) {
                setState(() {
                  _navs = value;
                });
              },
            ),
          ),
        ],
      ),
      floatingActionButton: _navs == AnimatedNavs.centerDocked
          ? CenterDockedAnimatedNav(navItems: [
              MenuNavItem(onTap: () {}, icon: LineIcons.amazonWebServicesAws),
              MenuNavItem(onTap: () {}, icon: LineIcons.fire),
              MenuNavItem(onTap: () {}, icon: LineIcons.meteor),
              MenuNavItem(onTap: () {}, icon: LineIcons.futbol),
              MenuNavItem(onTap: () {}, icon: LineIcons.swimmer),
            ])
          : _navs == AnimatedNavs.endDocked
              ? EndDockedAnimatedNav(
                  key: animatedNavKey,
                  menuBgColor: Colors.white,
                  menuOpenIcon: const Icon(Icons.menu, color: primaryColor),
                  menuCloseIcon: const Icon(Icons.close, color: primaryColor),
                  navItems: [
                    MenuNavItem(onTap: () {}, icon: LineIcons.fire),
                    MenuNavItem(onTap: () {}, icon: LineIcons.meteor),
                    MenuNavItem(onTap: () {}, icon: LineIcons.futbol),
                    MenuNavItem(onTap: () {}, icon: LineIcons.areaChart),
                    MenuNavItem(onTap: () {}, icon: LineIcons.lifeRing),
                    MenuNavItem(onTap: () {}, icon: LineIcons.paperPlane),
                    MenuNavItem(onTap: () {}, icon: LineIcons.moon),
                  ],
                )
              : CenterFloatAnimatedNav(
                  navItems: [
                    MenuNavItem(
                      onTap: () {
                        ScaffoldMessenger.of(context).showSnackBar(snackBar);
                      },
                      icon: LineIcons.amazonWebServicesAws,
                    ),
                    MenuNavItem(onTap: () {}, icon: LineIcons.fire),
                    MenuNavItem(onTap: () {}, icon: LineIcons.meteor),
                    MenuNavItem(onTap: () {}, icon: LineIcons.futbol),
                    MenuNavItem(onTap: () {}, icon: LineIcons.areaChart),
                    MenuNavItem(onTap: () {}, icon: LineIcons.lifeRing),
                    MenuNavItem(onTap: () {}, icon: LineIcons.paperPlane),
                    MenuNavItem(onTap: () {}, icon: LineIcons.moon),
                  ],
                ),
    );
  }
}

更多关于Flutter导航面板插件navigation_panel的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter导航面板插件navigation_panel的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用navigation_panel插件的一个简单示例。navigation_panel插件通常用于创建一个可滑动的导航面板，类似于汉堡菜单导航。以下是一个基本的实现案例。

首先，确保你已经在pubspec.yaml文件中添加了navigation_panel依赖：

dependencies:
  flutter:
    sdk: flutter
  navigation_panel: ^最新版本号  # 请替换为实际的最新版本号

然后运行flutter pub get来安装依赖。

接下来，我们创建一个简单的Flutter应用，其中包含一个导航面板和一些示例页面。

主应用文件 (main.dart)

import 'package:flutter/material.dart';
import 'package:navigation_panel/navigation_panel.dart';
import 'page1.dart';
import 'page2.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: NavigationPanelDemo(),
    );
  }
}

class NavigationPanelDemo extends StatefulWidget {
  @override
  _NavigationPanelDemoState createState() => _NavigationPanelDemoState();
}

class _NavigationPanelDemoState extends State<NavigationPanelDemo> {
  final List<Widget> _pages = [
    Page1(),
    Page2(),
  ];

  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Navigation Panel Demo'),
      ),
      body: NavigationPanel(
        menuWidth: 250,
        items: [
          NavigationPanelItem(
            icon: Icons.home,
            title: 'Home',
            onTap: () => _onItemTapped(0),
          ),
          NavigationPanelItem(
            icon: Icons.settings,
            title: 'Settings',
            onTap: () => _onItemTapped(1),
          ),
        ],
        mainContent: _pages[_selectedIndex],
      ),
    );
  }
}

页面1 (page1.dart)

import 'package:flutter/material.dart';

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Page 1'),
    );
  }
}

页面2 (page2.dart)

import 'package:flutter/material.dart';

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Page 2'),
    );
  }
}

解释

  1. main.dart：

    • 创建了一个MyApp应用，其主页是NavigationPanelDemo。
    • NavigationPanelDemo是一个有状态组件，它维护了一个页面列表和一个当前选中页面的索引。
    • 使用NavigationPanel小部件来创建导航面板，其中包括菜单项和主要内容区域。
    • 菜单项使用NavigationPanelItem定义，每个项都有一个图标、标题和一个点击事件处理函数。

  2. page1.dart 和 page2.dart：

    • 分别定义了两个简单的页面，每个页面只是在屏幕中央显示一个文本。

运行应用

确保所有文件保存后，使用flutter run命令运行应用。你应该能够看到一个带有汉堡菜单的应用，点击菜单项可以在两个页面之间切换。

这个示例展示了如何使用navigation_panel插件创建一个基本的导航结构。根据实际需求，你可以进一步自定义菜单项的样式、添加更多页面或功能等。

回到顶部