Flutter底部导航插件tn_bottom_sheet_navigator的使用

Flutter底部导航插件tn_bottom_sheet_navigator的使用

TnBottomSheetNavigator 是一个允许Flutter应用程序在模态底部导航栏中进行内部导航的插件，其高度可以根据内容进行调整。

平台支持

要求

• Flutter >=3.3.0
• Dart >=2.18.0 <4.0.0

使用方法

初始化

你需要在主文件中初始化将在模态底部导航栏中使用的路由，必须在runApp执行之前完成。

// 定义底部导航栏的路由
final bottomSheetRoutes = [
    TnBottomSheetRoute(
        path: 'signin',
        builder: (context, params) => const SignInPage(),
    ),
    TnBottomSheetRoute(
        path: 'signup',
        builder: (context, params) => const SignUpPage(),
    ),
    TnBottomSheetRoute(
        path: 'forgot-password',
        builder: (context, params) => ForgotPasswordPage(
            email: params['email'],
        ),
    ),
];

void main() {
    // 设置路由
    TnRouter()..setRoutes(bottomSheetRoutes);
    runApp(app); // 启动应用
}

显示模态底部导航栏

一旦你设置了将要被模态底部导航栏消费的路由，你就可以打开底部导航栏。

// 打开底部导航栏的方法
void _onOpenBottomNav(BuildContext context) {
    showTnBottomSheetNavigator(context, initialPath: 'signin');
}

// 或者使用BuildContext扩展
void _onOpenBottomNav(BuildContext context) {
    context.showTnBottomSheetNav('signin');
}

这将打开具有默认设置（TnBottomSheetSettings）和没有参数的初始路径的模态底部导航栏。

// TnBottomSheetSettings 的选项
TnBottomSheetSettings(
    bool isDismisable = false,
    bool isScrollControlled = true,
    bool useRootNavigator = true,
    BoxConstraints? constraints,
)

导航

在页面内可以使用以下方法进行内部导航：

// 添加新路由到堆栈
context.tnPush('signup');

// 清除导航堆栈
context.tnGo('signup');

// 移除最后的路由
context.tnPop();

带参数的导航

你可以通过传递参数来导航：

// 推送带参数的路由
context.tnPush('forgot-password', params: { 'email': 'test@email.com' });

// 在初始路径上打开底部导航栏并传入参数
context.showTnBottomSheetNav('forgot-password', params: { 'email': 'test@email.com' });

TnBottomSheetScaffold

你可以使用自定义的scaffold来实现隐式导航控制：

return TnBottomSheetScaffold(
    appBar: TnBottomSheetAppBar(title: 'Sign in'),
    child: Container(...),
);

TnBottomSheetAppBar 可以自定义如下属性：

TnBottomSheetAppBar(
    title: // 标题字符串
    customTitle: // 自定义标题组件（如果需要更复杂的标题而不是简单的字符串）。如果传递了字符串标题，则不会显示customTitle
    showCloseIcon: // 控制是否显示关闭图标（此图标可以关闭底部导航栏，不管dismissable值如何）
    theme: // TnBottomSheetAppBarTheme 来自定义一些元素的样式
)

// TnBottomSheetAppBarTheme 的可定制属性
TnBottomSheetAppBarTheme(
    closeIconSize: // 关闭图标的大小
    titleTextTyle: // 字符串标题的文本样式
    padding: // TnBottomSheetAppBar 的填充
)

自定义实现 (TnNavigatorBuilder)

如果你需要在对话框或其他地方进行导航，可以使用TnNavigatorBuilder：

TnNavigatorBuilder(
    initialPath: 'signin',
    params: {"key": "param"},
),

// 在对话框中使用
showDialog(
    context: context,
    builder: (context) => const AlertDialog(
        content: Material(
            color: Colors.transparent, // 避免对话框背景出现奇怪的外观
            child: TnNavigatorBuilder(initialPath: 'signin'),
        ),
    ),
);

// 在Cupertino对话框中使用
showCupertinoDialog(
    context: context,
    builder: (context) => const CupertinoAlertDialog(
        content: Material(
            color: Colors.transparent, // 避免对话框背景出现奇怪的外观
            child: TnNavigatorBuilder(initialPath: 'signin'),
        ),
    ),
);

完整示例Demo

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:tn_bottom_sheet_navigator/tn_bottom_sheet_navigator.dart';

import 'bottom_sheet_pages/forgot_password_page.dart';
import 'bottom_sheet_pages/signin_page.dart';
import 'bottom_sheet_pages/signup_page.dart';

void main() {
  // 设置路由
  TnRouter().setRoutes([
    TnBottomSheetRoute(
      path: 'forgot-password',
      builder: (context, params) => ForgotPasswordPage(
        email: params['email'],
      ),
    ),
    TnBottomSheetRoute(
      path: 'signin',
      builder: (_, __) => SignInPage(),
    ),
    TnBottomSheetRoute(
      path: 'signup',
      builder: (_, __) => const SignUpPage(),
    ),
  ]);
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TnBottomSheetNavigator Sample',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
        primaryColor: Colors.lightBlue,
      ),
      home: const AppContent(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('TnBottomSheetNavigator')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              child: const Text('Open Bottom Sheet Navigator'),
              onPressed: () => context.showTnBottomSheetNav(
                'signin',
                settings: const TnBottomSheetSettings(
                  isDismisable: true,
                ),
              ),
            ),
            const SizedBox(height: 20),
            const Text('Custom Implementations',
                style: TextStyle(
                  fontSize: 20,
                )),
            const SizedBox(height: 20),
            ElevatedButton(
              child: const Text('Cupertino Dialog'),
              onPressed: () => showCupertinoDialog(
                context: context,
                builder: (context) => const CupertinoAlertDialog(
                  content: Material(
                    color: Colors
                        .transparent, // 避免对话框背景出现奇怪的外观
                    child: TnNavigatorBuilder(initialPath: 'signin'),
                  ),
                ),
              ),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              child: const Text('Dialog'),
              onPressed: () => showDialog(
                context: context,
                builder: (context) => const AlertDialog(
                  content: Material(
                    color: Colors
                        .transparent, // 避免对话框背景出现奇怪的外观
                    child: TnNavigatorBuilder(initialPath: 'signin'),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}