Flutter微信标签组件插件wx_chip的使用

通过 wx_chip 插件，开发者可以轻松创建具有微信风格的标签组件。该插件允许用户自定义标签的样式，并支持 Material Design 和 iOS 风格的主题。以下是完整的使用说明和示例代码。

使用说明

安装插件

首先，在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  wx_chip: ^最新版本号

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

flutter pub get

示例代码

以下是一个完整的示例代码，展示如何在 Flutter 应用程序中使用 wx_chip 插件。

示例代码

import 'package:flutter/material.dart';
import 'package:theme_patrol/theme_patrol.dart';
import 'package:wx_chip/wx_chip.dart';
import 'package:wx_text/wx_text.dart';
import 'theme_picker.dart';
import 'sample_appearance.dart';
import 'sample_appearance_mix.dart';
import 'sample_disabled.dart';
import 'sample_severity.dart';
import 'sample_compound.dart';
import 'sample_driven.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // 使用 ThemePatrol 来管理主题
    return ThemePatrol(
      themes: {
        'm2': ThemeConfig.withMode(
          description: 'Material 2',
          light: ThemeData.light(useMaterial3: false),
          dark: ThemeData.dark(useMaterial3: false),
          extensionsBuilder: [
            (context) => WxChipThemeM2(context), // Material 2 风格
          ],
        ),
        'm3': ThemeConfig.withMode(
          description: 'Material 3',
          light: ThemeData.light(useMaterial3: true),
          dark: ThemeData.dark(useMaterial3: true),
          extensionsBuilder: [
            (context) => WxChipThemeM3(context), // Material 3 风格
          ],
        ),
        'ios': ThemeConfig.withMode(
          description: 'iOS',
          light: ThemeData.light(useMaterial3: false),
          dark: ThemeData.dark(useMaterial3: false),
          extensionsBuilder: [
            (context) => WxChipThemeIOS(context), // iOS 风格
          ],
        ),
      },
      initialTheme: 'm2', // 初始主题为 Material 2
      builder: (context, theme, child) {
        return MaterialApp(
          title: 'WxChip Demo',
          theme: theme.lightData,
          darkTheme: theme.darkData,
          themeMode: theme.mode,
          home: const MyHomePage(),
          builder: theme.bootstrap(), // 启动主题切换功能
        );
      },
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              SizedBox(height: 40),
              WxText.displayMedium(
                'WxChip',
                gradient: LinearGradient(
                  colors: [
                    Colors.green,
                    Colors.blue,
                  ],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                ),
                fontWeight: FontWeight.bold,
                letterSpacing: -2,
              ),
              SizedBox(height: 10),
              ThemePicker(), // 主题选择器
              SizedBox(height: 40),
              SampleAppearance(), // 示例：基础样式
              SizedBox(height: 20),
              SampleAppearanceMix(), // 示例：混合样式
              SizedBox(height: 20),
              SampleDisabled(), // 示例：禁用状态
              SizedBox(height: 20),
              SampleSeverity(), // 示例：严重性级别
              SizedBox(height: 20),
              SampleCompound(), // 示例：复合样式
              SizedBox(height: 20),
              SampleDriven(), // 示例：受控组件
              SizedBox(height: 40),
            ],
          ),
        ),
      ),
    );
  }
}

功能模块

1. 基础样式 (SampleAppearance)

展示如何设置基础的标签样式。

// 示例代码
WxChip(
  label: '标签',
  backgroundColor: Colors.blue,
  textColor: Colors.white,
)

2. 混合样式 (SampleAppearanceMix)

展示如何将多个属性组合在一起。

// 示例代码
WxChip(
  label: '混合样式',
  backgroundColor: Colors.purple,
  textColor: Colors.white,
  padding: EdgeInsets.all(8.0),
  borderRadius: BorderRadius.circular(16.0),
)

3. 禁用状态 (SampleDisabled)

展示如何设置禁用状态。

// 示例代码
WxChip(
  label: '禁用标签',
  backgroundColor: Colors.grey,
  textColor: Colors.grey[300],
  enabled: false,
)

4. 严重性级别 (SampleSeverity)

展示如何根据严重性设置不同的颜色。

// 示例代码
WxChip(
  label: '警告',
  severity: Severity.warning,
)

5. 复合样式 (SampleCompound)

展示如何结合多种样式。

// 示例代码
WxChip(
  label: '复合标签',
  backgroundColor: Colors.orange,
  textColor: Colors.white,
  padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
  borderRadius: BorderRadius.circular(20.0),
)

6. 受控组件 (SampleDriven)

展示如何动态控制标签的状态。

// 示例代码
bool _isSelected = false;

WxChip(
  label: '受控标签',
  backgroundColor: _isSelected ? Colors.green : Colors.red,
  onTap: () {
    setState(() {
      _isSelected = !_isSelected;
    });
  },
)