如何绘制彼此重叠的圆形头像的水平列表

Question

我有一个row包含 的列表circle avatars widgets，其中是人员的个人资料图片。

Row(children: [
  for (var i in listOfEvents[i].attendeesList)
      CircleAvatar(
         backgroundImage: NetworkImage("https://github.com/identicons/guest.png"),
         radius: 18,
      ),
  ],
 )

我正在寻找一种方法将所有圆形头像向左移动一点，以便头像看起来像是彼此叠在一起以节省空间

就像这个插图

我一直在尝试使用添加负填充或负位置，Padding widget但它不起作用

如果有人知道如何做到这一点那就太好了！

Answer 1

您可以使用Stack将您的头像小部件包装在Positioned小部件中，并且您可以使用半径来调整重叠，如下所示：

@override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(30),
      child: Stack(
        children: List.generate(
          listOfEvents[i].attendeesList.length, (index) {
            return Positioned(
              left: index * 30,
              child: const CircleAvatar(
                backgroundImage: NetworkImage("https://avatars.githubusercontent.com/u/61495501?v=4"),
                radius: 30,
              )
            );
          }
        )
      )
    );
  }

你最终会得到这样的结果：