dart - 如何创建由群图标照片中的用户组成的群聊图标(群中用户的拼贴)

Question

在 flutter 中，如何通过将群组中用户的照片拼接成一个类似于 facebook 或 snapchat 的拼贴风格图标来创建群聊图标？例如，喜欢这张图片，但不是用户的姓名首字母，而是他们的用户照片:

] 1 XMJ)

Answer 1

我相信您正在寻找或多或少像这样的东西:

如果是这样，您所需要的只是一个装饰有圆圈的 Container，其中包含一个 Column，并有两个 Expanded 行头像(我正在使用彩色容器代替它)。

您可以定义容器的半径(圆形)，头像将相应地调整大小(每个 50%)。

但是，请记住，这不符合纵横比(您可以检查 AspectRatio)，因为我不知道这是否是您要查找的内容。建议的 Wrap 小部件也可以工作，但是，我发现使用 Flex 小部件更适合这种情况。

class GroupAvatar extends StatelessWidget {
  final double _containerRadius = 300.0;

Widget _buildAvatar(double avatarRadius, Color color) {
    return Expanded(
      child: Container(
        color: color,
        height: avatarRadius,
        width: avatarRadius,
      ),
    );
  }
  @override
  Widget build(BuildContext context) {
    final double avatarRadius = _containerRadius * 0.5;
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            height: _containerRadius,
            width: _containerRadius,
            decoration: BoxDecoration(
              color: Colors.white,
              shape: BoxShape.circle,
            ),
            child: ClipOval(
              clipBehavior: Clip.antiAlias,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      _buildAvatar(avatarRadius, Colors.green),
                      _buildAvatar(avatarRadius, Colors.blue),
                      _buildAvatar(avatarRadius, Colors.black),
                    ],
                  ),
                  Row(
                    children: <Widget>[
                      _buildAvatar(avatarRadius, Colors.yellow),
                      _buildAvatar(avatarRadius, Colors.red),
                      _buildAvatar(avatarRadius, Colors.orange),
                    ],
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }


}