Flutter自定义导航插件custom_navigator的使用

Custom navigator

一个flutter包，它使得在小部件树中的任何地方创建自己的导航器变得容易。

一个常见的用途是在需要实现始终呈现底部导航栏时。

Getting Started

首先，你需要将该包添加到你的pubspec.yaml文件中。

Custom scaffold

CustomScaffold是一个使用CustomNavigator来处理带有嵌套导航的BottomNavigationBar项过渡的状态小部件，并保持BottomNavigationBar可见！

Usage

// 这里是自定义scaffold小部件
// 它接受一个普通的scaffold，其必要的底部导航栏和子页面
CustomScaffold(
      scaffold: Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          items: _items,
        ),
      ),

      // 子页面是每次点击时将显示的页面
      // 它们应该按顺序放置，例如
      // 当点击`BottomNavigationBar`中的`item 0`时，将显示`page 0`
      children: <Widget>[
        Page('0'),
        Page('1'),
        Page('2'),
      ],

      // 当点击其中一个`items`时调用
      onItemTap: (index) {},
    );

查看自定义scaffold示例以获取更多详细信息。

Custom navigator

CustomNavigator非常易于使用。

Usage

CustomNavigator(
        home: YourChildWidget(),
        // 指定您的页面路由 [PageRoutes.materialPageRoute] 或 [PageRoutes.cupertinoPageRoute]
        pageRoute: PageRoutes.materialPageRoute,
      );

然后你可以像往常一样使用Navigator.of(context)来调用它。

Options

• 您可以指定命名路由，就像在MaterialApp中一样。

  如果你想使用默认的Navigator，你需要为MaterialApp指定一个GlobalKey，并在外部使用navigatorKey.currentState。

查看示例以获取更多详细信息。

示例代码

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

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

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

// 给 Material App 提供一个 navigator key，如果你想在应用的任何地方访问默认导航器
GlobalKey<NavigatorState> mainNavigatorKey = GlobalKey<NavigatorState>();

class MyApp extends StatelessWidget {
  // 这个小部件是你的应用的根
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: mainNavigatorKey,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  Page _page = Page('Page 0');
  int _currentIndex = 0;

  // 自定义导航器需要一个全局 key，如果你想要从它的子树外部访问导航器
  GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: _items,
        onTap: (index) {
          // 这里我们使用导航器 key 来弹出堆栈，回到主页面
          navigatorKey.currentState.maybePop();
          setState(() => _page = Page('Page $index'));
          _currentIndex = index;
        },
        currentIndex: _currentIndex,
      ),
      body: CustomNavigator(
        navigatorKey: navigatorKey,
        home: _page,
        // 指定页面路由 [PageRoutes.materialPageRoute] 或 [PageRoutes.cupertinoPageRoute]
        pageRoute: PageRoutes.materialPageRoute,
      ),
    );
  }

  final _items = [
    BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('home')),
    BottomNavigationBarItem(icon: Icon(Icons.event), title: Text('events')),
    BottomNavigationBarItem(
        icon: Icon(Icons.save_alt), title: Text('downloads')),
  ];
}

class Page extends StatelessWidget {
  final String title;

  const Page(this.title) : assert(title != null);

  [@override](/user/override)
  Widget build(BuildContext context) {
    final text = Text(title);

    return Container(
      child: Center(
          child: FlatButton(
              onPressed: () => _openDetailsPage(context), child: text)),
    );
  }

  // 使用 .of(context) 方法像平常一样使用导航器
  _openDetailsPage(BuildContext context) => Navigator.of(context).push(
        MaterialPageRoute(builder: (context) => DetailsPage(title)),
      );
}

class DetailsPage extends StatelessWidget {
  final String title;

  const DetailsPage(this.title) : assert(title != null);

  [@override](/user/override)
  Widget build(BuildContext context) {
    final text = Text('Details of $title');
    return Container(
      child: Center(child: text),
    );
  }
}