Flutter底部弹出菜单插件flutter_cupernino_bottom_sheet的使用

Flutter底部弹出菜单插件flutter_cupernino_bottom_sheet的使用

介绍

Flutter中的flutter_cupernino_bottom_sheet插件可以非常容易地模仿Cupertino风格的底部弹出菜单。这个插件不需要使用特定的Scaffold，可以从任何地方和任何时间使用。

Apr-20-2023 11-43-53

工作原理

该插件内部使用了重绘边界（repaint boundary）来创建整个屏幕的截图，并将其转换为RawImage。因此，无论之前的路由是否保持其状态，都不重要。它不需要知道任何关于之前路由的信息，因为它使用的是截图而不是Widget快照。

开始使用

  1. 导入包到你的应用程序初始化文件中：
import 'package:flutter_cupernino_bottom_sheet/flutter_cupernino_bottom_sheet.dart';
  1. 将你的MaterialApp或其它类型的组件用CupertinoBottomSheetRepaintBoundary包裹起来：
void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return CupertinoBottomSheetRepaintBoundary(
      child: MaterialApp(
        // 这里可以添加其他配置
        title: 'Flutter Cupertino Bottom Sheet',
        theme: ThemeData(
          primarySwatch: Colors.red,
        ),
        home: const TestPage(),
      ),
    );
  }
}

这将为库提供必要的RenderRepaintBoundary以正常工作。

  1. 使用Navigator推送一个路由：
Navigator.of(context).push(
    CupertinoBottomSheetRoute(
        args: const CupertinoBottomSheetRouteArgs(
            swipeSettings: SwipeSettings(
            canCloseBySwipe: true, // 是否可以通过滑动关闭
            ),
        ),
        builder: (context) {
            return const TestPage(); // 自定义页面内容
        },
    ),
);

简化代码

如果你希望减少代码量，你可以通过以下方式实现：

  1. 在应用初始化时传递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(),
    ),
  );
}
  1. 然后可以在任何地方调用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, // 关闭操作
      ),
    ),
});

示例代码

以下是完整的示例代码，展示了如何在Flutter项目中使用flutter_cupernino_bottom_sheet插件：

// example/lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_cupernino_bottom_sheet/flutter_cupernino_bottom_sheet.dart';

import 'test_page.dart'; // 假设你有一个TestPage用于展示底部弹出菜单的内容

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(), // 初始页面
      ),
    );
  }
}

更多关于Flutter底部弹出菜单插件flutter_cupernino_bottom_sheet的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter底部弹出菜单插件flutter_cupernino_bottom_sheet的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用 flutter_cupertino_bottom_sheet 插件在 Flutter 中实现底部弹出菜单的示例代码。flutter_cupertino_bottom_sheet 是一个模仿 iOS 风格的底部弹出菜单的 Flutter 插件。不过需要注意的是，标准 Flutter 库已经包含了 showBottomSheet 和 showCupertinoBottomSheet 方法，它们也可以用来实现类似的功能。但既然你指定了 flutter_cupertino_bottom_sheet 插件，我将基于此插件进行说明（尽管这个插件的具体实现可能有所变化，且官方 Flutter 库的方法通常是推荐的方式）。

首先，你需要在你的 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_cupertino_bottom_sheet: ^^最新版本号（请替换为实际版本号）

然后运行 flutter pub get 来获取依赖。

以下是一个简单的使用示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Cupertino Bottom Sheet Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () => _showBottomSheet(context),
            child: Text('Show Bottom Sheet'),
          ),
        ),
      ),
    );
  }

  void _showBottomSheet(BuildContext context) {
    showCupertinoBottomSheet(
      context: context,
      builder: (context) {
        return Container(
          color: Colors.white,
          child: CupertinoPicker(
            scrollController: FixedExtentScrollController(initialItem: 0),
            itemExtent: 30.0,
            onSelectedItemChanged: (int index) {
              // 处理选中项变化
              print('Selected item: $index');
            },
            children: List.generate(20, (index) {
              return Center(
                child: Text(
                  'Item $index',
                  style: TextStyle(fontSize: 20),
                ),
              );
            }),
          ),
        );
      },
    );
  }
}

在这个示例中，我们创建了一个简单的 Flutter 应用，其中包含一个按钮。点击按钮时，将显示一个底部弹出菜单（Cupertino 风格的）。这个弹出菜单包含一个 CupertinoPicker，它是一个类似于 iOS 滚轮选择器的组件。

注意：flutter_cupertino_bottom_sheet 插件的具体 API 可能会随着版本的更新而变化，上述代码示例是基于假设的插件使用方式。如果你发现 flutter_cupertino_bottom_sheet 插件的 API 与上述代码不匹配，请查阅该插件的最新文档或源代码以获取正确的使用方法。

另外，如果你只是想要一个简单的底部弹出菜单，并不特定于 Cupertino 风格，Flutter 自带的 showBottomSheet 方法可能是一个更简单且更推荐的选择。以下是一个使用 showBottomSheet 的示例：

void _showFlutterBottomSheet(BuildContext context) {
  showBottomSheet(
    context: context,
    builder: (context) {
      return Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.add),
              title: Text('Add'),
              onTap: () {
                Navigator.pop(context);
                // 处理添加操作
              },
            ),
            ListTile(
              leading: Icon(Icons.edit),
              title: Text('Edit'),
              onTap: () {
                Navigator.pop(context);
                // 处理编辑操作
              },
            ),
            // 更多选项...
          ],
        ),
      );
    },
  );
}

这个示例使用了 Flutter 自带的 showBottomSheet 方法来显示一个包含多个选项的底部弹出菜单。

回到顶部