Flutter标签管理插件fluttertagger的使用

FlutterTagger

FlutterTagger 是一个用于扩展TextField以提供标签功能的Flutter包。它适用于社交应用中需要用户提及和话题标签功能的场景。

安装 🚀

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

dependencies:
  fluttertagger: ^2.3.1

导入包到项目 📥

在你的Dart文件中导入包：

import 'package:fluttertagger/fluttertagger.dart';

使用方法 🏗️

下面是一个完整的示例代码，展示了如何使用 FlutterTagger 插件来创建一个带有标签功能的输入框，并且包含了一个发送按钮来提交内容：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlutterTagger Demo',
      theme: ThemeData(
        textSelectionTheme: TextSelectionThemeData(
          selectionColor: Colors.redAccent.withOpacity(.3),
        ),
        primarySwatch: Colors.red,
      ),
      home: const HomeView(),
    );
  }
}

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

  @override
  State<HomeView> createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> with TickerProviderStateMixin {
  late final _controller = FlutterTaggerController(text: "Hey @exampleUser. It's time to #Flutter#!");
  late final _focusNode = FocusNode();

  @override
  void dispose() {
    _focusNode.dispose();
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.redAccent,
        title: const Text("The Squad"),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: 0, // 这里可以替换为实际帖子的数量
              itemBuilder: (_, index) {
                // 返回帖子小部件
                return Container(); 
              },
            ),
          ),
          FlutterTagger(
            triggerStrategy: TriggerStrategy.eager,
            controller: _controller,
            onSearch: (query, triggerChar) {
              if (triggerChar == "@") {
                // 搜索用户逻辑
              }
              if (triggerChar == "#") {
                // 搜索话题标签逻辑
              }
            },
            triggerCharacterAndStyles: const {
              "@": TextStyle(color: Colors.pinkAccent),
              "#": TextStyle(color: Colors.blueAccent),
            },
            overlay: SearchResultOverlay(), // 自定义搜索结果视图
            builder: (context, containerKey) {
              return TextField(
                key: containerKey,
                controller: _controller,
                focusNode: _focusNode,
                decoration: InputDecoration(
                  suffixIcon: IconButton(
                    onPressed: () {
                      // 发送动作
                      final text = _controller.formattedText;
                      print('Sending message: $text');
                      FocusScope.of(context).unfocus();
                      _controller.clear();
                    },
                    icon: const Icon(Icons.send, color: Colors.redAccent),
                  ),
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

在这个例子中，我们创建了一个简单的应用程序界面，其中包含一个带有标签功能的输入框和一个发送按钮。当用户输入特定字符（如@或#）时，会触发相应的搜索逻辑。此外，我们还设置了样式来区分不同的触发字符，并通过自定义的 overlay 显示搜索结果。

触发搜索

除了直接在键盘上输入触发字符外，你还可以通过更新控制器来触发搜索：

// 在发送按钮点击事件中
String text = _controller.formattedText;

// 添加触发字符以激活搜索上下文
_controller.text = text + '#';

// 更新文本选择
_controller.selection = TextSelection.fromPosition(
  TextPosition(offset: _controller.text.length),
);

// 添加其他字符以触发搜索
_controller.text += 'f';

// 再次更新文本选择
_controller.selection = TextSelection.fromPosition(
  TextPosition(offset: _controller.text.length),
);

// 调用 formatTags 以保持格式化
_controller.formatTags();

这段代码展示了如何手动添加触发字符并调用相关方法来确保正确地触发搜索逻辑。

示例演示 📷

贡献 🫱🏾‍🫲🏼

欢迎为这个项目做出贡献。如果你发现了bug或者有新的特性需求但不知道如何实现，请提交issue；如果你已经修复了bug或实现了新特性，请发送pull request。

希望这篇指南能帮助你更好地理解和使用FlutterTagger插件！如果有任何问题，欢迎随时提问。