Flutter导航菜单插件simple_navigation_menu的使用

Flutter导航菜单插件simple_navigation_menu的使用

简介

simple_navigation_menu 是一个简单且干净的导航菜单。

菜单展示

顶部菜单	底部菜单	顶部菜单与底部广告

平板展示

顶部菜单平板视图	底部菜单平板视图

特性

• 简单的菜单可以放置在屏幕的顶部或底部。
• 可以传递一个广告（横幅广告、原生广告或任何小部件），该广告将固定在屏幕的顶部或底部。
• 每个屏幕最多可以传递3个 AppBar 动作。每个动作由一个图标、一个图标颜色和一个回调函数组成，当图标被按下时执行该回调函数。

平台支持

开始使用

将 SimpleNavHome 小部件放在 MaterialApp 的 home 属性下即可开始使用。

如果你使用某种状态管理解决方案，只需用你的解决方案包装 SimpleNavHome 小部件。下面是一个使用 Provider 的示例：

return MultiProvider(
  providers: [
    ListenableProvider<ChangeNofitierOne>(create: (_) => changeNotifierOne),
    ListenableProvider<ChangeNofitierTwo>(create: (_) => changeNotifierTwo),
  ],
  child: const Example(),
);

使用示例

最小化使用

// 首先设置菜单项，包括一个字符串标题、一个页面小部件和可选的最多三个操作图标。
List<SimpleNavItemModel> _menuItemList() {
  return [
    SimpleNavItemModel(menuItemTitle: 'Menu 1', screen: Container(color: Colors.amber)),
    SimpleNavItemModel(menuItemTitle: 'Menu 2', screen: Container(color: Colors.brown)),
    SimpleNavItemModel(menuItemTitle: 'Menu 3', screen: Container(color: Colors.green)),
  ];
}

// 然后将菜单项传递给导航菜单，完整的可用参数列表在示例部分。
SimpleNavHome(
  titleWidget: const Text('Simple Navigation Menu'),
  appDrawer: const Drawer(child: Center(child: Text("Drawer"))),
  navMenuItemList: _menuItemList(),
  isTopMenu: true,
);

使用广告

return SimpleNavHome(
  navMenuItemList: _getNavMenuItemList(),
  isTopAd: false,
  ad: _bannerAd != null ? AdWidget(ad: _bannerAd!) : null,
  adBackColor: Colors.purple,
);

SimpleNavHome 参数

必填参数

• navMenuItemList: 显示的菜单项列表，每个都是 SimpleNavItemModel 类型。当前限制为10个，但建议在手机上不超过6个，否则看起来不太美观，具体取决于屏幕大小和菜单标题的大小。

可选参数

• titleWidget: 用于 AppBar 的标题小部件，默认为 SizedBox.shrink()。
• centerTitle: 定义标题是否应居中显示在 AppBar 中，默认为 false。
• isTopMenu: 定义菜单是否应出现在屏幕顶部或底部，默认为 true（顶部）。
• appDrawer: 如果有的话，要使用的抽屉小部件，默认为 null。
• initialPageIndex: 初始页索引值，默认为 0（从左数第一个页面）。
• textScaleFactor: 设置选择的菜单项的缩放比例，默认为 1.15（比正常大15%）。
• frontColorMenu: 菜单文字颜色，默认为 Colors.white。
• backColorMenu: 菜单背景色，默认为 Colors.blue。
• frontColorAppBar: AppBar 文字颜色，默认为 Colors.white。
• backColorAppBar: AppBar 背景色，默认为 Colors.blue。
• isTopAd: 定义广告是否应显示在屏幕顶部或底部，默认为 false（底部）。
• ad: 在所有菜单页面中显示的广告小部件，通常是一个 AdWidget 实例，默认为 null（不显示任何内容）。
• adBackColor: 广告背景色，默认为 Colors.blue。
• adHeight: 广告的高度，默认为 50.0。

注意事项

• 抽屉小部件只能放置在 AppBar 的左侧。

贡献

你可以通过以下方式贡献：

• 随意打开问题并报告错误。
• 拉取请求欢迎！
• 我的母语不是英语，如果你发现文档中的任何错误，请告诉我。
• 你可以买杯咖啡支持我！

示例代码

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:simple_navigation_menu/simple_navigation_menu.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

void main() {
  // 初始化广告，因为使用了广告。
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Example(),
    );
  }
}

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

  [@override](/user/override)
  State<Example> createState() => _ExampleState();
}

// 下面的_bannerAd、initState和dispose只因广告使用，如果没有计划使用广告，则忽略它们。
class _ExampleState extends State<Example> {
  BannerAd? _bannerAd;

  [@override](/user/override)
  initState() {
    super.initState();
    AdHelper.initAds((ad) {
      setState(() {
        _bannerAd = ad as BannerAd;
      });
    });
  }

  [@override](/user/override)
  void dispose() {
    _bannerAd?.dispose();
    super.dispose();
  }

  Widget _getExampleScreen(Color color, String text) {
    return Container(
      color: color,
      child: Center(
        child: ElevatedButton(
          onPressed: () {
            Scaffold newScaffold = Scaffold(
                appBar: AppBar(),
                body: Container(
                    color: Colors.white,
                    child: const Center(child: Text("Child page"))));
            final route = MaterialPageRoute(builder: (context) => newScaffold);
            Navigator.push(context, route);
          },
          child: Text(text,
              style:
                  const TextStyle(fontSize: 30, fontWeight: FontWeight.bold)),
        ),
      ),
    );
  }

  List<SimpleNavItemModel> _getNavMenuItemList() {
    return [
      SimpleNavItemModel(
          menuItemTitle: 'Menu 1',
          screen: _getExampleScreen(Colors.amber, "Page 1")),
      SimpleNavItemModel(
          menuItemTitle: 'Menu 2',
          screen: _getExampleScreen(Colors.green, "Page 2"),
          homeActions: _getHomeActions()),
      SimpleNavItemModel(
          menuItemTitle: 'Menu 3',
          screen: _getExampleScreen(Colors.pink, "Page 3")),
      SimpleNavItemModel(
          menuItemTitle: 'Menu 4',
          screen: _getExampleScreen(Colors.brown, "Page 4")),
      SimpleNavItemModel(
          menuItemTitle: 'Menu 5',
          screen: _getExampleScreen(Colors.grey, "Page 5")),
    ];
  }

  List<SimpleNavAction> _getHomeActions() {
    return [
      SimpleNavAction(iconData: Icons.save, callbackFunction: _saveCallback),
      SimpleNavAction(
          iconData: Icons.cleaning_services_outlined,
          callbackFunction: _clearCallback),
    ];
  }

  // 当动作（AppBar图标）被按下时调用的回调函数的一个简单示例。
  _saveCallback() async {
    const snackBar = SnackBar(
        content: Text("Saved (example)"), duration: Duration(seconds: 2));
    ScaffoldMessenger.of(context).showSnackBar(snackBar);
  }

  // 当动作（AppBar图标）被按下时调用的回调函数的一个简单示例。
  _clearCallback() async {
    var confirmation = await _showExampleConfirmation(context) ?? false;
    if (confirmation != null && confirmation is bool && confirmation && mounted) {
      const snackBar = SnackBar(
          content: Text("Cleared (example)"), duration: Duration(seconds: 2));
      ScaffoldMessenger.of(context).showSnackBar(snackBar);
    }
  }

  // 当你确认一个动作时调用的简单的showDialog。对于你的实际应用没什么太重要的作用。
  static _showExampleConfirmation(BuildContext context) {
    return showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text("Confirmation Example"),
          actions: [
            TextButton(
              onPressed: () => Navigator.of(context).pop(false),
              child: const Text("Cancel"),
            ),
            TextButton(
              onPressed: () => Navigator.of(context).pop(true),
              child: const Text("Confirm"),
            )
          ],
        );
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SimpleNavHome(
      titleWidget: const Text('Simple Navigation Menu'),
      appDrawer: const Drawer(child: Center(child: Text("Drawer"))),
      navMenuItemList: _getNavMenuItemList(),
      isTopMenu: true,
      isTopAd: false,
      ad: _bannerAd != null ? AdWidget(ad: _bannerAd!) : null,
    );
  }
}

// 辅助类，使其更容易使用广告。
//
// 如果你想为你的应用程序适应此类，请记住复制对AndroidManifest.xml和Info.plist所做的更改。
class AdHelper {
  static String get bannerAdUnitId {
    if (Platform.isAndroid) {
      return 'ca-app-pub-3940256099942544/6300978111';
    } else if (Platform.isIOS) {
      return 'ca-app-pub-3940256099942544/2934735716';
    } else {
      throw UnsupportedError('Unsupported platform');
    }
  }

  static initAds(Function(Ad) initAdCallback) {
    BannerAd(
      adUnitId: AdHelper.bannerAdUnitId,
      request: const AdRequest(),
      size: AdSize.banner,
      listener: BannerAdListener(
        onAdLoaded: initAdCallback,
        onAdFailedToLoad: (ad, err) {
          ad.dispose();
        },
      ),
    ).load();
  }
}