Flutter文本提及插件simple_mention的使用

Flutter文本提及插件simple_mention的使用

使用simple_mention插件可以轻松地在Flutter应用中实现文本提及功能。该插件旨在提供一个轻量且简单的提及功能。

功能

使用此插件可以在您的Flutter应用中实现以下功能：

  • 在文本字段中提及用户。
  • 显示选中的提及用户的名称为蓝色。

开始使用

步骤1：添加用户信息

在MentionMemberModel中添加要显示的用户信息。

late MentionTextFieldController controller;

[@override](/user/override)
void initState() {
  controller = MentionTextFieldController(
      myName: 'James Anderson', memberList: [
    MentionMemberModel(uid: '1', name: 'Emily Thompson', picture: 'assets/b.jpg'),
    MentionMemberModel(uid: '2', name: 'Oliver Smith', picture: 'assets/a.jpg'),
    MentionMemberModel(uid: '3', name: 'Sophia Johnson', picture: ''),
    MentionMemberModel(uid: '4', name: 'Elijah Williams', picture: ''),
    MentionMemberModel(uid: '5', name: 'Olivia Jones', picture: ''),
    MentionMemberModel(uid: '6', name: 'William Brown', picture: 'assets/d.jpg'),
    MentionMemberModel(uid: '7', name: 'Ava Davis', picture: 'assets/c.jpg'),
    MentionMemberModel(uid: '8', name: 'James Miller', picture: ''),
    MentionMemberModel(uid: '9', name: 'Isabella Wilson', picture: 'assets/e.jpg'),
    MentionMemberModel(uid: '10', name: '홍길동', picture: ''),
    MentionMemberModel(uid: '11', name: '너무 멋진 강아지', picture: ''),
    MentionMemberModel(uid: '12', name: '행복한 다람쥐', picture: ''),
    MentionMemberModel(uid: '13', name: '조용한 고양이', picture: ''),
  ]);
  super.initState();
}

步骤2：创建MentionTextField

在需要的地方插入MentionTextField，并将controller参数设置为上面创建的controller。

class _MyHomePageState extends State<MyHomePage> {
  late MentionTextFieldController controller;

  [@override](/user/override)
  void initState() {
    controller =
        MentionTextFieldController(myName: 'James Anderson', memberList: [
      MentionMemberModel(
          uid: '1', name: 'Emily Thompson', picture: 'assets/b.jpg'),
      MentionMemberModel(
          uid: '2', name: 'Oliver Smith', picture: 'assets/a.jpg'),
      MentionMemberModel(uid: '3', name: 'Sophia Johnson', picture: ''),
      MentionMemberModel(uid: '4', name: 'Elijah Williams', picture: ''),
      MentionMemberModel(uid: '5', name: 'Olivia Jones', picture: ''),
      MentionMemberModel(
          uid: '6', name: 'William Brown', picture: 'assets/d.jpg'),
      MentionMemberModel(uid: '7', name: 'Ava Davis', picture: 'assets/c.jpg'),
      MentionMemberModel(uid: '8', name: 'James Miller', picture: ''),
      MentionMemberModel(
          uid: '9', name: 'Isabella Wilson', picture: 'assets/e.jpg'),
      MentionMemberModel(uid: '10', name: '홍길동', picture: ''),
      MentionMemberModel(uid: '11', name: '너무 멋진 강아지', picture: ''),
      MentionMemberModel(uid: '12', name: '행복한 다람쥐', picture: ''),
      MentionMemberModel(uid: '13', name: '조용한 고양이', picture: ''),
      MentionMemberModel(uid: '14', name: '조용한 고양이', picture: 'assets/f.jpeg'),
    ]);
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
          child: MentionTextField(
        controller: controller,
      )),
    );
  }
}

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

1 回复

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


simple_mention 是一个用于 Flutter 的插件，它允许你在文本输入框中实现提及（@mention）功能。这对于社交应用、评论系统或任何需要用户提及其他用户的场景非常有用。

安装

首先，你需要在 pubspec.yaml 文件中添加 simple_mention 依赖：

dependencies:
  flutter:
    sdk: flutter
  simple_mention: ^0.1.0

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

基本使用

下面是一个简单的示例，展示如何使用 simple_mention 插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MentionExample(),
    );
  }
}

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

class _MentionExampleState extends State<MentionExample> {
  final List<Mention> mentions = [
    Mention(name: 'John Doe', id: '1'),
    Mention(name: 'Jane Smith', id: '2'),
    Mention(name: 'Alice Johnson', id: '3'),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Mention Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: MentionInput(
          mentions: mentions,
          suggestionBuilder: (Mention mention) {
            return ListTile(
              title: Text(mention.name),
            );
          },
          onMentionAdd: (Mention mention) {
            print('Mentioned: ${mention.name}');
          },
          decoration: InputDecoration(
            labelText: 'Type something...',
            border: OutlineInputBorder(),
          ),
        ),
      ),
    );
  }
}
回到顶部