Flutter圆形化布局插件Circlify的使用

Circlify 是一个轻量且强大的Flutter包，用于创建可自定义的圆形图表，并支持平滑动画。非常适合在仪表板中可视化数据或为应用添加动态径向元素。

📊 Demo

以下是 Circlify 的一些示例演示：

🌟 特性

• 高度可定制的圆形图表
• 平滑动画
• 支持交互和动态更新
• 可自定义的 CirclifyItem 子类
• 易于集成到任何Flutter项目中

📦 安装

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

dependencies:
  circlify: ^<latest-version>

请确保将 <latest-version> 替换为最新的版本号。

🚀 使用

以下是一个快速入门的例子：

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

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

  final List<CirclifyItem> items = [
    CirclifyItem(color: Colors.red, value: 100),
    CirclifyItem(color: Colors.green, value: 100),
    CirclifyItem(color: Colors.blue, value: 100),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          width: 200,
          height: 200,
          child: Circlify(
            items: items,
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(const MaterialApp(home: App()));
}

⚠️ 注意事项：正确初始化 CirclifyItem

为了确保性能流畅，所有 CirclifyItem 对象必须仅初始化一次（如果未提供 id）。避免在每次重建时重新创建 CirclifyItem 实例。

🚫 错误用法

Circlify(
  items: [
    CirclifyItem(color: Colors.red, value: 100),
    CirclifyItem(color: Colors.green, value: 100),
    CirclifyItem(color: Colors.blue, value: 100),
  ],
)

上述示例的问题在于每次重建时都会创建新的 CirclifyItem 对象，导致不必要的重新渲染和性能问题。

✅ 正确用法

确保 CirclifyItem 对象只创建一次并重用，如下所示：

示例 1：为每个项分配 id

Circlify(
  items: [
    CirclifyItem(id: '1', color: Colors.red, value: 100),
    CirclifyItem(id: '2', color: Colors.green, value: 100),
    CirclifyItem(id: '3', color: Colors.blue, value: 100),
  ],
)

示例 2：单独定义 CirclifyItem 列表

List<CirclifyItem> items = [
  CirclifyItem(color: Colors.red, value: 100),
  CirclifyItem(color: Colors.green, value: 100),
  CirclifyItem(color: Colors.blue, value: 100),
];

Circlify(
  items: items,
)

通过遵循这些模式，您可以确保图表保持高性能和高效。

📏 标签

可以使用 label 属性为每个项添加自定义标签，这使得每个圆弧段具有增强的视觉表示。

🎨 带有标签的示例

Circlify(
  segmentWidth: 100,
  labelStyle: const TextStyle(
    color: Colors.white,
    fontSize: 20,
    fontWeight: FontWeight.w700,
  ),
  items: [
    CirclifyItem(
      id: '1',
      color: Colors.red,
      value: 100,
      label: 'Red',
    ),
    CirclifyItem(
      id: '2',
      color: Colors.green,
      value: 100,
      label: 'Green',
    ),
    CirclifyItem(
      id: '3',
      color: Colors.blue,
      value: 100,
      label: 'Blue',
    ),
  ],
)

✨ 标签的关键要点

• 使用 label 属性为每个项添加描述性文本。
• 使用 labelStyle 属性自定义标签的外观，该属性接受一个 TextStyle 对象。
• 确保每个 CirclifyItem 具有唯一的 id，以优化重新渲染并保持一致的视觉布局。

🛠 自定义 CirclifyItem

您还可以创建自己的 CirclifyItem 子类并在 Circlify 小部件中使用它：

class CustomCircleChartItem extends CirclifyItem {
  final String name;

  CustomCircleChartItem({
    required super.color,
    required super.value,
    required super.id,
    required this.name,
  });
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          width: 200,
          height: 200,
          child: Circlify(
            items: [
              CustomCircleChartItem(
                color: Colors.purple,
                value: 150,
                id: 'item1',
                name: 'Custom Item 1',
              ),
              CustomCircleChartItem(
                color: Colors.orange,
                value: 100,
                id: 'item2',
                name: 'Custom Item 2',
              ),
            ],
          ),
        ),
      ),
    );
  }
}

⚙️ Circlify 参数

📝 CirclifyItem 参数

💬 反馈与贡献

如果您遇到任何问题或有任何建议，请随时在 GitHub 上打开一个问题。欢迎贡献！

📝 许可

该项目根据 BSD 3-Clause 许可证许可 - 详情请参见 LICENSE 文件。

Made with ❤️ by zeffbtw.

完整示例代码

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

void main() {
  runApp(const MaterialApp(home: App()));
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            SizedBox(
              width: 300,
              height: 300,
              child: Circlify(
                segmentWidth: 100,
                labelStyle: const TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                  fontWeight: FontWeight.w700,
                ),
                items: [
                  CirclifyItem(
                    id: '1',
                    color: Colors.red,
                    value: 100,
                    label: 'Red',
                  ),
                  CirclifyItem(
                    id: '2',
                    color: Colors.green,
                    value: 100,
                    label: 'Green',
                  ),
                  CirclifyItem(
                    id: '3',
                    color: Colors.blue,
                    value: 100,
                    label: 'Blue',
                  ),
                ],
              ),
            ),
            TextButton(
              onPressed: () {
                // 导航到其他示例页面
              },
              child: const Text('To custom value demo'),
            ),
            TextButton(
              onPressed: () {
                // 导航到动画示例页面
              },
              child: const Text('To animation demo'),
            ),
          ],
        ),
      ),
    );
  }
}

以上是关于 Flutter 圆形化布局插件 Circlify 的详细使用说明及示例代码。希望对您有所帮助！