Flutter文本提及插件mentionable_text_field的使用

发布于 1周前 作者 zlyuanteng 来自 Flutter

Flutter文本提及插件mentionable_text_field的使用

插件简介

mentionable_text_field 是一个Flutter插件，用于创建具有提及（mention）功能的可自定义文本字段。该插件允许开发者在输入框中实现类似社交平台上的用户提及功能。

示例

安装

在您的 pubspec.yaml 文件中添加依赖：

dependencies:
  mentionable_text_field: ^0.0.2

然后，在 Dart 文件中导入插件：

import 'package:mentionable_text_field/mentionable_text_field.dart';

基本用法

下面是一个简单的例子，展示了如何使用 MentionableTextField 创建一个具备提及功能的文本输入框。

示例代码

import 'package:flutter/material.dart';
import 'package:mentionable_text_field/mentionable_text_field.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(title: 'Mentionable Text Field Demo'),
    );
  }
}

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Mentionable> _mentionableUsers = [];
  late void Function(Mentionable mentionable) _onSelectMention;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SafeArea(
        child: Stack(
          children: [
            Positioned(
              bottom: 0,
              width: MediaQuery.of(context).size.width,
              height: 200,
              child: Column(
                children: [
                  MentionableTextField(
                    onControllerReady: (value) =>
                        _onSelectMention = value.pickMentionable,
                    maxLines: 1,
                    onSubmitted: print,
                    mentionables: const [
                      MyUser('John Doe'),
                      MyUser('Jeanne Aulas'),
                      MyUser('Alexandre Dumas')
                    ],
                    onMentionablesChanged: (mentionableUsers) =>
                        setState(() => _mentionableUsers = mentionableUsers),
                    decoration:
                        const InputDecoration(hintText: 'Type something ...'),
                  ),
                  Expanded(
                    child: ListView.builder(
                      itemBuilder: (context, index) {
                        final mentionable = _mentionableUsers[index];
                        return ListTile(
                          leading: const Icon(Icons.person),
                          title: Text(mentionable.label),
                          onTap: () => _onSelectMention(mentionable),
                        );
                      },
                      itemCount: _mentionableUsers.length,
                    ),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

class MyUser implements Mentionable {
  @override
  final String label;

  MyUser(this.label);

  @override
  String toString() => '@$label';
}

自定义用法

除了基本的 TextField 属性外，MentionableTextField 还提供了一些额外的选项，以满足不同的需求：

属性 描述
ValueChanged<MentionTextEditingController>? onControllerReady 当控制器准备好时的回调函数，用于获取 TextField 的控制器
List<Mentionable> mentionables 可供选择的提及对象列表，例如用户
String escapingMentionCharacter 用于替换提及字符的字符，应避免被用户正常使用，并且只能是单个字符
MentionablesChangedCallback onMentionablesChanged 每次在 TextField 中输入新字符时调用的回调函数，提供当前的提及候选对象
TextStyle mentionStyle 应用于提及对象的文本样式

其他信息

如果您有任何建议或修复意见，欢迎为这个包提出改进建议！


更多关于Flutter文本提及插件mentionable_text_field的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter文本提及插件mentionable_text_field的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter中使用mentionable_text_field插件的一个简单示例。mentionable_text_field是一个允许用户在文本字段中提及其他用户（例如，在社交媒体应用中使用@提及功能）的插件。

首先，确保你已经在pubspec.yaml文件中添加了mentionable_text_field依赖项：

dependencies:
  flutter:
    sdk: flutter
  mentionable_text_field: ^最新版本号  # 请替换为实际版本号

然后运行flutter pub get来安装依赖项。

接下来是一个简单的示例代码，展示了如何使用MentionableTextField：

import 'package:flutter/material.dart';
import 'package:mentionable_text_field/mentionable_text_field.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Mentionable TextField Example'),
        ),
        body: MentionableTextFieldExample(),
      ),
    );
  }
}

class MentionableTextFieldExample extends StatefulWidget {
  @override
  _MentionableTextFieldExampleState createState() => _MentionableTextFieldExampleState();
}

class _MentionableTextFieldExampleState extends State<MentionableTextFieldExample> {
  final List<Mention> mentions = [];
  final TextEditingController controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          MentionableTextField(
            controller: controller,
            mentionTrigger: '@',
            mentionList: ['user1', 'user2', 'user3'],  // 可提及的用户列表
            onMentionAdded: (mention) {
              setState(() {
                mentions.add(mention);
              });
            },
            onMentionRemoved: (mention) {
              setState(() {
                mentions.remove(mention);
              });
            },
            decoration: InputDecoration(
              labelText: 'Mention someone',
              border: OutlineInputBorder(),
            ),
          ),
          SizedBox(height: 16),
          Text('Mentions:', style: TextStyle(fontWeight: FontWeight.bold)),
          Wrap(
            spacing: 8,
            runSpacing: 8,
            children: mentions.map((mention) => Chip(
              label: Text(mention.displayText),
              deleteIcon: IconButton(
                icon: Icon(Icons.cancel),
                onPressed: () {
                  setState(() {
                    controller.value = controller.value.copyWith(
                      text: controller.text.replaceAll('@${mention.displayText} ', ''),
                      selection: TextSelection.fromPosition(TextPosition(
                        offset: controller.text.indexOf('@${mention.displayText} ') + ('@${mention.displayText} '.length),
                        affinity: TextAffinity.downstream,
                      )),
                    );
                    mentions.remove(mention);
                  });
                },
              ),
            )).toList(),
          ),
        ],
      ),
    );
  }
}

在这个示例中：

  1. MentionableTextField用于创建一个允许用户提及其他用户的文本字段。
  2. mentionTrigger设置为@，表示用户可以通过输入@来触发提及功能。
  3. mentionList是一个包含可提及用户名称的列表。
  4. onMentionAdded和onMentionRemoved回调分别用于在用户添加或删除提及时的处理。
  5. Text和Wrap小部件用于显示已经添加的提及。

请确保替换mentionable_text_field: ^最新版本号为实际的插件版本号，并在实际项目中根据需要调整代码。

回到顶部