如何在flutter中实现这个设计

Question

所以我正在尝试重新设计附图中的内容。

（https://i.sstatic.net/65jHd8zB.jpg）

我尝试将项目排列在堆栈中，然后使用位置小部件来定位不同的容器项目，但我无法实现共享图片中共享的内容。考虑到我们从后端获取 JSON 格式的数据，我不知道最好的方法。

Answer 1

如果您有状态管理并且您的视图订阅了此数据，那么数据来自后端这一事实并不重要。

CachedNetworkImage

最有可能用于在接收到数据时显示图像。要以圆形显示图像，您可以执行以下操作：

class CircularWidgetLayout extends StatelessWidget {
  final List<Widget> widgets;
  final double radius;

  const CircularWidgetLayout({
    Key? key,
    required this.widgets,
    required this.radius,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final size = Size(radius * 2, radius * 2);
    final center = Offset(size.width / 2, size.height / 2);
    final angleIncrement = 360 / widgets.length;
    final angleFactor = pi / 180;

    return Stack(
      children: widgets.mapIndexed((index, widget) {
        final angle = index * angleIncrement;
        final x = center.dx + radius * cos(angle * angleFactor);
        final y = center.dy + radius * sin(angle * angleFactor);

        final randomRotation = Random().nextDouble() * 360;

        return Positioned(
          left: x,
          top: y,
          child: Transform.rotate(
            angle: randomRotation * angleFactor,
            child: widget,
          ),
        );
      }).toList(grawable: false),
    );
  }
}