Flutter -数据库中的用户图像如示例所示对齐

2cmtqfgy 于 2022-12-05 发布在 Flutter

关注(0)|答案(1)|浏览(90)

我正在做一个小项目，试图学习Flutter。我有卡事件从我的数据库拉，我想直观地显示当前用户加入。我类似的方式像图像波纹管。
[！[在此处输入图像说明][1]][1]
我最大的问题是前端部分如何安排他们这样。
我已经有了完整的数据库。
其结构是每个活动都有一个ID和其余信息，然后它有一个组，该组是所有加入的用户，然后每个用户[1][2][3]都有他们的用户详细信息和用户映像：“avatar1example.png”就是其中之一。我知道如何提取图像id并将其与imageasset连接（图像是预设的头像，而不是用户上传的），所以我的问题主要是前端部分+数字。
编辑：使用下面的代码后，我得到了这个。

Widget userImages (data) {
      int limmit = 3;
    List<Widget> _children = [];
    int index = 0;
    for (var element in data.users) {
      if (index < limmit) {
        Widget image = Image(
          image: AssetImage(element.userDetails.imageUrl),
        );
        if (index != 0) {
          _children.add(Positioned(
            child: image,
            left: index * 20.0,
            top: 0,
          ));
        } else {
          _children.add(image);
        }
      } else {
        int number = data.users.length - limmit;
        _children.add(Positioned(
          left: index * 20.0,
          top: 0,
          child: CircleAvatar(
            child: Center(child: Text('+$number')),
            radius: 15,
          ),
        ));
        break;
      }
      index++;
    };
    return Container(
      width: double.infinity,
      height: 30,
      child: Stack(
        children: _children,
      ),
    );
  }

我是这样用的

Container(
                                                        decoration: BoxDecoration(color: Colors.pink),
                                                        child: Row(
                                                          mainAxisAlignment:
                                                              MainAxisAlignment
                                                                  .center,
                                                          children: [
                                                            Container(
                                                              width: MediaQuery.of(context).size.width * 0.6,
                                                              alignment: Alignment.centerLeft,
                                                                child: cardDescJoined(
                                                                    snapshot.data[
                                                                        index])),
                                                            Container(
                                                              height: 80,
                                                              decoration: BoxDecoration(color: Colors.yellow),
                                                              width: MediaQuery.of(context).size.width * 0.9,
                                                              child: userImages(snapshot.data[index].group)
                                                            ),
                                                          ],
                                                        ),
                                                      ),

flutter

来源：https://stackoverflow.com/questions/74654847/flutter-user-images-from-database-aligned-like-the-example

1条答案

按热度按时间

s71maibg1#

您可以使用此小部件：

_buildImages() {
    int limmit = 3;
    List<Widget> _children = [];
    int index = 0;
    for (var element in _images) {
      if (index < limmit) {
        Widget image = Container(
          decoration: BoxDecoration(
              shape: BoxShape.circle,
              border: Border.all(width: 1, color: Colors.white)),
          child: CircleAvatar(
            foregroundImage: AssetImage(element),
            radius: 15,
          ),
        );
        if (index != 0) {
          _children.add(Positioned(
            child: image,
            left: index * 20,
            top: 0,
          ));
        } else {
          _children.add(image);
        }
      } else {
        int number = _images.length - limmit;
        _children.add(Positioned(
          left: index * 20,
          top: 0,
          child: Container(
            decoration: BoxDecoration(
                shape: BoxShape.circle,
                border: Border.all(width: 1, color: Colors.white)),
            child: CircleAvatar(
              child: Center(child: Text('+$number')),
              radius: 15,
            ),
          ),
        ));
        break;
      }
      index++;
    }
    return SizedBox(
      width: double.infinity,
      height: 30 + 2, // image height + 2 white border width
      child: Stack(
        children: _children,
      ),
    );
  }

并像这样使用它：