Flutter标签胶囊组件插件tag

Flutter标签胶囊组件插件`tag_capsule`的使用

在Flutter开发中，有时我们需要一个简单且美观的标签胶囊组件来展示分类、标签或其他信息。本文将介绍如何使用tag_capsule插件来快速实现这一功能。

安装插件

首先，在pubspec.yaml文件中添加tag_capsule依赖：

dependencies:
  tag_capsule: ^1.0.0

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

flutter pub get

使用示例

以下是一个完整的示例代码，展示如何使用tag_capsule插件创建一个带有不同样式的标签胶囊组件。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Tag Capsule 示例'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 创建一个基本的标签胶囊
              TagCapsule(
                label: '热门',
                color: Colors.blue,
                textColor: Colors.white,
                borderRadius: 8.0,
              ),
              SizedBox(height: 16.0), // 添加间距
              // 创建一个带边框的标签胶囊
              TagCapsule(
                label: '推荐',
                color: Colors.transparent,
                borderColor: Colors.green,
                textColor: Colors.green,
                borderWidth: 2.0,
                borderRadius: 10.0,
              ),
              SizedBox(height: 16.0),
              // 创建一个带阴影的标签胶囊
              TagCapsule(
                label: '折扣',
                color: Colors.orange,
                shadowColor: Colors.orange.shade300,
                textColor: Colors.white,
                borderRadius: 12.0,
                elevation: 4.0,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

itying888 1楼•22 天前

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

tag_capsule 是一个用于 Flutter 的标签胶囊组件插件，它可以帮助你快速创建漂亮的标签胶囊样式。这个插件通常用于显示标签、分类、关键词等场景。

安装

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

dependencies:
  flutter:
    sdk: flutter
  tag_capsule: ^1.0.0  # 请根据最新版本号进行替换

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

基本用法

tag_capsule 插件提供了 TagCapsule 组件，你可以通过简单的配置来创建标签胶囊。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Tag Capsule Example'),
        ),
        body: Center(
          child: TagCapsule(
            tags: ['Flutter', 'Dart', 'Mobile', 'UI'],
            onTap: (tag) {
              print('Tag tapped: $tag');
            },
          ),
        ),
      ),
    );
  }
}

参数说明

TagCapsule 组件支持以下参数：

tags: 一个字符串列表，表示要显示的标签。
onTap: 当用户点击标签时的回调函数，参数为被点击的标签。
textStyle: 标签文本的样式。
backgroundColor: 标签的背景颜色。
borderColor: 标签的边框颜色。
borderRadius: 标签的圆角半径。
padding: 标签的内边距。
margin: 标签的外边距。
alignment: 标签的对齐方式。

自定义样式

你可以通过传递不同的参数来自定义标签的样式。例如：

TagCapsule(
  tags: ['Flutter', 'Dart', 'Mobile', 'UI'],
  onTap: (tag) {
    print('Tag tapped: $tag');
  },
  textStyle: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
  backgroundColor: Colors.blue,
  borderColor: Colors.blueAccent,
  borderRadius: 20.0,
  padding: EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
  margin: EdgeInsets.all(4.0),
  alignment: WrapAlignment.center,
)