Flutter Cupertino风格底部弹出菜单插件flutter_cupertino_bottom_sheet的使用

一个轻松模仿Cupertino底部弹出菜单的插件

不像其他现有的插件需要复杂的设置，flutter_cupertino_bottom_sheet 不需要 Scaffold 来实现这一功能。你可以在任何地方和任何时候使用它。你只需在应用初始化时用 CupertinoBottomSheetRepaintBoundary() 包裹你的 MaterialApp 即可。就这么简单，甚至不需要特定的上下文。

它是如何工作的

非常简单。它内部使用了一个重绘边界来创建整个屏幕的截图，并将其转换为 RawImage。因此，即使之前的路由保持其状态，这也不重要。它不需要知道任何关于之前路由的信息，因为它使用的是截图而不是小部件快照。

开始使用

首先，在你的应用初始化代码中导入该包：

import 'package:flutter_cupertino_bottom_sheet/flutter_cupertino_bottom_sheet.dart';

然后，将 CupertinoBottomSheetRepaintBoundary() 包裹到你的 MaterialApp 或其他类型的根组件中：

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return CupertinoBottomSheetRepaintBoundary(
      child: MaterialApp(
        navigatorKey: cupertinoBottomSheetNavigatorKey,
        title: 'Flutter Cupertino Bottom Sheet',
        theme: ThemeData(
          primarySwatch: Colors.red,
        ),
        home: const TestPage(),
      ),
    );
  }
}

这样可以为库提供必要的 RenderRepaintBoundary。

接下来，你可以使用 Navigator 推送这个路由：

Navigator.of(context).push(
    CupertinoBottomSheetRoute(
        args: const CupertinoBottomSheetRouteArgs(
            swipeSettings: SwipeSettings(
            canCloseBySwipe: true,
            ),
        ),
        builder: (context) {
            return const TestPage();
        },
    ),
);

想要更少的代码？没问题！

你可以传递一个 cupertinoBottomSheetNavigatorKey 到你的应用初始化中：

[@override](/user/override)
Widget build(BuildContext context) {
  return CupertinoBottomSheetRepaintBoundary(
    child: MaterialApp(
      navigatorKey: cupertinoBottomSheetNavigatorKey,
      title: 'Flutter Cupertino Bottom Sheet',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: const TestPage(),
    ),
  );
}

然后，你可以从任何地方调用 openCupertinoBottomSheet()，而无需关心上下文：

openCupertinoBottomSheet(builder: (c) {
    return const TestPage();
    args: CupertinoBottomSheetRouteArgs(
      appBar: CupertinoBottomSheetAppBar.withCloseButton(
        title: 'Cupertino Actionsheet',
        buttonText: 'Done',
        headerStyle: Theme.of(context).textTheme.bodyMedium,
        onClosePressed: Navigator.of(context).pop,
      ),
    ),
});

示例代码

以下是一个完整的示例代码：

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

import 'test_page.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return CupertinoBottomSheetRepaintBoundary(
      child: MaterialApp(
        navigatorKey: cupertinoBottomSheetNavigatorKey,
        title: 'Flutter Cupertino Bottom Sheet',
        theme: ThemeData(
          primarySwatch: Colors.red,
        ),
        home: const TestPage(),
      ),
    );
  }
}