Flutter文本提及插件fleather_mention的使用

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

Flutter文本提及插件fleather_mention的使用

Fleather Mention

Fleather Mention 是一个用于 Fleather 富文本编辑器的插件，支持 @提及或 #标签功能。

特性

  • 易于使用
  • 可自定义触发字符
  • 异步建议列表构建器
  • 键盘导航选项

开始使用

首先，在你的 pubspec.yaml 文件中添加依赖项：

dependencies:
  flutter:
    sdk: flutter
  fleather: ^1.12.0
  fleather_mention: ^0.0.5

使用方法

要使用 Fleather Mention，你需要将 FleatherEditor 包装在 FleatherMention.withEditor 中，并将 FleatherField 包装在 FleatherMention.withField 中。以下是一个完整的示例：

import 'package:flutter/material.dart';
import 'package:fleather/fleather.dart';
import 'package:fleather_mention/fleather_mention.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(primarySwatch: Colors.blue),
        home: const MyHomePage(),
      );
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final controller = FleatherController();
  final focusNode = FocusNode();
  final editorKey = GlobalKey<EditorState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Fleather mention demo')),
      body: Column(
        children: <Widget>[
          FleatherToolbar.basic(controller: controller),
          Divider(height: 1),
          Expanded(
            child: FleatherMention.withEditor(
              triggers: ['#', '@'],
              optionsBuilder: (trigger, query) async {
                final List<String> data;
                if (trigger == '#') {
                  data = ['Android', 'iOS', 'Windows', 'macOs', 'Web', 'Linux'];
                } else {
                  data = await Future.delayed(Duration(seconds: 1), () => [
                        'John',
                        'Michael',
                        'Dave',
                        'Susan',
                        'Emilia',
                        'Cathy'
                      ]);
                }
                return data
                    .where((e) => e.toLowerCase().contains(query.toLowerCase()))
                    .map((e) => MentionData(value: e, trigger: trigger))
                    .toList();
              },
              child: FleatherEditor(
                controller: controller,
                focusNode: focusNode,
                editorKey: editorKey,
                embedBuilder: (context, node) {
                  final mentionWidget = defaultMentionEmbedBuilder(
                    context,
                    node,
                    onTap: (data) =>
                        ScaffoldMessenger.of(context).showSnackBar(
                            SnackBar(content: Text(data.value))),
                  );
                  if (mentionWidget != null) {
                    return mentionWidget;
                  }
                  return defaultFleatherEmbedBuilder(context, node);
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

代码解释

  1. 导入必要的库：

    import 'package:flutter/material.dart';
import 'package:fleather/fleather.dart';
import 'package:fleather_mention/fleather_mention.dart';

  2. 创建应用入口点：

    void main() => runApp(const MyApp());

  3. 创建应用类：

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

  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(primarySwatch: Colors.blue),
        home: const MyHomePage(),
      );
}

  4. 创建主页状态类：

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final controller = FleatherController();
  final focusNode = FocusNode();
  final editorKey = GlobalKey<EditorState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Fleather mention demo')),
      body: Column(
        children: <Widget>[
          FleatherToolbar.basic(controller: controller),
          Divider(height: 1),
          Expanded(
            child: FleatherMention.withEditor(
              triggers: ['#', '@'],
              optionsBuilder: (trigger, query) async {
                final List<String> data;
                if (trigger == '#') {
                  data = ['Android', 'iOS', 'Windows', 'macOs', 'Web', 'Linux'];
                } else {
                  data = await Future.delayed(Duration(seconds: 1), () => [
                        'John',
                        'Michael',
                        'Dave',
                        'Susan',
                        'Emilia',
                        'Cathy'
                      ]);
                }
                return data
                    .where((e) => e.toLowerCase().contains(query.toLowerCase()))
                    .map((e) => MentionData(value: e, trigger: trigger))
                    .toList();
              },
              child: FleatherEditor(
                controller: controller,
                focusNode: focusNode,
                editorKey: editorKey,
                embedBuilder: (context, node) {
                  final mentionWidget = defaultMentionEmbedBuilder(
                    context,
                    node,
                    onTap: (data) =>
                        ScaffoldMessenger.of(context).showSnackBar(
                            SnackBar(content: Text(data.value))),
                  );
                  if (mentionWidget != null) {
                    return mentionWidget;
                  }
                  return defaultFleatherEmbedBuilder(context, node);
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter项目中使用flutter_mention插件来实现文本提及功能的代码示例。这个插件允许你在文本输入框中提及用户，类似于社交媒体应用中的功能。

首先，确保你的pubspec.yaml文件中包含flutter_mention依赖项：

dependencies:
  flutter:
    sdk: flutter
  flutter_mention: ^x.y.z  # 请替换为最新版本号

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

接下来，我们创建一个简单的Flutter应用来演示如何使用flutter_mention插件。

主应用文件 (main.dart)

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Mention Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MentionExample(),
    );
  }
}

class MentionExample extends StatefulWidget {
  @override
  _MentionExampleState createState() => _MentionExampleState();
}

class _MentionExampleState extends State<MentionExample> {
  final TextEditingController _controller = TextEditingController();
  final List<String> _users = ['Alice', 'Bob', 'Charlie', 'David'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Mention Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: MentionTextField(
          controller: _controller,
          users: _users,
          onChanged: (text) {
            // 处理文本变化
            print(text);
          },
          onSubmitEditing: () {
            // 处理提交编辑
            print('Submitted: ${_controller.text}');
          },
          decoration: InputDecoration(
            border: OutlineInputBorder(),
            labelText: 'Mention users',
            hintText: 'Type @ to mention users',
          ),
        ),
      ),
    );
  }
}

代码解释

  1. 依赖导入：

    • 我们导入了flutter_mention包。

  2. 主应用设置：

    • MyApp是一个简单的Flutter应用，设置了主题和主页。

  3. MentionExample：

    • MentionExample是一个有状态的widget，用于管理文本输入的状态。
    • _users列表包含了可以被提及的用户名。

  4. MentionTextField：

    • MentionTextField是flutter_mention插件提供的一个自定义文本输入字段。
    • controller：用于管理文本输入的状态。
    • users：包含可以被提及的用户列表。
    • onChanged：当文本变化时触发的回调。
    • onSubmitEditing：当文本输入完成时触发的回调。
    • decoration：设置输入框的样式。

这个示例展示了如何在Flutter应用中使用flutter_mention插件来实现文本提及功能。你可以根据需要进一步自定义和扩展这个示例。

回到顶部