Flutter自定义顶部导航插件custom_top_navigator_plus的使用

Flutter自定义顶部导航插件custom_top_navigator_plus的使用

一个Flutter包，用于在widget树中的任何位置轻松创建自己的导航器。

一个常见的用途是当你需要实现一个始终显示的底部导航栏时。

开始使用

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

自定义支架

CustomScaffold是一个状态fulWidget，它使用CustomTopNavigator来处理带有嵌套导航的底部导航栏项目过渡，并保持底部导航栏的可见！

使用方法

// 这里是自定义支架小部件
// 它接受一个带有必需底部导航栏的正常支架和子项，这些子项是你的页面
CustomScaffold(
      scaffold: Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          items: _items,
        ),
      ),

      // 子项是你点击时将要显示的页面。
      // 他们应该按顺序放置，例如
      // 当点击底部导航栏中的`item 0`时，`page 0`将会被展示。
      children: <Widget>[
        Page('0'),
        Page('1'),
        Page('2'),
      ],

      // 当一个[items]被点击时调用。
      onItemTap: (index) {},
    );

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

自定义顶部导航器

CustomTopNavigator的使用相当简单。

使用方法

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

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

选项

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

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

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

完整示例代码

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

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

// 如果你想在整个应用中使用默认导航器，请给[MaterialApp]一个导航器键
// 例如：行15 和 行93
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, required 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;

  // 自定义导航器如果需要从其小部件树子树外部访问导航器，则需要一个全局键
  GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

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

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

class Page extends StatelessWidget {
  final String title;

  const Page(this.title);

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

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

  // 使用常规的 .of(context) 方法来使用导航器
  _openDetailsPage(BuildContext context) => Navigator.of(context)
      .push(MaterialPageRoute(builder: (context) => DetailsPage(title)));

//  _openDetailsPage(BuildContext context) => mainNavigatorKey.currentState.push(MaterialPageRoute(builder: (context) => DetailsPage(title)));
}

class DetailsPage extends StatelessWidget {
  final String title;

  const DetailsPage(this.title);

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