如何绘制和相互重叠的圆形头像水平列表

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,
      ),
  ],
 )

我正在寻找一种方法将所有圆圈头像向左移动一点，这样头像看起来像是彼此重叠以节省 space

喜欢这个插图

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

如果有人知道怎么做，那就太好了！

Answer 1

使用堆栈小部件。令人印象深刻。试试这个。您可以添加阴影以使其看起来更好。记得用你的替换我的假列表:)

       SizedBox(
        height: 40,
        child: Stack(
          children: [
            for (var i = 0; i < [1, 2, 3, 4].length; i++)
              Positioned(
                left: (i * (1 - .4) * 40).toDouble(),
                top: 0,
                child: CircleAvatar(
                  backgroundColor: Colors.blue,
                  child: Container(
                    clipBehavior: Clip.antiAlias,
                    decoration: BoxDecoration(
                        border: Border.all(color: Colors.grey, width:2),
                        borderRadius: BorderRadius.circular(50)),
                    padding: const EdgeInsets.all(5.0),
                    child: Image.network(
                      "https://github.com/identicons/guest.png",
                    ),
                  ),
                  radius: 18,
                ),
              ),
          ],
        ),
      ),

Answer 2

您可以使用 Stack 将您的头像小部件包装在 Positioned 小部件中，并且您可以使用 radius调整重叠，如：

@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,
              )
            );
          }
        )
      )
    );
  }

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

如何绘制和相互重叠的圆形头像水平列表

How to draw and Horizontal list of circle avatars that are on top of each other

flutter

flutter-layout