Flutter圆形列表展示插件circle_list的使用

circle_list 是一个Flutter插件，用于创建圆形布局的列表。它可以轻松地将多个子组件排列成一个圆形，并且提供了丰富的自定义选项。

添加依赖

首先，在你的 pubspec.yaml 文件中添加 circle_list 依赖：

dependencies:
  circle_list: ^1.0.2

然后执行 flutter pub get 来安装这个包。

基本用法

下面是一个简单的例子，展示了如何使用 CircleList 组件来创建一个包含10个图标的圆形列表。

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

class ShowDemoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(backgroundColor: Colors.white, title: Text('Circle List Demo')),
      body: Center(
        child: CircleList(
          origin: Offset(0, 0),
          children: List.generate(10, (index) {
            return Icon(
              Icons.details,
              color: index % 2 == 0 ? Colors.blue : Colors.orange,
            );
          }),
        ),
      ),
    );
  }
}

这段代码将会生成一个如下的效果：

添加渐变背景

如果你想为 CircleList 添加一个渐变背景，可以通过设置 gradient 参数实现：

CircleList(
  gradient: LinearGradient(
    colors: [Colors.redAccent, Colors.blueAccent],
  ),
  origin: Offset(0, 0),
  children: List.generate(10, (index) {
    return Icon(
      Icons.details,
      color: index % 2 == 0 ? Colors.blue : Colors.orange,
    );
  }),
)

这将产生如下效果：

自定义内外圆颜色

除了渐变背景外，你还可以单独设置内圆和外圆的颜色：

CircleList(
  innerCircleColor: Colors.redAccent,
  outerCircleColor: Colors.greenAccent,
  origin: Offset(0, 0),
  children: List.generate(10, (index) {
    return Icon(
      Icons.details,
      color: index % 2 == 0 ? Colors.blue : Colors.orange,
    );
  }),
)

效果图如下：

中心部件

你可以通过 centerWidget 属性在圆形列表的中心放置任何部件，比如头像图片：

CircleList(
  origin: Offset(0, 0),
  children: List.generate(10, (index) {
    return Icon(
      Icons.details,
      color: index % 2 == 0 ? Colors.blue : Colors.orange,
    );
  }),
  centerWidget: ClipRRect(
      borderRadius: BorderRadius.all(Radius.circular(100)),
      child: Image.asset("images/avator.jpg")),
)

这将产生如下效果：

完整示例

为了让你更清楚地了解如何在项目中使用 circle_list 插件，这里提供了一个完整的示例程序：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ShowDemoPage(),
    );
  }
}

class ShowDemoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Circle List Example'), backgroundColor: Colors.white),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CircleList(
              gradient: LinearGradient(
                colors: [Colors.redAccent, Colors.blueAccent],
              ),
              origin: Offset(0, 0),
              children: List.generate(10, (index) {
                return Icon(
                  Icons.details,
                  color: index % 2 == 0 ? Colors.blue : Colors.orange,
                );
              }),
            ),
            SizedBox(height: 20),
            CircleList(
              innerCircleColor: Colors.redAccent,
              outerCircleColor: Colors.greenAccent,
              origin: Offset(0, 0),
              children: List.generate(10, (index) {
                return Icon(
                  Icons.details,
                  color: index % 2 == 0 ? Colors.blue : Colors.orange,
                );
              }),
            ),
            SizedBox(height: 20),
            CircleList(
              origin: Offset(0, 0),
              children: List.generate(10, (index) {
                return Icon(
                  Icons.details,
                  color: index % 2 == 0 ? Colors.blue : Colors.orange,
                );
              }),
              centerWidget: ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(100)),
                  child: Image.network('https://example.com/path/to/avatar.jpg', width: 80, height: 80)),
            ),
          ],
        ),
      ),
    );
  }
}

这个例子包含了三种不同风格的 CircleList，并且把它们放在一个页面上进行展示。你可以根据自己的需求调整这些参数，以达到最佳的视觉效果。

参数说明

以下是 CircleList 的一些主要参数及其作用：

• innerRadius: 内圆半径。
• outerRadius: 外圆半径。
• childrenPadding: 子元素之间的间距。
• initialAngle: 初始旋转角度。
• outerCircleColor: 外圆颜色。
• innerCircleColor: 内圆颜色。
• gradient: 渐变色配置。
• origin: 圆形列表的原点位置。
• children: 圆形列表中的子组件列表。
• isChildrenVertical: 子组件是否垂直排列。
• rotateMode: 旋转模式。
• innerCircleRotateWithChildren: 内圆是否跟随子组件一起旋转。
• showInitialAnimation: 是否显示初始动画。
• centerWidget: 圆心处的部件。
• onDragStart, onDragUpdate, onDragEnd: 拖拽事件回调函数。
• animationSetting: 动画设置。

更多详细信息，请参考 GitHub上的官方文档。

希望以上内容能够帮助你更好地理解和使用 circle_list 插件！如果有任何问题或需要进一步的帮助，请随时提问。