Flutter下拉按钮插件kr_pull_down_button的使用

Flutter下拉按钮插件kr_pull_down_button的使用

pull_down_button 是一个用于在 Flutter 应用程序中实现类似于 iOS 14 的下拉菜单按钮的插件。它允许你更好地自定义按钮来展示下拉菜单，并提供了多种定制选项。

Flutter可用性

由于该插件使用了新的 Flutter 特性 ThemeExtension 进行主题化，因此最低支持版本为稳定的 3.0.0。

目录

PullDownButton

PullDownButton 是一个用于展示下拉菜单的部件。与 PopupMenuButton 不同的是，PullDownButton 允许你通过 buttonBuilder 构建函数来自定义按钮。

当打开下拉菜单时，调用此菜单的按钮将具有较低的不透明度。

PullDownButton(
  itemBuilder: (context) => [
    PullDownMenuItem(
      title: 'Menu item',
      onTap: () {},
    ),
    const PullDownMenuDivider(),
    PullDownMenuItem(
      title: 'Menu item 2',
      onTap: () {},
    ),
  ],
  position: PullDownMenuPosition.under,
  buttonBuilder: (context, showMenu) => CupertinoButton(
    onPressed: showMenu,
    padding: EdgeInsets.zero,
    child: const Icon(CupertinoIcons.ellipsis_circle),
  ),
);

属性表

属性 描述
itemBuilder 当按钮被按下时调用以创建要在菜单中显示的项目。
buttonBuilder 提供 BuildContext 和 showMenu 函数以传递给任何自定义按钮小部件。
onCanceled 当用户取消下拉菜单时调用。
offset 偏移量相对于 position 初始位置设置。
position 下拉菜单的位置（在按钮上方、覆盖或下方）。
itemsOrder 是否从 itemBuilder 中按向上或向下的方式对下拉菜单进行排序。
routeTheme 下拉菜单框的主题。
applyOpacity 是否在下拉菜单打开时应用 buttonBuilder 的不透明度。

PullDownMenuPosition

PullDownButton 定位其下拉菜单的方式。

可用选项：

  • over - 菜单位于锚点之上。会尝试填充尽可能多的空间；
  • under - 菜单位于锚点之下并且强制位于锚点之下；
  • above - 菜单位于锚点之上并且始终位于锚点之上；
  • automatic - 菜单根据空间更充裕的一侧定位在锚点之下或之上。

PullDownMenuItem

PullDownMenuItem 是一个用于创建类似 iOS 14 的下拉菜单项的小部件。

PullDownMenuItem(
  title: 'Add to favourites',
  onTap: () {},
  icon: CupertinoIcons.star,
),

属性表

属性 描述
onTap 此项代表的动作。
tapHandler 处理如何使用 onTap 回调。
enabled 用户是否可以点击此项目。
title 此 PullDownMenuItem 的标题。
icon 此 PullDownMenuItem 的尾随图标。
iconColor 尾随图标的颜色。
iconWidget 自定义尾随部件。
isDestructive 是否表示破坏性操作。
itemTheme 菜单项的主题。

PullDownMenuItem.selectable

PullDownMenuItem.selectable 是一个用于创建带有选择状态的类似 iOS 14 的下拉菜单项的小部件。

PullDownMenuItem.selectable(
  title: 'Grid',
  selected: true,
  onTap: () {},
  icon: CupertinoIcons.square_grid_2x2,
),

注意： 基于指南，如果菜单项包含至少一个类型为 PullDownMenuItem.selectable 的可点击菜单项，则所有 PullDownMenuItem 都应为类型 PullDownMenuItem.selectable（以插入额外的间距使所有项目相同）。尽管如此，手动更改所有 PullDownMenuItem 并不是必需的，它是自动完成的。

属性表

PullDownMenuItem.selectable 使用所有 PullDownMenuItem 的属性以及一个布尔值 selected，指示菜单项是否被选中。

PullDownMenuActionsRow

PullDownMenuActionsRow 是一个用于创建类似 iOS 14 的下拉菜单行的动作部件（小或中等大小）。

PullDownMenuActionsRow.medium(
  items: [
    PullDownMenuItem(
      enabled: false,
      onTap: () {},
      title: 'Inbox',
      icon: CupertinoIcons.tray_arrow_down,
    ),
    PullDownMenuItem(
      onTap: () {},
      title: 'Archive',
      icon: CupertinoIcons.archivebox,
    ),
    PullDownMenuItem(
      onTap: () {},
      title: 'Trash',
      isDestructive: true,
      icon: CupertinoIcons.delete,
    ),
  ],
),

PullDownMenuItem 用于填充 PullDownMenuActionsRow.items。 根据 PullDownMenuActionsRow 的大小，可能是仅图标或图标和标题的垂直数组。

属性表

属性 描述
items PullDownMenuItem 列表。
dividerColor 垂直分割线的颜色。

PullDownMenuDivider

PullDownMenuDivider 是一个用于创建类似 iOS 14 的下拉菜单分隔符（小或大）的小部件。

const PullDownMenuDivider(),

或者创建大的分隔符：

const PullDownMenuDivider.large(),

还有一个方便的方法来用小分隔符包装多个菜单项：

...PullDownMenuDivider.wrapWithDivider([
  PullDownMenuItem(
    enabled: false,
    title: 'Select',
    onTap: () {},
    icon: CupertinoIcons.checkmark_circle,
  ),
  PullDownMenuItem(
    title: 'Connect to remote server',
    onTap: () {},
    icon: CupertinoIcons.cloud_upload,
  ),
]),

PullDownMenuTitle

PullDownMenuTitle 是一个用于创建类似 iOS 14 的下拉菜单标题（通常位于菜单顶部）的小部件。

const PullDownMenuTitle(title: Text('Menu title')),

属性表

属性 描述
title 标题小部件。
titleStyle 标题小部件文本样式。

showPullDownMenu

一种通过函数调用显示下拉菜单的替代方法。

onPressed: () async {
  /* 获取点击位置并在打开菜单前执行某些操作 */

  await showPullDownMenu(
    context: context,
    items: [...],
    position: position,
  );
}

属性表

属性 描述
context 查找 Navigator 以显示菜单。
items PullDownMenuEntry 小部件列表。
position 用于将菜单顶部与位置矩形顶部对齐的 RelativeRect。
buttonSize 用于让菜单知道计算最终菜单位置时要使用的底部偏移量。
menuPosition 是否将弹出菜单定位在计算出的菜单位置之上、覆盖或下方。
itemsOrder 是否从 itemBuilder 按向下或向上的方式对弹出菜单进行排序。
onCanceled 当用户取消下拉菜单时调用。
routeTheme 下拉菜单框的主题。

PullDownMenu

另一种显示下拉菜单的替代方法，作为一个简单的部件，没有动画或添加到导航堆栈。

PullDownMenu(
  items: [
    PullDownMenuItem(
      title: 'Menu item',
      onTap: () {},
    ),
    const PullDownMenuDivider(),
    PullDownMenuItem(
      title: 'Menu item 2',
      onTap: () {},
    ),
  ]
)

属性表

属性 描述
items PullDownMenuEntry 小部件列表。
routeTheme 下拉菜单框的主题。

Theming

该包还提供了额外的自定义。默认情况下，使用 iOS16 主题，但也可以使用 PullDownButtonTheme 主题扩展来覆盖默认设置。

默认主题

Light Theme Dark Theme

PullDownButtonTheme

要使用 PullDownButtonTheme，请在你的 ThemeData 中定义它如下所示：

ThemeData(
  ...,
  extensions: [
    PullDownButtonTheme(
      routeTheme: PullDownMenuRouteTheme(
        backgroundColor: Colors.grey,
      ),
      itemTheme: PullDownMenuItemTheme(
        iconSize: 24,
      ),
      dividerTheme: PullDownMenuDividerTheme(
        dividerColor: Colors.black,
      ),
    ),
  ],
),

PullDownButtonTheme 使用一组子主题（用于项目、分隔符、菜单本身等）来定义所需的主题。以下是每个子主题提供的每个属性。

PullDownButtonTheme

属性 描述
routeTheme 菜单容器主题 (PullDownMenuRouteTheme)。
itemTheme PullDownMenuItem 主题 (PullDownMenuItemTheme)。
dividerTheme PullDownMenuDivider 主题 (PullDownMenuDividerTheme)。
titleTheme PullDownMenuTitle 主题 (PullDownMenuTitleTheme)。
applyOpacity 是否在下拉菜单打开时应用 PullDownButton.buttonBuilder 的不透明度。

PullDownMenuRouteTheme

属性 描述
backgroundColor 下拉菜单的背景色。
borderRadius 下拉菜单的边框半径。
beginShadow 菜单打开时的阴影。
endShadow 菜单完全打开时的阴影。
width 下拉菜单宽度。

背景色通常具有 0.7-0.8 之间的不透明度，以便菜单具有模糊效果。如果背景色的不透明度设置为 1，则不会应用模糊效果。

PullDownMenuItemTheme

属性 描述
destructiveColor 破坏性操作的颜色。
iconSize 尾随图标的大小。
checkmark 对勾图标。
checkmarkWeight 对勾图标的权重。
checkmarkSize 对勾图标的大小。
textStyle PullDownMenuItem 文本样式。
iconActionTextStyle PullDownMenuItem 文本样式在 PullDownMenuActionsRow 中。
onHoverColor PullDownMenuItem 的悬停颜色。
onHoverTextStyle PullDownMenuItem 的悬停文本样式。

PullDownMenuDividerTheme

属性 描述
dividerColor 小分隔线的颜色。
largeDividerColor 大分隔线的颜色。

大分隔线的颜色通常比小分隔线的颜色浅。

PullDownMenuTitleTheme

属性 描述
style PullDownMenuTitle 文本样式。

PullDownButtonInheritedTheme

如果无法在 ThemeData 中定义 PullDownButtonTheme，例如当你正在使用 CupertinoApp 时，你可以使用 PullDownButtonInheritedTheme：

CupertinoApp(
  builder: (context, child) => PullDownButtonInheritedTheme(
    data: const PullDownButtonTheme(
      ...
    ),
    child: child!,
  ),
  home: ...,
)

更多关于Flutter下拉按钮插件kr_pull_down_button的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter下拉按钮插件kr_pull_down_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是关于如何在Flutter项目中使用kr_pull_down_button插件的一个示例代码案例。这个插件允许你实现一个下拉按钮效果，用户可以通过下拉动作来触发某些操作。

首先，确保你已经在pubspec.yaml文件中添加了kr_pull_down_button依赖：

dependencies:
  flutter:
    sdk: flutter
  kr_pull_down_button: ^最新版本号  # 替换为实际的最新版本号

然后，运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter项目中这样使用kr_pull_down_button：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isPulledDown = false;

  void _onPullDown() {
    setState(() {
      _isPulledDown = !_isPulledDown;
      // 在这里添加你的下拉动作逻辑，比如刷新数据等
      print("Pull down action triggered!");
    });

    // 模拟一个延时操作，比如数据加载
    Future.delayed(Duration(seconds: 1), () {
      setState(() {
        _isPulledDown = false; // 假设操作完成后恢复状态
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('kr_pull_down_button Demo'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: PullDownButton(
              onPullDown: _onPullDown,
              child: _isPulledDown
                  ? Center(child: CircularProgressIndicator())
                  : ListView.builder(
                      itemCount: 20,
                      itemBuilder: (context, index) {
                        return ListTile(
                          title: Text('Item $index'),
                        );
                      },
                    ),
            ),
          ),
        ],
      ),
    );
  }
}

在这个示例中：

  1. 我们首先添加了kr_pull_down_button依赖。
  2. 创建了一个简单的Flutter应用，其中包含一个PullDownButton。
  3. PullDownButton的onPullDown回调函数中，我们设置了一个布尔值_isPulledDown来跟踪下拉状态，并在控制台中打印一条消息。
  4. 根据_isPulledDown的值，我们显示一个加载指示器或者一个列表。
  5. 模拟了一个数据加载的延时操作，并在操作完成后恢复按钮状态。

这个示例提供了一个基本的使用方式，你可以根据自己的需求进一步自定义和扩展。

回到顶部