? 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) – 当输入发生变化但带有已选 Mention 的标记时触发的函数。
  • suggestionListDecoration: BoxDecoration – 建议列表的装饰。
  • defaultText: String – 使用预填充的文本填充您的输入字段。
  • onSearchChange: Function(String trigger, String value) – 仅在输入发生变化且用户正在搜索 mention 项时触发。
  • leading: List<Widget> – 应放置在输入字段之前的部件列表。
  • trailing: List<Widget> – 应放置在输入字段之后的部件列表。
  • onSuggestionVisibleChanged: Function(bool) – 在建议列表可见性发生变化时触发。
  • 支持 TextField 支持的所有其他属性。

Mention

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

例如，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),
        },
      ],
    )
  ],
),

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

常见问题解答

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

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

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

致谢 ??‍?

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

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

许可证 ⚖️

API 详情 ?

有关更多 API 详情，请参阅 flutter_mentions.dart

问题和反馈 ?

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

GitHub

查看 Github