我目前正在尝试在用户搜索另一个用户后显示来自社交媒体的用户数据。有一个通用的搜索用户功能,可以像下面这样使用 firebase 搜索用户
String name = '';
List<Map<String, dynamic>> data = [];
addDataaUser() async {
for (var element in data) {
FirebaseFirestore.instance.collection('users').add(element);
}
print('Add User Data');
}
@override
void initState() {
super.initState();
addDataaUser();
}
AppBar buildSearchField() {
return AppBar(
title: Card(
child: TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.search),
),
onChanged: ((val) {
setState(() {
name = val;
});
}),
),
),
);
}
这是用于显示用户列表的 ListView 构建器和 ListTile。 onTap 函数指向另一个页面,即 ProfileOthers() 并且在那里我需要来自所选数据的变量映射。
//Scaffold
Scaffold(
appBar: buildSearchField(),
body: StreamBuilder<QuerySnapshot>(
stream: FirebaseFirestore.instance.collection('users').snapshots(),
builder: (context, snapshot) {
return (snapshot.connectionState == ConnectionState.waiting)
? Center(
child: CircularProgressIndicator(),
)
: ListView.builder(
itemCount: snapshot.data!.docs.length,
itemBuilder: (context, index) {
var data = snapshot.data!.docs[index].data()
as Map<String, dynamic>;
if (name.isEmpty) {
return ListTile(
title: Text(
data['name'],
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.bold),
),
subtitle: Text(
data['email'],
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.bold),
),
leading: CircleAvatar(
backgroundImage: NetworkImage(data['userImage']),
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProfileOthers()),
);
},
);
}
if (data['name']
.toString()
.toLowerCase()
.startsWith(name.toLowerCase())) {
return ListTile(
title: Text(
data['name'],
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.bold),
),
subtitle: Text(
data['email'],
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.bold),
),
leading: CircleAvatar(
backgroundImage: NetworkImage(data['userImage']),
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProfileOthers()),
);
},
);
}
return Container();
});
},
),
);//End of Scaffold
用户点击其中一个数据后,它应该像这样显示选定的用户数据
如您所见,我不知道如何通过 [index] 从 ListTile 中获取选定的快照文档。
有谁知道我如何将选定的地图数据放到另一个页面中显示吗?