【发布时间】：2021-10-11 17:42:42
【问题描述】：
我对 Flutter 中的编码相当陌生，目前，我正在尝试开发一个图像分类应用程序。我有一个 Cloud Firestore 数据库，其中数据库中的每个文档都包含两个字段：图像标签和图像 URL。下面附上一个数据库结构的例子：
Example of the structure of the database
我正在尝试根据图像各自的标签对图像进行分类，并将它们显示在标签应显示在可滚动水平 ListView 顶部的位置，而属于标签的图像将显示在可滚动水平ListView 下方。此外，水平的ListView 小部件应包含在垂直的ScrollView 中。要实现的图像显示示例如下：
Example of the display of images to be achieved
我已经尝试过ListView 和SingleChildScrollView 之类的方法，但我最接近目标的是使用StreamBuilder 和ListView.builder，如下面的代码所示。
代码：
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.orange[400],
centerTitle: true,
title: Text('Revision'),
titleTextStyle: TextStyle(
fontSize: 24.0,
),
),
body: StreamBuilder(
stream: FirebaseFirestore.instance.collection('Images').snapshots(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot){
if(!snapshot.hasData){
return Center(
child: CircularProgressIndicator(),
);
}
return ListView(
children: snapshot.data.docs.map((document) {
return SizedBox(
height: 300,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 1,
itemBuilder: (_, __) => Container(
margin: EdgeInsets.all(12),
width: 300,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(document['url']),
fit: BoxFit.scaleDown,
)
),
),
),
);
}).toList(),
);
}
),
);
即便如此，结果仍然与前面示例中所示的图像显示相距甚远：
Example of the result of the code
结果的显示似乎是应用程序中非常常见的结构，但是，我似乎无法让它工作好几天。 :(
任何帮助将不胜感激，如果可能的话，请问是否可以修改上面的代码以实现上述结果。谢谢你，祝你有美好的一天！
编辑（这是我设法完全显示标签和图像但无法对其进行分类的代码）：
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.orange[400],
centerTitle: true,
title: Text('Revision'),
titleTextStyle: TextStyle(
fontSize: 24.0,
),
),
body: StreamBuilder(
stream: FirebaseFirestore.instance.collection('Images').snapshots(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot){
if(!snapshot.hasData){
return Center(
child: CircularProgressIndicator(),
);
}
return ListView(
children: snapshot.data.docs.map((document) {
return Center(
child: Column(
children: [
SizedBox(height: 20),
Text(document['label']),
SizedBox(height: 20),
Container(
height: MediaQuery.of(context).size.height / 4,
width: MediaQuery.of(context).size.width / 1,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(document['url']),
fit: BoxFit.scaleDown
)
),
),
],
),
);
}).toList(),
);
}
),
);
}
【问题讨论】：
标签： firebase flutter listview google-cloud-firestore flutter-layout