Flutter标签包裹插件nice_wrappable_tags的使用

Features

该插件提供了灵活的标签包裹功能，支持动态生成标签并根据屏幕大小自动换行。用户可以通过点击标签触发事件，并自定义标签样式。

Getting started

在使用nice_wrappable_tags之前，需要确保已将插件添加到项目的pubspec.yaml文件中：

dependencies:
  nice_wrappable_tags: ^版本号

然后运行以下命令以安装依赖：

flutter pub get

Usage

以下是使用nice_wrappable_tags的基本示例：

示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // 应用程序根组件
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'nice_wrappable_tags',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  // 定义一组标签
  static const List<String> tags = [
    '开发者',
    'iOS',
    'Flutter',
    'Android',
    'React Native',
    'Java'
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: NiceWrappableTags(
          // 点击标签时触发的回调
          onTap: (index) {
            print('${tags[index]} 被点击');
          },
          // 标签的标题列表
          tagTitles: tags,
          // 自定义标签的装饰器
          boxDecoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            color: Colors.lightBlue[100], // 设置背景颜色
            border: Border.all(color: Colors.blue, width: 1.5), // 设置边框
          ),
        ),
      ),
    );
  }
}

yibo5220 1楼

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

nice_wrappable_tags 是一个用于 Flutter 的插件，它允许你创建可自动换行的标签（tags）布局。这个插件非常适合用于展示一组标签，并且当标签数量较多时，它们会自动换行以适应屏幕宽度。

安装

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

dependencies:
  flutter:
    sdk: flutter
  nice_wrappable_tags: ^1.0.0  # 请检查最新版本

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

基本用法

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

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Nice Wrappable Tags Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: NiceWrappableTags(
            tags: [
              'Flutter',
              'Dart',
              'Mobile Development',
              'UI/UX',
              'Cross-platform',
              'Widgets',
              'State Management',
              'Animation',
              'Networking',
              'Database',
            ],
            tagBuilder: (context, tag) {
              return Chip(
                label: Text(tag),
                backgroundColor: Colors.blue[100],
                deleteIcon: Icon(Icons.close),
                onDeleted: () {
                  // Handle tag deletion
                },
              );
            },
          ),
        ),
      ),
    );
  }
}

参数说明

tags: 一个字符串列表，表示要显示的标签。
tagBuilder: 一个函数，用于构建每个标签的 UI。你可以使用 Chip、Container 或其他任何小部件来自定义标签的外观。
spacing: 标签之间的水平间距，默认为 8.0。
runSpacing: 行与行之间的垂直间距，默认为 8.0。
alignment: 标签的对齐方式，默认为 WrapAlignment.start。

自定义标签

你可以通过 tagBuilder 参数来自定义标签的外观。例如，你可以使用 Chip 小部件来创建一个带有删除按钮的标签：

tagBuilder: (context, tag) {
  return Chip(
    label: Text(tag),
    backgroundColor: Colors.blue[100],
    deleteIcon: Icon(Icons.close),
    onDeleted: () {
      // Handle tag deletion
    },
  );
}