Flutter标签管理插件flutter_tags的使用

Flutter标签管理插件flutter_tags的使用

flutter_tags 是一个用于快速创建美观标签的插件。以下是关于如何使用该插件的详细指南。

安装

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

dependencies:
  flutter_tags: "^0.4.9+1"

然后运行 flutter pub get 来安装该包。

DEMO

下面是 flutter_tags 的两个示例图：

简单使用

import 'package:flutter_tags/flutter_tags.dart';

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 _items;
  double _fontSize = 14;
  GlobalKey<TagsState> _tagStateKey = GlobalKey<TagsState>();

  @override
  void initState() {
    super.initState();
    _items = ['SDK', 'plugin updates', 'Facebook', '哔了狗了QP又不够了'];
  }

  @override
  Widget build(BuildContext context) {
    return Tags(
      key: _tagStateKey,
      textField: TagsTextField(
        textStyle: TextStyle(fontSize: _fontSize),
        constraintSuggestion: true,
        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),
          combine: ItemTagsCombine.withTextBefore,
          image: ItemTagsImage(
            image: AssetImage("img.jpg") // 或者 NetworkImage("https://...image.png")
          ),
          icon: ItemTagsIcon(
            icon: Icons.add,
          ),
          removeButton: ItemTagsRemoveButton(
            onRemoved: () {
              setState(() {
                _items.removeAt(index);
              });
              return true;
            },
          ),
          onPressed: (item) => print(item),
          onLongPressed: (item) => print(item),
        );
      },
    );
  }

  void _getAllItem() {
    List<Item> lst = _tagStateKey.currentState?.getAllItem;
    if (lst != null) {
      lst.where((a) => a.active == true).forEach((a) => print(a.title));
    }
  }
}

包裹小部件示例

你可以将 ItemTags() 包裹在其他小部件中：

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

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

1 回复

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


flutter_tags 是一个用于在 Flutter 应用中创建和管理标签的插件。它允许用户动态添加、删除和显示标签，并且可以自定义标签的样式和布局。下面是如何使用 flutter_tags 插件的基本步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 flutter_tags 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_tags: ^0.4.8+1

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 flutter_tags 插件：

import 'package:flutter_tags/flutter_tags.dart';

3. 使用 Tags 组件

Tags 是 flutter_tags 插件中的主要组件，你可以使用它来创建和管理标签。

基本用法

以下是一个简单的示例，展示如何使用 Tags 组件：

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

class TagExample extends StatefulWidget {
  @override
  _TagExampleState createState() => _TagExampleState();
}

class _TagExampleState extends State<TagExample> {
  List<String> _tags = ['Flutter', 'Dart', 'Mobile', 'Development'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Tags Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Tags(
          itemCount: _tags.length,
          itemBuilder: (index) {
            return ItemTags(
              index: index,
              title: _tags[index],
              pressEnabled: true,
              active: true,
              onPressed: (item) {
                setState(() {
                  _tags.removeAt(index);
                });
              },
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _tags.add('New Tag');
          });
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: TagExample(),
  ));
}

解释

  • Tags 组件用于包裹一组标签。
  • itemCount 属性指定标签的数量。
  • itemBuilder 是一个回调函数，用于构建每个标签。
  • ItemTags 是单个标签的组件，你可以通过 onPressed 回调来处理标签的点击事件。
  • 在这个例子中，点击标签会将其从列表中移除，点击浮动按钮会添加一个新标签。

4. 自定义标签样式

你可以通过 ItemTags 组件的属性来自定义标签的样式，例如颜色、边框、圆角等。

ItemTags(
  index: index,
  title: _tags[index],
  textStyle: TextStyle(fontSize: 14),
  combine: ItemTagsCombine.withTextBefore,
  icon: ItemTagsIcon(
    icon: Icons.cancel,
  ),
  color: Colors.blue,
  activeColor: Colors.red,
  textActiveColor: Colors.white,
  borderRadius: BorderRadius.circular(20),
  elevation: 5,
  padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
  onPressed: (item) {
    setState(() {
      _tags.removeAt(index);
    });
  },
),
回到顶部