在不重叠的形状中颤动不同大小的圆圈答案

【问题标题】：Flutter Different sized Circles in a shape that don't overlap在不重叠的形状中颤动不同大小的圆圈
【发布时间】：2021-02-04 23:49:33
【问题描述】：

我是新来的，有这个问题。如何将具有不同半径的圆放置在画布上而不会以圆形相互重叠？请注意，圆的半径不同。我正在使用 CustomPaint() 和 Paint() 来绘制这些圆圈。非常感谢您的帮助

【问题讨论】：

首先对于圆形，使用可以简单地使用带有BoxShape.circle的Container来装饰而不是CustomPaint。关于你的动画，从不同方向在一个点吸引圆圈不是问题。您可以简单地在屏幕外随机生成它们并将它们设置为动画到中心（宽度 * 0.5，高度 * 0.5）。但是您可能需要编写自己的自定义代码来进行碰撞检测和处理。

标签： flutter

【解决方案1】：

我接受了Sarvesh Dalvi's 的评论并使用了Container 而不是Custom Paint。后来移动到 Ink 和 Inkwell 以获得单击气泡时的涟漪效果。我使用flutter_scatter 以圆形/弧形形式显示圆圈，并使用 SlideTransition 为气泡提供浮动效果。下面是我想出的代码。

// 圆的代码

child: Ink(
      width: widget.bubbleData.radius,
      height: widget.bubbleData.radius,
      decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage(widget.bubbleData.image),
            fit: BoxFit.scaleDown,
          ),
          shape: BoxShape.circle,
          border: Border.all(color: Colors.transparent),
          gradient: LinearGradient(colors: widget.bubbleData.colors)),
      child: InkWell(
        customBorder: CircleBorder(),
        splashColor: widget.bubbleData.splashColor,
        onTap: () {
          print("Circle Tapped");
        },

//圆弧形式的代码

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Scatter(
          delegate:
              LogarithmicSpiralScatterDelegate(
                  ratio: 1, a: 1, b: 1, step: 0.01, rotation: 0.3),
              children: bubbleList),
    ));
  }

【讨论】：