? Flutter 提及

一个简单的 Flutter 输入小部件，可为您的应用添加 @ 提及功能

安装 ?

要使用此软件包，请将 flutter_mentions 添加为 pubspec.yaml 文件中的依赖项。

您需要将 flutter_mentions 添加到您的 pubspec.yaml 中

dependencies:
  flutter:
    sdk: flutter
  flutter_mentions:

然后，在终端中运行 flutter packages get。

用法 ?

要使用此软件包，您必须首先将最顶层的小部件用 Portal 包裹起来，因为此软件包使用 flutter_portal 来显示建议列表。

[Portal] 是 [Overlay] 的等价物。

此小部件需要插入到需要渲染在您的叠加层下方的小部件之上。

如果您想将叠加层显示在所有内容的顶部，一个放置 [Portal] 的好地方是在 MaterialApp 的上方

Portal(
  child: MaterialApp(
    ...
  )
);

(也适用于 CupertinoApp)

这样，[Portal] 将渲染在所有内容的顶部。但您也可以将其放置在其他位置以更改剪裁行为。

小部件

FlutterMention

  • mentions: List<Mention> – 用户可以触发的 Mention 列表。
  • suggestionPosition: SuggestionPosition – 建议模态框的位置，可以对齐到 [Top] 或 [Bottom]。
  • onMentionAdd: Function(Map<String, dynamic>) – 在通过点击建议添加建议时触发。
  • suggestionListHeight: double – 建议列表的最大高度。默认为 300.0。
  • onMarkupChanged: Function(String) – 当输入发生变化时触发的函数，但带有所选提及的标记。
  • suggestionListDecoration: BoxDecoration – 建议列表的装饰。
  • defaultText: String – 使用预填充的文本填充您的输入字段。
  • onSearchChange: Function(String trigger, String value) – 仅在输入更改并且用户正在搜索提及项时触发。
  • leading: List<Widget> – 应放置在输入之前的控件列表。
  • trailing: List<Widget> – 应放置在输入之后的控件列表。
  • onSuggestionVisibleChanged: Function(bool) – 当建议列表可见性发生变化时触发。
  • 支持 TextField 支持的所有其他属性。

Mention

  • trigger: String – 用于触发建议的单个字符。
  • data: List<Map<String, dynamic>> – 用于表示用户看到的建议的 Map 列表。您需要提供两个必需属性 id 和 display，它们都是 [String]。您还可以根据需要拥有任何自定义属性来构建自定义建议小部件（注意：此项稍后可能会更新以显示新的或过滤后的提及列表）。
  • style: TextStyle – 输入中提及项的样式。
  • matchAll: bool – 是否应匹配所有带有触发字符的非建议项。
  • disableMarkup: bool – 是否应为此 Mention 项禁用标记生成。
  • suggestionBuilder: Widget Function(Map<String, dynamic>) – 使用此生成器构建自定义建议小部件。
  • markupBuilder: String Function(String trigger, String mention, String value) – 用于定义如何保存提及标记。

例如，Mention 实例

Mention(
  trigger: "#",
  disableMarkup: true,
  style: TextStyle(
    color: Colors.blue,
  ),
  data: [
    {"id": "reactjs", "display": "reactjs"},
    {"id": "javascript", "display": "javascript"},
  ],
  matchAll: true,
)

示例

FlutterMentions(
  key: key,
  suggestionPosition: SuggestionPosition.Top,
  maxLines: 5,
  minLines: 1,
  mentions: [
    Mention(
      trigger: "@",
      style: TextStyle(color: Colors.purple),
      data: [
        {
          "id": "61as61fsa",
          "display": "fayeedP",
          "photo": "https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg"
        },
        {
          "id": "61asasgasgsag6a",
          "display": "khaled",
          "photo": "https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg",
          style: TextStyle(color: Colors.green),
        },
      ],
    )
  ],
),

您可以在 example 文件夹 中找到详细的示例

常见问题解答

1. 如何访问编辑控制器？ A. 要获取 TextEditingController 的控制，只需使用全局密钥，有关更多信息，请参见 #13。这将允许您访问 text 和 markupText。

2. 如何在输入时搜索用户？ A. 只需使用 onSearchChange 获取当前的搜索文本，向服务器发出请求，然后稍后更新数据。

3. Portal 的作用是什么？ A. 您应该查看这个 评论，我在其中更详细地说明了使用 portal 的原因。

鸣谢 ??‍?

觉得这个项目有用吗？❤️

如果您觉得这个项目有用，请考虑在 Github 上给它一个 ⭐️，并通过社交媒体与您的朋友分享。

许可 ⚖️

API 详情 ?

有关更多 API 详细信息，请参阅 flutter_mentions.dart

问题和反馈 ?

如果您有任何关于包含功能的建议，或者某项功能不起作用，请随时在 Github 上打开一个 issue 以便我们进行讨论。

GitHub

查看 Github