Flutter导航动画插件flurry_navigation的使用

flurry_navigation

flurry_navigation 是一个用于 Flutter 的平滑且带动画的导航包，它不会干扰屏幕，并允许调整颜色、形状和导航逻辑。

获取开始

首先，在 pubspec.yaml 文件中添加依赖：

dependencies:
  ...
  flurry_navigation: ^0.2.0 # 可能不是最新版本

修改屏幕文件

在每个你想要导航的屏幕上添加以下变量：

import 'package:flurry_navigation/flurry_navigation.dart';
// 变量名称必须唯一
final firstscreen = new Screen(
  // 在这里可以添加屏幕的具体内容
);

主文件中的更改

首先声明一个名为 activeScreen 的变量：

var activeScreen;

然后添加一个返回 FlurryNavigation 的小部件构建器类：

Widget build(BuildContext context) {
  return new FlurryNavigation(
    // 底部左上角的展开图标
    expandIcon: Image.asset("Put your path here"),
    // 图标的大小
    iconSize: 50.0,
    // 屏幕内容，保持不变
    contentScreen: activeScreen,
  );
}

现在为 FlurryNavigation 添加 menuScreen 属性并设置其值：

Widget build(BuildContext context) {
  return new FlurryNavigation(
    ...
    menuScreen: new MenuScreen(
      // 如果你想使用自己的菜单，请联系我并我会提供说明。
    )
  );
}

为 MenuScreen 添加 bgColor 属性并设置为你想要的背景颜色：

Widget build(BuildContext context) {
  return new FlurryNavigation(
    ...
    menuScreen: new MenuScreen(
      bgColor: Colors.white, // 背景颜色
    )
  );
}

现在为 MenuScreen 添加 menu 属性并设置为其值：

Widget build(BuildContext context) {
  return new FlurryNavigation(
    ...
    menuScreen: new MenuScreen(
      menu: new Menu(
        // 这是菜单项的列表，通常与屏幕数量匹配
      )
    )
  );
}

然后为 Menu 添加 items 属性并设置为包含你想要的菜单项的列表（通常与屏幕数量匹配），使用 new MenuItem，例如：

Widget build(BuildContext context) {
  return new FlurryNavigation(
    ...
    menuScreen: new MenuScreen(
      menu: new Menu(
        items: [
          // 你可以添加任意数量的项目，它是可滚动的！
          new MenuItem(
            id: 'hom', // 设置为你想要的任何内容，但不要重复！必需字段！
            icon: 'assets/hom.png', // 设置为此按钮图标的路径！必需字段！
            isSelected: true, // 默认情况下，将项目的 "isSelected" 属性设置为 "true"！必需字段！
            selectedBtnColor: Color.fromRGBO(38, 198, 218, 1), // 激活时的按钮颜色！必需字段！
            btnShape: BoxShape.rectangle, // 按钮的形状！必需字段！
            disabledBtnColor: Colors.transparent, // 默认值为 Colors.transparent
            selectedShadowColor: Colors.blueGrey, // 默认值为 Colors.blueGrey
            disabledShadowColor: Colors.transparent // 默认值为 Colors.transparent
          ),
          new MenuItem(
            id: 'sta',
            icon: 'assets/sta.png',
            isSelected: false,
            selectedBtnColor: Color.fromRGBO(38, 198, 218, 1),
            btnShape: BoxShape.rectangle
          )
        ]
      )
    )
  );
}

现在为 MenuScreen 添加 onMenuItemSelected 属性以指定导航逻辑：

Widget build(BuildContext context) {
  return new FlurryNavigation(
    ...
    menuScreen: new MenuScreen(
      ...
      // 这是导航背后的逻辑。根据你的需求定制以下代码。如果需要帮助，请告诉我。
      onMenuItemSelected: (String itemId) {
        if (itemId == 'hom') {
          setState(() => activeScreen = firstscreen);
        } else if (itemId == 'sta') {
          setState(() => activeScreen = secondscreen);
        }
      },
    ),
  );
}

注意事项

• 这是我的第一个 Markdown 文件，如果你发现问题，请随时打开一个问题。
• 你可以在示例应用或 GitHub 仓库中找到完整的独立示例。

贡献

欢迎提交拉取请求。对于重大更改，请先打开一个问题讨论你想要进行的更改。

许可证

MIT

示例代码

以下是一个完整的示例代码，展示了如何使用 flurry_navigation 插件：

import 'package:flutter/material.dart';
import 'package:example/fifth_screen.dart'; // 假设这是第五个屏幕
import 'package:example/fourth_screen.dart'; // 第四个屏幕
import 'package:example/third_screen.dart'; // 第三个屏幕
import 'package:example/second_screen.dart'; // 第二个屏幕
import 'package:example/first_screen.dart'; // 第一个屏幕
import 'package:flurry_navigation/flurry_navigation.dart';
import 'package:flurry_navigation/flurry_menu.dart';
import 'bottom_section.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 声明默认屏幕的 activeScreen 变量
  var activeScreen = firstscreen;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return new FlurryNavigation(
      // 屏幕曲线的半径
      curveRadius: (MediaQuery.of(context).size.width * MediaQuery.of(context).size.height) / 4980,
      // 底部左上角的展开图标
      expandIcon: Image.asset("assets/expan1.png"),
      // 图标的大小
      iconSize: (MediaQuery.of(context).size.width * MediaQuery.of(context).size.height) / 15420,
      // 屏幕内容
      contentScreen: activeScreen,
      menuScreen: new FlurryMenu(
        bgColor: Color.fromRGBO(121, 134, 203, 1),
        // 菜单底部部分的内容
        bottomSection: BottomSection(), // BottomSection() 是一个示例
        menu: new SideMenu(
          items: [
            new SideMenuItem(
              id: 'hom', // 你可以设置为你想要的任何内容，但不要重复
              icon: 'assets/hom.png', // 设置此按钮图标的路径
              isSelected: true,
              selectedBtnColor: Color.fromRGBO(38, 198, 218, 1),
              btnShape: BoxShape.rectangle,
            ),
            new SideMenuItem(
              id: 'sta',
              icon: 'assets/sta.png',
              isSelected: false,
              selectedBtnColor: Color.fromRGBO(38, 198, 218, 1),
              btnShape: BoxShape.rectangle,
            ),
            new SideMenuItem(
              id: 'doc',
              icon: 'assets/doc.png',
              isSelected: false,
              selectedBtnColor: Color.fromRGBO(38, 198, 218, 1),
            ),
            new SideMenuItem(
              id: 'set',
              icon: 'assets/set.png',
              isSelected: false,
              selectedBtnColor: Color.fromRGBO(38, 198, 218, 1),
            ),
          ],
        ),
        onMenuItemSelected: (String itemId) {
          if (itemId == 'hom') {
            setState(() => activeScreen = firstscreen);
          } else if (itemId == 'sta') {
            setState(() => activeScreen = secondscreen);
          } else if (itemId == 'doc') {
            setState(() => activeScreen = thirdscreen);
          } else if (itemId == 'loc') {
            setState(() => activeScreen = fourthscreen);
          } else if (itemId == 'set') {
            setState(() => activeScreen = fifthscreen);
          }
        },
      ),
    );
  }
}