Flutter自定义卡片标题插件phoenix_card_title的使用

描述

phoenix_card_title 是一个用于创建自定义卡片标题的 Flutter 插件。它提供了灵活的配置选项，可以轻松地定制标题的样式和行为。

特性

• 支持自定义标题文本样式。
• 支持添加副标题或辅助信息。
• 提供点击事件回调功能。
• 可以设置箭头图标。

开始使用

添加依赖

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

dependencies:
  phoenix_card_title: ^版本号

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

初始化

在应用启动时，需要初始化 BaseInit，并配置 CardTitleTotalConfig 来设置全局样式。

[@override](/user/override)
void initState() {
  super.initState();
  
  // 初始化全局配置
  BaseTotalConfig totalConfig = BaseTotalConfig();

  CardTitleTotalConfig titleTotalConfig = CardTitleTotalConfig(
      cardTitleConfig: CardTitleConfig(
          accessoryTextStyle: BaseTextStyle(color: Colors.red),
          detailTextStyle: BaseTextStyle(color: Colors.red),
          titleTextStyle: BaseTextStyle(color: Colors.red)));
  totalConfig.cardTitleTotalConfig = titleTotalConfig;

  BaseInit.register(totalConfig: totalConfig);
}

使用示例

以下是一个完整的示例代码，展示了如何使用 phoenix_card_title 插件来创建自定义卡片标题。

import 'package:flutter/material.dart';
import 'package:phoenix_card_title/phoenix_card_title.dart';
import 'package:phoenix_base/phoenix.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: TitleExample(),
    );
  }
}

class TitleExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('自定义卡片标题示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 箭头标题
            ActionCardTitle(
              title: '箭头标题',
              onTap: () {
                // 点击事件处理
                print('ActionCardTitle is clicked');
              },
            ),

            // 非箭头标题
            CommonCardTitle(
              title: '非箭头非箭头',
              accessoryText: '状态标签',
              subTitleWidget: const Text('subTitle'),
              onTap: () {
                // 点击事件处理
                print('CommonCardTitle is clicked');
              },
            ),

            // 带详情文本的标题
            CommonCardTitle(
              title: '非箭头Title',
              detailTextString: '房产证地址与楼盘字房产证地址与楼盘字房产证地址与楼盘字房产证地址与楼盘字',
              subTitleWidget: const Text('subTitle'),
              onTap: () {
                // 点击事件处理
                print('CommonCardTitle with detail text is clicked');
              },
            )
          ],
        ),
      ),
    );
  }
}