Flutter下拉按钮功能插件pull_down_button的使用

简介

pull_down_button 是一个Flutter插件，它旨在将iOS 14+中的弹出（Pop-Up）和下拉（Pull-Down）按钮引入到Flutter中，并提供了一些额外的自定义选项。通过这个插件，开发者可以在Flutter应用中实现类似iOS风格的下拉菜单。

插件特性

• 视觉上复刻iOS风格的下拉按钮。
• 支持多种类型的菜单项，如普通菜单项、可选菜单项、操作行等。
• 提供分隔线、标题和头部组件以丰富菜单内容。
• 支持主题定制，包括颜色、样式等。
• 可以通过函数或Widget方式展示下拉菜单。

安装

在pubspec.yaml文件中添加依赖：

dependencies:
  pull_down_button: ^最新版本号

然后运行flutter pub get来安装插件。

使用示例

下面是一个完整的示例代码，展示了如何使用pull_down_button创建一个带有下拉菜单的消息框：

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

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

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

  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: Scaffold(
        body: Example(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final edgeInsets = MediaQuery.of(context).padding;
    final padding = EdgeInsets.only(
      left: 16 + edgeInsets.left,
      top: 24 + edgeInsets.top,
      right: 16 + edgeInsets.right,
      bottom: 24 + edgeInsets.bottom,
    );

    return ListView.separated(
      padding: padding,
      reverse: true,
      itemBuilder: (context, index) {
        final isSender = index.isEven;

        return Align(
          alignment: isSender ? Alignment.centerRight : Alignment.centerLeft,
          child: ExampleMenu(
            builder: (_, showMenu) => CupertinoButton(
              onPressed: showMenu,
              padding: EdgeInsets.zero,
              pressedOpacity: 1,
              child: _MessageExample(isSender: isSender),
            ),
          ),
        );
      },
      separatorBuilder: (_, __) => const SizedBox(height: 16),
      itemCount: 20,
    );
  }
}

class ExampleMenu extends StatelessWidget {
  const ExampleMenu({
    super.key,
    required this.builder,
  });

  final PullDownMenuButtonBuilder builder;

  @override
  Widget build(BuildContext context) => PullDownButton(
        itemBuilder: (context) => [
          PullDownMenuHeader(
            leading: ColoredBox(
              color: CupertinoColors.systemBlue.resolveFrom(context),
            ),
            title: 'Profile',
            subtitle: 'Tap to open',
            onTap: () {},
            icon: CupertinoIcons.profile_circled,
          ),
          const PullDownMenuDivider.large(),
          PullDownMenuActionsRow.medium(
            items: [
              PullDownMenuItem(
                onTap: () {},
                title: 'Reply',
                icon: CupertinoIcons.arrowshape_turn_up_left,
              ),
              PullDownMenuItem(
                onTap: () {},
                title: 'Copy',
                icon: CupertinoIcons.doc_on_doc,
              ),
              PullDownMenuItem(
                onTap: () {},
                title: 'Edit',
                icon: CupertinoIcons.pencil,
              ),
            ],
          ),
          const PullDownMenuDivider.large(),
          PullDownMenuItem(
            onTap: () {},
            title: 'Pin',
            icon: CupertinoIcons.pin,
          ),
          PullDownMenuItem(
            title: 'Forward',
            subtitle: 'Share in different channel',
            onTap: () {},
            icon: CupertinoIcons.arrowshape_turn_up_right,
          ),
          PullDownMenuItem(
            onTap: () {},
            title: 'Delete',
            isDestructive: true,
            icon: CupertinoIcons.delete,
          ),
          const PullDownMenuDivider.large(),
          PullDownMenuItem(
            title: 'Select',
            onTap: () {},
            icon: CupertinoIcons.checkmark_circle,
          ),
        ],
        animationBuilder: null,
        position: PullDownMenuPosition.automatic,
        buttonBuilder: builder,
      );
}

class _MessageExample extends StatelessWidget {
  const _MessageExample({
    required this.isSender,
  });

  final bool isSender;

  @override
  Widget build(BuildContext context) => SizedBox(
        width: 267,
        child: Material(
          color: isSender
              ? CupertinoColors.systemBlue.resolveFrom(context)
              : CupertinoColors.systemFill.resolveFrom(context),
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(18)),
          ),
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
            child: Text(
              isSender
                  ? 'How’s next Tuesday? Can’t wait to see you! 🤗'
                  : 'Let’s get lunch! When works for you? 😋',
              style: TextStyle(
                fontSize: 17,
                height: 22 / 17,
                letterSpacing: -0.41,
                fontFamily: '.SF Pro Text',
                color: isSender
                    ? CupertinoColors.label.darkColor
                    : CupertinoColors.label.resolveFrom(context),
              ),
            ),
          ),
        ),
      );
}

关键点解释

• PullDownButton：用于显示下拉菜单的主要组件。
• itemBuilder：定义菜单项的内容，可以包含各种类型的菜单项，如PullDownMenuItem、PullDownMenuDivider等。
• buttonBuilder：用于构建触发下拉菜单的按钮，这里使用了CupertinoButton作为按钮。
• PullDownMenuHeader：用于在菜单顶部添加标题和图标。
• PullDownMenuActionsRow：用于创建一行多个操作按钮。
• PullDownMenuItem：表示单个菜单项，支持设置点击事件、图标等属性。

通过这些组件，你可以轻松地在Flutter项目中实现类似于iOS风格的下拉菜单。希望这个示例能够帮助你快速上手并集成pull_down_button到你的项目中！