Flutter文本提及插件ruki_flutter_mentions的使用

📛 Flutter Mentions

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

安装 📦

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

dependencies:
  flutter:
    sdk: flutter
  ruki_flutter_mentions:

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

使用 💻

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

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

（适用于 CupertinoApp）

这样，Portal 将渲染在所有内容之上。但是，您可以将其放置在其他位置以更改剪辑行为。

小部件

FlutterMention

• mentions: List<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>> - 显示给用户的建议列表。需要提供两个必需属性 id 和 display，两者都是 [String]。您还可以根据需要添加自定义属性以构建自定义建议组件（注意：这可以稍后更新以显示新的或过滤后的提及列表）。
• style: TextStyle - 输入中的提及项目的样式。
• matchAll: bool - 是否应匹配带有触发字符的所有非建议。
• disableMarkup: bool - 是否应禁用此提及项目的标记生成。
• suggestionBuilder: Widget Function(Map<String, dynamic>) - 使用此生成器构建自定义建议组件。
• markupBuilder: String Function(String trigger, String mention, String value) - 用于定义如何保存提及的标记。

示例

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

示例

import 'dart:convert';
import 'dart:math';

import 'package:flutter/material.dart';
import 'package:ruki_flutter_mentions/ruki_flutter_mentions.dart';
import 'package:http/http.dart' as http;

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (_, child) => Portal(child: child!),
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  GlobalKey<FlutterMentionsState> key = GlobalKey<FlutterMentionsState>();

  Future<List<Map<String, dynamic>>> sampleRequest(query) async {
    var url = Uri.parse('https://api.publicapis.org/entries?title=$query');
    var response = await http.get(url);
    if (response.statusCode == 200) {
      final data = json.decode(response.body);
      var apis = <Map<String, dynamic>>[];
      for (var i = 0; i < min(data['entries']?.length ?? 0, 10); i++) {
        apis.add(Map<String, dynamic>.from(data['entries'][i]));
      }
      print(apis);
      return apis;
    } else {
      print('Request failed with status: ${response.statusCode}.');
      return [];
    }
  }

  String text = "[@ruki](/user/ruki)#reactjs[@API](/user/API)#javascript#API#API-pop";

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          AnnotatedText(
            text: text,
            annotationStyles: {
              '@': TextStyle(color: Colors.amber),
              '#': TextStyle(color: Colors.blue),
            },
          ),
          ElevatedButton(
            child: Text('Get Text'),
            onPressed: () {
              print(key.currentState!.controller!.markupText);
            },
          ),
          Container(
            child: FlutterMentions(
              key: key,
              suggestionPosition: SuggestionPosition.Top,
              maxLines: 5,
              minLines: 1,
              forceListHeight: true,
              decoration: InputDecoration(hintText: 'hello'),
              onAsyncSearchChanged: (trigger, value) {
                if (trigger == '@' && value.length > 0) {
                  return sampleRequest(value);
                }
                return Future.value([]);
              },
              suggestionListHeight: MediaQuery.of(context).size.height,
              mentions: [
                Mention(
                  trigger: '@',
                  style: TextStyle(
                    color: Colors.amber,
                  ),
                  useAsync: true,
                  matchAll: false,
                  displayTarget: 'API',
                  displayId: "API",
                  suggestionBuilder: (data) {
                    return ListTile(
                      title: Text(data['API']),
                      leading: CircleAvatar(
                        backgroundImage: NetworkImage(data['Description']),
                      ),
                    );
                  },
                ),
                Mention(
                  trigger: '#',
                  disableMarkup: true,
                  style: TextStyle(
                    color: Colors.blue,
                  ),
                  data: [
                    {'id': 'reactjs', 'display': 'reactjs'},
                    {'id': 'javascript', 'display': 'javascript'},
                  ],
                  matchAll: true,
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}