如何创建由组图标照片中的用户组成的组聊天图标（组中用户的拼贴画）

Question

在扑朔迷离中，您如何通过将组中用户的照片缝合到类似于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),
                    ],
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }


}

Answer 2

这涉及使用颤振布局。 （请注意，提供的图片链接无效） 您可以尝试

return Scaffold(
    appBar: AppBar(title: Text('Flow Layout Flutter')),
    body: Center(
    child: Container(
        color: Colors.teal,
        child: Flow(
        delegate: SampleFlowDelegate(),
        children: <Widget>[
            buildItem(0),
            buildItem(1),
            buildItem(2),
            buildItem(3),
            buildItem(4),
            buildItem(5),
            buildItem(6),
        ],
        ),
     ),
   ),
);

或

Wrap(
  spacing: 8.0, // gap between adjacent chips
  runSpacing: 4.0, // gap between lines
  children: <Widget>[
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('AH')),
      label: Text('Hamilton'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('ML')),
      label: Text('Lafayette'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('HM')),
      label: Text('Mulligan'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('JL')),
      label: Text('Laurens'),
    ),
  ],
)

根据您的情况，您可以通过编程方式添加图像小部件。