Flutter标签处理插件simple_hashtag的使用

Flutter标签处理插件simple_hashtag的使用

特性

SimpleHashTag 是一个可以从字符串生成标签的包。通过传递一个字符串，以指定触发器开头的字符串将被标记化，并作为富文本返回。

使用方法

你可以使用 SimpleHashTag 类来配置文本：

// 配置设置
final _hashTag = SimpleHashTag();

例如：

// 配置设置
final _hashTag = SimpleHashTag(textColor: Colors.red, hashTagColor: Colors.yellow);

上述设置中，作为标签的字符串颜色将是黄色，其他字符串将是红色。当前可用的属性如下：

设置要标记化的文本作为 generateHashTag 方法的第一个参数，并将标签点击时的回调作为第二个参数。返回值是一个 RichText，可以直接用作小部件。

text = _hashTag.generateHashTag(
    controller.text,
    (hashTag) {
        // 移动到特定标签页面
        Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => DetailPage(tag: hashTag),
            ),
        );
    },
);

完整示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Simple HashTag'),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final controller = TextEditingController();
  RichText? text;

  late final SimpleHashTag _hashTag;

  [@override](/user/override)
  void initState() {
    super.initState();
    _hashTag = SimpleHashTag();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              if (text != null) text!,
              const SizedBox(
                height: 24,
              ),
              Container(
                decoration: BoxDecoration(
                  border: Border.all(),
                  borderRadius: BorderRadius.circular(30),
                ),
                child: TextFormField(
                  controller: controller,
                  decoration: const InputDecoration(
                    isDense: true,
                    contentPadding: EdgeInsets.all(16),
                    border: InputBorder.none,
                  ),
                ),
              ),
              const SizedBox(
                height: 24,
              ),
              ElevatedButton(
                onPressed: () {
                  setState(
                    () {
                      text = _hashTag.generateHashTag(
                        controller.text,
                        (hashTag) {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder: (context) => DetailPage(tag: hashTag),
                            ),
                          );
                        },
                      );
                    },
                  );
                },
                child: const Text('生成'),
              )
            ],
          ),
        ),
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
    controller.dispose();
  }
}

class DetailPage extends StatelessWidget {
  const DetailPage({
    super.key,
    required this.tag,
  });

  final String tag;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('详情页')),
      body: Center(
        child: Text('移动到了 $tag 页面。'),
      ),
    );
  }
}