Flutter标签管理插件flutter_tags_x的使用

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

Flutter标签管理插件flutter_tags_x的使用

简介

flutter_tags_x 是一个用于快速创建漂亮标签的Flutter插件。它是从 Dn-a/flutter_tags 分支而来,并且已经支持空安全。

DEMO DEMO

安装

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

dependencies:
  flutter_tags_x: ^最新版本 # 替换为最新版本号

更多关于空安全的信息可以参考 Dart文档

示例代码

基本用法

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tags Demo',
      theme: ThemeData(
        primarySwatch: Colors.blueGrey,
      ),
      home: MyHomePage(title: 'Flutter Tags'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> _items = [];
  double _fontSize = 14;

  final GlobalKey<TagsState> _tagStateKey = GlobalKey<TagsState>();

  @override
  void initState() {
    super.initState();
    // 如果你存储数据在一个本地数据库(如sqflite),你可以这样做:
    // Model().getItems().then((items){
    //   _items = items;
    // });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Tags(
          key: _tagStateKey,
          textField: TagsTextField(
            textStyle: TextStyle(fontSize: _fontSize),
            constraintSuggestion: true,
            suggestions: [],
            onSubmitted: (String str) {
              setState(() {
                _items.add(str);
              });
            },
          ),
          itemCount: _items.length,
          itemBuilder: (int index) {
            final item = _items[index];
            return ItemTags(
              key: Key(index.toString()),
              index: index,
              title: item,
              active: true,
              textStyle: TextStyle(fontSize: _fontSize),
              removeButton: ItemTagsRemoveButton(
                onRemoved: () {
                  setState(() {
                    _items.removeAt(index);
                  });
                  return true;
                },
              ),
              onPressed: (item) => print(item),
              onLongPressed: (item) => print(item),
            );
          },
        ),
      ),
    );
  }

  // 获取所有激活的ItemTags
  void _getAllItem() {
    List<Item> lst = _tagStateKey.currentState?.getAllItem;
    if (lst != null) {
      lst.where((a) => a.active == true).forEach((a) => print(a.title));
    }
  }
}

包裹Widget示例

你可以在 ItemTags() 外面包裹其他Widget,例如 Tooltip

Tags(
  itemCount: items.length,
  itemBuilder: (int index) {
    return Tooltip(
      message: items[index].title,
      child: ItemTags(
        title: items[index].title,
      ),
    );
  },
);

Tags() 参数说明

参数名 描述 默认值
columns 设置列数 null
itemCount 显示的标签数量 必填
symmetry 是否对称显示标签 false
horizontalScroll 是否水平滚动 false
heightHorizontalScroll 水平滚动时的高度 60
spacing 标签之间的水平间距 6
runSpacing 标签之间的垂直间距 14
alignment 水平方向的对齐方式 WrapAlignment.center
runAlignment 垂直方向的对齐方式 WrapAlignment.center
direction 标签的方向 Axis.horizontal
verticalDirection 迭代标签的方向 VerticalDirection.down
textDirection 文本方向 TextDirection.ltr
itemBuilder 标签生成器 -
textField 添加文本框 TagsTextField()

ItemTags() 参数说明

  • index - 必填
  • title - 必填
  • textScaleFactor - 自定义文本缩放因子
  • active - 布尔值,默认为true
  • pressEnabled - 是否启用点击事件,默认为true
  • customData - 可以添加自定义数据
  • textStyle - 文本样式
  • alignment - MainAxisAlignment,默认为MainAxisAlignment.center
  • combine - 组合文本、图标、图片的方式,默认为ItemTagsCombine.imageOrIconOrText
  • icon - 图标
  • image - 图片
  • removeButton - 删除按钮
  • borderRadius - 圆角半径
  • border - 边框样式
  • padding - 内边距,默认EdgeInsets.symmetric(horizontal: 7, vertical: 5)
  • elevation - 阴影,默认5
  • singleItem - 是否单个标签,默认false
  • textOverflow - 文本溢出处理,默认TextOverflow.fade
  • textColor - 文本颜色,默认Colors.black
  • textActiveColor - 激活状态下的文本颜色,默认Colors.white
  • color - 背景颜色,默认Colors.white
  • activeColor - 激活状态下的背景颜色,默认Colors.blueGrey
  • highlightColor - 高亮颜色
  • splashColor - 波纹颜色
  • colorShowDuplicate - 重复项的颜色,默认Colors.red
  • onPressed - 点击回调
  • onLongPressed - 长按回调
  • onRemoved - 删除回调

问题反馈

如果你遇到任何问题,请打开一个issue。也欢迎提交Pull Request。


希望这个示例能帮助你理解如何使用 flutter_tags_x 插件来管理和展示标签。如果有任何问题或需要进一步的帮助,请随时提问!


更多关于Flutter标签管理插件flutter_tags_x的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter标签管理插件flutter_tags_x的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中集成和使用flutter_tags_x插件的一个详细示例。flutter_tags_x是一个功能强大的标签管理插件,允许你创建和管理可编辑的标签列表。

1. 添加依赖

首先,在你的pubspec.yaml文件中添加flutter_tags_x依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_tags_x: ^2.0.0  # 请检查最新版本号

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

2. 导入插件

在你需要使用标签管理的Dart文件中导入插件:

import 'package:flutter_tags_x/flutter_tags_x.dart';

3. 使用插件

下面是一个完整的示例,展示如何在Flutter应用中使用flutter_tags_x来创建和管理标签。

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

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

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

class TagsScreen extends StatefulWidget {
  @override
  _TagsScreenState createState() => _TagsScreenState();
}

class _TagsScreenState extends State<TagsScreen> {
  List<String> tags = ['Flutter', 'Dart', 'Programming'];
  TextEditingController textEditingController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Tags X Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Selected Tags:',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 16),
            Expanded(
              child: TagsInput(
                text: textEditingController.text,
                tags: tags,
                suggestions: ['React', 'Angular', 'Swift', 'Kotlin', 'Java'],
                onDelete: (index) {
                  setState(() {
                    tags.removeAt(index);
                  });
                },
                onAdd: (newTag) {
                  if (!tags.contains(newTag)) {
                    setState(() {
                      tags.add(newTag);
                      textEditingController.clear();
                    });
                  }
                },
                onChange: (text) {
                  setState(() {
                    textEditingController.value = TextEditingValue(
                      text: text,
                      selection: TextSelection.fromPosition(
                        TextPosition(offset: text.length),
                      ),
                    );
                  });
                },
                controller: textEditingController,
                maxTags: 5,
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'Add a tag',
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释

  1. 依赖和导入:在pubspec.yaml中添加flutter_tags_x依赖,并在需要使用它的Dart文件中导入。
  2. UI结构:使用ScaffoldAppBarColumn来构建UI。
  3. 状态管理:使用StatefulWidgetsetState来管理标签列表和输入框的状态。
  4. TagsInput
    • text:输入框的当前文本。
    • tags:当前选中的标签列表。
    • suggestions:建议的标签列表(可选)。
    • onDelete:删除标签时的回调。
    • onAdd:添加新标签时的回调。
    • onChange:输入框内容变化时的回调。
    • controllerTextEditingController,用于控制输入框。
    • maxTags:允许的最大标签数量。
    • decoration:输入框的装饰。

运行项目

确保你已经正确添加了依赖并导入了插件,然后运行你的Flutter项目。你应该会看到一个带有标签输入框和已选标签列表的界面。你可以添加、删除和编辑标签。

希望这个示例对你有帮助!如果有更多问题,请随时询问。

回到顶部