Flutter标签视图插件tag_view的使用

开始使用

添加依赖

你可以通过以下命令将 tag_view 添加为依赖项（使用最新稳定版本）：

$ dart pub add tag_view

或者，你可以在 pubspec.yaml 文件的依赖部分手动添加 tag_view：

dependencies:
  tag_view: ^replace-with-latest-version

简单使用

import 'package:tag_view/tag_view.dart';

List<String> tags = ['标签 1', '标签 2'];

TagView(
  tags,
  isEnableDelete: true,
  tagBackgroundColor: Colors.blue,
  tagTextColor: Colors.white,
  margin: EdgeInsets.symmetric(vertical: 5, horizontal: 5),
  onDelete: (deletePos) {
    setState(() {
      tags.removeAt(deletePos);
    });
  },
  onClick: (clickPos) {
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(tags[clickPos].toString())));
  },
)

使用示例

以下是完整的示例代码：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: '标签视图',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({super.key});

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

class _MyHomePageState extends State<MyHomePage> {
  late TextEditingController _controller;
  late List<String> _tags;
  String _validateError = '';

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = TextEditingController();
    _tags = [];
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).primaryColor,
        title: Text('标签视图', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
      ),
      body: Container(
        margin: EdgeInsets.all(20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            TextField(
              controller: _controller,
              textInputAction: TextInputAction.done,
              decoration: InputDecoration(
                hintText: '输入标签',
                errorText: _validateError.length > 0 ? _validateError : null,
              ),
              onSubmitted: (value) {
                setState(() {
                  var s = value.replaceAll(" ", "");
                  if (value.length == 0 || s.length == 0) {
                    _validateError = '请输入标签';
                    _controller.text = '';
                  } else if (_tags.contains(value)) {
                    _validateError = '标签已存在！';
                  } else {
                    _validateError = '';
                    _tags.add(value);
                    _controller.clear();
                  }
                });
              },
            ),
            SizedBox(height: 20),
            TagView(
              _tags,
              isEnableDelete: true,
              tagBackgroundColor: Colors.blue,
              tagTextColor: Colors.white,
              margin: EdgeInsets.symmetric(vertical: 5, horizontal: 5),
              onDelete: (deletePos) {
                setState(() {
                  _tags.removeAt(deletePos);
                });
              },
              onClick: (clickPos) {
                ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text(_tags[clickPos].toString())));
              },
            ),
            SizedBox(height: 20),
            InkWell(
              onTap: () {
                setState(() {
                  _tags.clear();
                });
              },
              child: Container(
                padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                decoration: BoxDecoration(
                    color: Colors.red,
                    borderRadius: BorderRadius.all(Radius.circular(20))),
                child: Text('清除标签',
                    style: TextStyle(
                        color: Colors.white, fontWeight: FontWeight.bold)),
              ),
            )
          ],
        ),
      ),
    );
  }
}