Flutter 自适应导航插件 adaptive_navigation_widget 的使用

该插件提供了一个可以根据屏幕大小显示不同类型的导航的组件。本文档将详细介绍如何使用 adaptive_navigation_widget 插件。

功能

• 可定制的断点
• 可定制的导航组件
• 易于与 GoRouter 等包集成

支持的导航类型

• 底部导航栏
• 抽屉
• 铁轨 / 扩展铁轨
• 永久抽屉

如果底部和铁轨导航的目标数量超过允许的数量，则会添加一个包含剩余目标的抽屉。

使用

使用示例在 /example/lib/main.dart 中展示。

示例代码

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

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

/// 一个非常基础的例子来展示 [AdaptiveNavigation] 的使用。
///
/// 它使用了 [IndexedStack] 来显示不同的屏幕。
class Example extends StatefulWidget {
  const Example({Key? key}) : super(key: key);

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

class _ExampleState extends State<Example> {
  int _index = 0;

  final List<AdaptiveDestination> destinations = [
    const AdaptiveDestination(
      initialPath: "/home",
      icon: Icon(Icons.home_outlined),
      selectedIcon: Icon(Icons.home),
      label: "Home",
    ),
    const AdaptiveDestination(
      initialPath: "/feed",
      icon: Icon(Icons.feed_outlined),
      selectedIcon: Icon(Icons.feed),
      label: "Feed",
    ),
    const AdaptiveDestination(
      initialPath: "/profile",
      icon: Icon(Icons.person_outlined),
      selectedIcon: Icon(Icons.person),
      label: "Profile",
    ),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.from(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.blueAccent,
          surfaceTint: Colors.transparent,
        ),
      ),
      home: Builder(builder: (context) {
        return AdaptiveNavigation(
          destinations: destinations,

          /// 设置较小的值以显示自动添加的抽屉。
          navigationBarOverflow: 2,
          railNavigationOverflow: 2,

          /// 使此小部件使用的支架成为主要支架。
          /// 如果没有 appBar，则应设置为 'false'。
          // primary: true, // 默认值。
          appBar: AppBar(
            title: Text(destinations[_index].label),

            /// 匹配铁轨的宽度。
            /// 这样按钮打开抽屉时可以与铁轨项对齐。
            leadingWidth: 80,
          ),
          navigationTypeResolver: (context) {
            final screenWidth = MediaQuery.of(context).size.width;
            if (screenWidth > 1280) {
              return NavigationType.permanentDrawer;
            } else if (screenWidth > 800) {
              return NavigationType.extendedRail;
            } else if (screenWidth > 600) {
              return NavigationType.rail;
            } else {
              return NavigationType.bottom;
            }
          },

          /// 更新索引以切换 [IndexedStack] 显示的内容。
          onDestinationChanged: (context, location, index) {
            setState(() {
              _index = index;
            });
          },
          child: IndexedStack(
            index: _index,
            children: const [
              Tab(
                title: "Home",
                content: "I am the home tab!",
              ),
              Tab(
                title: "Feed",
                content: "Here could be some feed!",
              ),
              Tab(
                title: "Profile",
                content: "This is me!",
              ),
            ],
          ),
        );
      }),
    );
  }
}

/// 简单的占位屏幕。
class Tab extends StatelessWidget {
  const Tab({
    required this.title,
    required this.content,
    Key? key,
  }) : super(key: key);

  final String title;
  final String content;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      /// 'false' 因为主框架使用了显示主要 appBar 的外层 Scaffold。
      primary: false,
      backgroundColor: Colors.blueAccent.withOpacity(0.3),
      body: Center(
        child: Text(content),
      ),
    );
  }
}

/// 展示如何访问 [AdaptiveNavigation] 使用的小部件的键以控制抽屉。
class OpenDrawerButton extends StatelessWidget {
  const OpenDrawerButton({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    final navigationScaffoldKeyProvider = NavigationScaffoldKeyProvider.maybeOf(context);

    if (navigationScaffoldKeyProvider?.scaffoldKey.currentState?.hasDrawer ?? false) {
      return IconButton(
        padding: EdgeInsets.zero,
        onPressed: () => navigationScaffoldKeyProvider?.scaffoldKey.currentState?.openDrawer(),
        icon: const Icon(Icons.menu),
      );
    } else {
      return const SizedBox(
        width: 0,
        height: 0,
      );
    }
  }
}