快速交互

Quick Interact 是一个受 Instagram 快速发送功能启发的 Flutter 包。它提供了一个简单直观的 API，可以轻松创建交互式小部件，让您能够为任何小部件显示具有各种配置的快速交互。

特点

• 为任何小部件显示快速交互
• 通过各种配置自定义交互
• 易于使用并集成到任何 Flutter 项目中

安装

要使用此包，请将 quick_interact 添加到您的 pubspec.yaml 文件中的依赖项。

dependencies:
  quick_interact: ^latest_version

或者您也可以从命令行安装它

bash

flutter pub add quick_interact

用法

以下是使用 Quick Interact 的基本示例

Widget iconQuickReaction({required QuickInteractConfig config}) {
  return Center(
    child: QuickInteractions(
      quickInteractionWidgets: const [
        Icon(Icons.thumb_up),
        Icon(Icons.thumb_down),
        Icon(Icons.favorite),
        Icon(Icons.bookmark),
      ],
      onQuickInteractCompleted: (index) {
        print('Quick interaction selected: $index');
      },
      config: config,
      child: const Icon(Icons.send),
    ),
  );
}

示例用户头像用法

Widget userAvatarQuickReaction({required QuickInteractConfig config}) {
  return Center(
    child: QuickInteractions(
      quickInteractionWidgets: const [
        CircleAvatar(
          radius: 15,
          backgroundImage:
          NetworkImage('https://randomuser.me/api/portraits/men/1.jpg'),
        ),
        CircleAvatar(
          radius: 15,
          backgroundImage:
          NetworkImage('https://randomuser.me/api/portraits/women/2.jpg'),
        ),
        CircleAvatar(
          radius: 15,
          backgroundImage:
          NetworkImage('https://randomuser.me/api/portraits/men/3.jpg'),
        ),
        CircleAvatar(
          radius: 15,
          backgroundImage:
          NetworkImage('https://randomuser.me/api/portraits/women/4.jpg'),
        ),
      ],
      onQuickInteractCompleted: (index) {
        print('Quick interaction selected: $index');
      },
      animate: true,
      config: QuickInteractConfig(),
      showToolTipDelay: const Duration(milliseconds: 300),
      child: const Icon(Icons.send),
    ),
  );
}

API

QuickInteractions

QuickInteractions 是一个小部件，提供快速交互功能。它使用长按手势来触发一组快速交互小部件。

属性

• quickInteractionWidgets：用于快速交互的小部件列表。
• config：QuickInteractBuilder 和 QuickInteract 类的配置模型。
• onQuickInteractCompleted：完成快速交互时的回调函数。
• child：子小部件。
• onTap：点击小部件时的回调函数。
• toolTip：工具提示小部件。
• disable：禁用快速交互的标志。
• animate：启用快速交互动画的标志。
• showToolTipDelay：显示工具提示之前的延迟。

QuickInteractConfig

QuickInteractConfig 是 QuickInteractBuilder 和 QuickInteract 类的配置模型。它允许您自定义快速交互小部件的行为和外观。参数

• widgetSize：快速交互小部件容器的大小。默认为 35。

• widgetPadding：快速交互小部件之间的填充。默认为 4。

• transitionAnimationEndOffset：偏移动画的结束值。默认为 Offset(0, -1)。

• scaleAnimationEndScale：缩放动画的结束值。默认为 1.5。

• cursorAnimationDuration：光标动画的持续时间。默认为 Duration(milliseconds: 300)。

• containerColor：快速交互容器的颜色。无默认值。

• containerHeight：快速交互容器的高度。默认为 40。

• containerBorderRadius：快速交互容器的边框半径。默认为 BorderRadius.all( Radius.circular(30))。

• containerAnimationDuration：容器动画的持续时间。默认为 Duration(milliseconds: 300)。

• containerAnimationCurve：容器动画的曲线。默认为 Curves.linearToEaseOut。

• widgetAnimationCurve：小部件动画的曲线。默认为 Curves.linearToEaseOut。

• elevation：快速交互容器的阴影。默认为 5。命名构造函数

• QuickInteractConfig()：创建一个具有默认值的 QuickInteractConfig 新实例。

• QuickInteractConfig.onlyTransition()：创建一个具有仅过渡偏移量 -2 的 QuickInteractConfig 新实例。默认阴影设置为 5。

• QuickInteractConfig.onlyScale()：创建一个具有仅缩放比例 2 的 QuickInteractConfig 新实例。默认阴影设置为 5。

示例

您可以在 example main.dart 中找到更多示例和不同的用法。

即将推出的功能

• 在安全区域显示快速交互
• 提供一个构建器构造函数，以便在激活时根据布尔值更改状态
• 有关更多信息，请参阅 API 文档。

GitHub

查看 Github