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

概述

highlight_mentions 是一个用于在Flutter应用中添加提及（mentions）功能并支持高亮显示的包。它提供了用于渲染和与文本输入字段中的提及进行交互的小部件和工具。

特性

• 支持用户输入时高亮提及。
• 可定制普通文本、提及文本和特殊提及的样式。
• 支持动态可提及用户名。
• 组件模块化且易于复用。

平台支持

自定义

高亮样式

你可以通过提供 TextStyle 对象来定制普通文本、提及文本和特殊提及（如@All）的样式：

• normalStyle: 普通文本的样式。
• highlightedStyle: 被提及文本的样式。
• specialStyle: 特殊提及的样式，例如 @All。

TextField 参数

HighlightedTextField 支持所有标准的 TextField 属性，比如：

• focusNode
• keyboardType
• textInputAction
• cursorColor
• maxLines
• onChanged
• 等等。

示例代码

以下是一个完整的示例，展示了如何使用 highlight_mentions 包创建一个包含提及功能的应用程序：

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:highlight_mentions/highlight_mentions.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HighlightTextScreen(),
    );
  }
}

class HighlightTextScreen extends StatefulWidget {
  const HighlightTextScreen({Key? key}) : super(key: key);

  @override
  State<HighlightTextScreen> createState() => _HighlightTextScreenState();
}

class _HighlightTextScreenState extends State<HighlightTextScreen> {
  final String _currentUsername = 'john';
  late List<String> mentionableNames = ['alice', 'bob', 'sss'];
  late HighlightTextEditingController _controller;
  final FocusNode _focusNode = FocusNode();

  String text = '';

  @override
  void initState() {
    super.initState();
    _controller = HighlightTextEditingController(
      mentionableNames: mentionableNames,
      currentUsername: _currentUsername,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Highlight Mentions')),
      body: Padding(
        padding: const EdgeInsets.all(24.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            HighlightedText(
              input: text,
              mentionableNames: mentionableNames,
              currentUsername: _currentUsername,
            ),
            SizedBox(height: 20),
            MentionableTextField(
              focusNode: _focusNode,
              currentUsername: _currentUsername,
              mentionableNames: mentionableNames,
              onMentionSelected: (mention) {
                if (kDebugMode) {
                  print('Mention selected: $mention');
                }
              },
              textFieldDecoration: InputDecoration(
                border: OutlineInputBorder(),
                hintText: 'Type @ to mention...',
              ),
              suggestionDecoration: BoxDecoration(
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey,
                    blurRadius: 10,
                    offset: Offset(0, 3),
                  ),
                ],
              ),
              controller: _controller,
            ),
          ],
        ),
      ),
    );
  }
}

此示例演示了如何集成 highlight_mentions 插件到你的Flutter项目中，并实现基本的提及和高亮功能。请注意，根据需要调整样式和配置以满足特定需求。