Flutter标签管理插件awesometags的使用

Flutter标签管理插件awesometags的使用

特性

这里为社区提供了一个简单的标签解决方案。你可以直接将这个插件放入你的项目中，并通过一个字符串列表即可获得美观的标签。你还可以自定义每个标签点击时执行的动作。

开始使用

使用方法

import 'package:awesometags/fluttertags.dart';
import 'package:awesometags/src/demoPage.dart';
import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  [@override](/user/override)
  State<HomeScreen> createState() => _HomeScreenState();
}

List<String> tags = [
  "概览",
  "课程与费用",
  "画廊",
  "录取分数线",
  "就业情况",
  "师资力量",
  "新闻与文章",
  "评价",
  "评论"
];

class _HomeScreenState extends State<HomeScreen> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
            child: Column(
          children: [
            Text('标签'),
            Container(
                child: Tags(
              tagList: tags,
              alignment: WrapAlignment.center,
              activeTagBackground: Color(0xfffd5631), // 激活标签背景颜色
              tagBackground: Colors.grey.shade200, // 标签背景颜色
              activeTagTextColor: Colors.white, // 激活标签文字颜色
              tagTextColor: Colors.black, // 标签文字颜色
              tagBorderRadius: 8, // 标签圆角半径
              spacingBetweenTags: 8, // 标签之间的间距
              onTagTapped: (tag) { // 点击标签时的回调函数
                print('选中的标签: $tag');
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => DemoScreen(title: '${tag}')));
              },
            )),
          ],
        )),
      ),
    );
  }
}

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

1 回复

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


AwesomeTags 是一个用于 Flutter 的标签管理插件，它允许你轻松地在应用中添加和管理标签。这个插件提供了丰富的功能，如标签的创建、编辑、删除、搜索等，非常适合用于需要标签管理的应用场景。

以下是 AwesomeTags 的基本使用方法：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  awesometags: ^1.0.0  # 请使用最新版本

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

2. 导入包

在你的 Dart 文件中导入 awesometags 包：

import 'package:awesometags/awesometags.dart';

3. 使用 AwesomeTags

你可以在你的应用中使用 AwesomeTags 组件来管理标签。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AwesomeTags Example'),
        ),
        body: Center(
          child: AwesomeTags(
            tags: ['Flutter', 'Dart', 'AwesomeTags'],
            onTagTap: (tag) {
              print('Tag tapped: $tag');
            },
            onTagDelete: (tag) {
              print('Tag deleted: $tag');
            },
            onTagAdd: (tag) {
              print('Tag added: $tag');
            },
          ),
        ),
      ),
    );
  }
}

4. 参数说明

AwesomeTags 组件提供了一些常用的参数：

  • tags: 初始标签列表。
  • onTagTap: 当用户点击标签时触发。
  • onTagDelete: 当用户删除标签时触发。
  • onTagAdd: 当用户添加标签时触发。
  • tagStyle: 自定义标签的样式。
  • inputDecoration: 自定义输入框的装饰。

5. 自定义样式

你可以通过 tagStyle 和 inputDecoration 参数来自定义标签和输入框的样式。例如：

AwesomeTags(
  tags: ['Flutter', 'Dart', 'AwesomeTags'],
  tagStyle: TextStyle(
    color: Colors.white,
    backgroundColor: Colors.blue,
  ),
  inputDecoration: InputDecoration(
    hintText: 'Add a tag...',
    border: OutlineInputBorder(),
  ),
  onTagTap: (tag) {
    print('Tag tapped: $tag');
  },
  onTagDelete: (tag) {
    print('Tag deleted: $tag');
  },
  onTagAdd: (tag) {
    print('Tag added: $tag');
  },
)

6. 处理标签的增删改查

你可以通过 onTagTap, onTagDelete, 和 onTagAdd 回调函数来处理标签的增删改查逻辑。例如，你可以在 onTagAdd 回调中将新标签添加到状态管理中：

class _MyHomePageState extends State<MyHomePage> {
  List<String> tags = ['Flutter', 'Dart', 'AwesomeTags'];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AwesomeTags Example'),
      ),
      body: Center(
        child: AwesomeTags(
          tags: tags,
          onTagTap: (tag) {
            print('Tag tapped: $tag');
          },
          onTagDelete: (tag) {
            setState(() {
              tags.remove(tag);
            });
          },
          onTagAdd: (tag) {
            setState(() {
              tags.add(tag);
            });
          },
        ),
      ),
    );
  }
}
回到顶部