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

Question

在flutter中，你如何通过将群组中用户的照片拼接成一个拼贴风格的图标来创建一个群聊图标？例如，像这样的图片，但不是用户姓名的首字母，而是他们的用户照片：

​

]1XMJ)

Answer 1

我相信你正在寻找的东西或多或少是这样的：

​

​

如果是这样的话，您所需要的就是一个带有Column的圆形装饰的Container，它有两行包含您的头像的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'),
    ),
  ],
)

在您的示例中，您可以通过编程方式添加图像小部件。