我正在做一个小项目,试图学习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)
),
],
),
),
1条答案
按热度按时间s71maibg1#
您可以使用此小部件:
并像这样使用它:
还请记住,
_images
是您配置文件映像列表。