Flutter文本提及与高亮插件flutter_quill_mentions的使用

Flutter 包基于 flutter_quill 提供提及和标签功能。

特性 #

列出你的包可以做什么。可能包括图片、GIF或视频。

开始使用 #

列出先决条件，并提供或指向有关如何开始使用该包的信息。

使用 #

为用户提供简短且有用的示例。将更长的示例添加到/example文件夹。

const like = 'sample';

额外信息 #

告诉用户更多关于该包的信息：在哪里找到更多信息，如何贡献于该包，如何提交问题，他们可以期望从包作者那里得到什么响应等。

示例代码

引入依赖

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_quill_mentions: ^版本号

初始化Quill Editor

首先，确保你已经引入了 flutter_quill_mentions 包，并且初始化了 Quill Editor。

import 'package:flutter/material.dart';
import 'package:flutter_quill/flutter_quill.dart' hide Text;
import 'package:flutter_quill_mentions/flutter_quill_mentions.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Mentions Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: QuillEditor.basic(
            controller: QuillController(
              document: Document(),
              selection: TextSelection.collapsed(offset: 0),
            ),
            readOnly: false, // true if you want to disable editing
          ),
        ),
      ),
    );
  }
}

配置提及和标签

接下来，配置提及和标签的功能。

class MyApp extends StatelessWidget {
  final QuillController _controller = QuillController.basic();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Mentions Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: QuillEditor(
            controller: _controller,
            scrollController: ScrollController(),
            scrollable: true,
            focusNode: FocusNode(),
            autoFocus: true,
            readOnly: false,
            expands: false,
            padding: EdgeInsets.zero,
            customStyles: DefaultStyles(
              paragraph: DefaultTextBlockStyle(
                const TextStyle(fontSize: 16, height: 1.4),
                const Offset(0, 0),
                const Offset(0, 0),
                null,
              ),
            ),
            embedBuilders: QuillOptions.getEmbedBuilders(context),
            mentionConfigurations: [
              MentionConfiguration(
                trigger: '@', // 触发字符
                suggestionItems: [
                  MentionItem('@user1'),
                  MentionItem('@user2'),
                  MentionItem('@user3'),
                ],
                mentionSpanBuilder: (mentionItem, index) {
                  return MentionSpan(
                    mentionItem: mentionItem,
                    prefix: mentionConfigurations.first.trigger,
                    style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

处理提及事件

你可以监听提及事件并执行相应的操作。

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final QuillController _controller = QuillController.basic();

  void _onMentionSelected(MentionItem item) {
    print('Selected mention: ${item.value}');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Mentions Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: QuillEditor(
            controller: _controller,
            scrollController: ScrollController(),
            scrollable: true,
            focusNode: FocusNode(),
            autoFocus: true,
            readOnly: false,
            expands: false,
            padding: EdgeInsets.zero,
            customStyles: DefaultStyles(
              paragraph: DefaultTextBlockStyle(
                const TextStyle(fontSize: 16, height: 1.4),
                const Offset(0, 0),
                const Offset(0, 0),
                null,
              ),
            ),
            embedBuilders: QuillOptions.getEmbedBuilders(context),
            mentionConfigurations: [
              MentionConfiguration(
                trigger: '@',
                suggestionItems: [
                  MentionItem('@user1'),
                  MentionItem('@user2'),
                  MentionItem('@user3'),
                ],
                mentionSpanBuilder: (mentionItem, index) {
                  return MentionSpan(
                    mentionItem: mentionItem,
                    prefix: mentionConfigurations.first.trigger,
                    style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
                  );
                },
                onSuggestionSelected: (MentionItem item) {
                  _onMentionSelected(item);
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}