如何解决如何遍历地图列表并在颤振列表视图中显示文本小部件？
我对颤振非常陌生，我试图从内容列表中通过 for 循环显示列表视图，但我能够打印一个列表行，这是一次迭代，因为返回只触发一次。如何遍历完整列表并显示所有列表视图元素？ 以下是地图内容列表
List<Map<String,String>> users = [
{"name": "Staff 1","status": "Online"},{"name": "Staff 2",{"name": "Staff 3","status": "Offline"},{"name": "Vehicle 1","status": "Available"},{"name": "Vehicle 2","status": "Unavailable"},{"name": "Team 1","status": "Active"},{"name": "Team 2","status": "Not Active"},];
Widget Listviewbuilder() {
for (var i = 0; i < users.length; i++) {
print(i);
return Expanded(
child: ListView(
children: <Widget>[
GestureDetector(
onTap: () {
Navigator.pushNamed(
context,'/chatscreen',);
},child: ListTile(
leading: CircleAvatar(
radius: 20,backgroundImage: Assetimage("assets/profileavatar.png")),title: Text(users[i]['name']),subtitle: Text("User -ID"),trailing: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,// added line
mainAxisSize: MainAxisSize.min,children: <Widget>[
Text(
users[i]['status'],style: TextStyle(
color: Colors.green,fontSize: 20,),],);
}
}
这将仅显示列表中的第一个元素，如何实现显示列表用户中存在的所有列表视图元素？任何建议都会有所帮助
解决方法
这里的问题是 - 您在第一个循环中返回结果。这就是为什么你只能得到列表中的第一个元素。
您需要在 ListView 小部件中遍历您的地图。
List<Map<String,String>> users = [
{"name": "Staff 1","status": "Online"},{"name": "Staff 2",{"name": "Staff 3","status": "Offline"},{"name": "Vehicle 1","status": "Available"},{"name": "Vehicle 2","status": "Unavailable"},{"name": "Team 1","status": "Active"},{"name": "Team 2","status": "Not Active"},];
Widget ListViewBuilder(BuildContext context) {
return Expanded(
child: ListView(
children: <Widget>[
...users.map( (u) =>
<Widget> [GestureDetector(
onTap: () {
Navigator.pushNamed(
context,'/chatscreen',);
},child: ListTile(
leading: CircleAvatar(
radius: 20,backgroundImage: AssetImage("assets/profileavatar.png")),title: Text(u['name']),subtitle: Text("User -ID"),trailing: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,// added line
mainAxisSize: MainAxisSize.min,children: <Widget>[
Text(
u['status'],style: TextStyle(
color: Colors.green,fontSize: 20,),SizedBox(
width: 20,InkWell(
onTap: () {
Navigator.pushNamed(
context,'/viewlocation',);
},child: Icon(
Icons.add_location,color: Colors.green,size: 40,Container(
decoration: BoxDecoration(
color: Colors.green,border: Border.all(
color: Colors.green,borderRadius:
BorderRadius.all(Radius.circular(20))),child: InkWell(
onTap: () async {
const number =
'08592119XXXX'; //set the number here
bool res =
await FlutterPhoneDirectCaller.callNumber(
number);
},child: Icon(
Icons.call,color: Colors.white,)
])),Divider(
color: Colors.black,endIndent: 10,indent: 10,)
]).expand((element) => element).toList(),],);
}
这里发生的事情很少：
-
users.map() 将对列表的每个元素运行提供的函数。
-
由于您要创建两个元素的迷你列表 - GestureDetector 和 Divider，该函数将返回小部件列表
-
你的地图函数的结果将是 [[GestureDetector,Divider],[GestureDetector,...]。这就是为什么我们运行 expand 以将其展平 (https://api.dart.dev/stable/2.10.5/dart-core/Iterable/expand.html)
-
最后，使用扩展运算符 (...) (...users.map( (u) =>) 将元素卸载到包含列表中。所以：
child: ListView(
children: <Widget>[
[GestureDetector,Divider,GestureDetector,Divider]]
变成
child: ListView(
children: <Widget>[
GestureDetector,Divider]
编辑：我在你那里的分隔线上隔开，我同意@Sam Chan 建议 ListView.separated 而不是我之前推荐的 ListView.builder。
对于初学者来说，将您的 ListTile 提取到它自己的小部件并传入几个字符串会更简洁。否则它会很快变得混乱。这是一个例子。
class CustomListTile extends StatelessWidget {
final String name,status;
const CustomListTile({Key key,this.name,this.status}) : super(key: key);
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
Navigator.pushNamed(
context,);
},child: ListTile(
leading: CircleAvatar(
radius: 20,title: Text(name),trailing: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,// added line
mainAxisSize: MainAxisSize.min,children: <Widget>[
Text(
status,style: TextStyle(
color: Colors.green,SizedBox(
width: 20,InkWell(
onTap: () {
Navigator.pushNamed(
context,child: Icon(
Icons.add_location,Container(
decoration: BoxDecoration(
color: Colors.green,border: Border.all(
color: Colors.green,borderRadius: BorderRadius.all(Radius.circular(20))),child: InkWell(
onTap: () async {
const number = '08592119XXXX'; //set the number here
// bool res = await FlutterPhoneDirectCaller.callNumber(number);
},child: Icon(
Icons.call,)
],);
}
}
以下是显示地图列表的完整页面示例。
class DemoPage extends StatelessWidget {
DemoPage({
Key key,}) : super(key: key);
final List<Map<String,];
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Expanded(
child: ListView.separated(
separatorBuilder: (BuildContext context,int index) => Divider(
color: Colors.black,itemCount: users.length,itemBuilder: (context,index) {
// parsing the maps in the list before passing them into the extracted widget
// the itemBuilder iterates through the list
final name = users[index]['name'];
final status = users[index]['status'];
return CustomListTile(name: name,status: status);
},);
}
}
问题在于您在每个循环中都构建了 ListView。您可以使用循环来构建 ListTile 列表并传递给 ListView
但我建议您使用 ListView.separated，它更容易。喜欢
Widget listViewBuilder() {
return Expanded(
child: ListView.separated(
itemCount: users.length,i) {
return GestureDetector(
onTap: () {
Navigator.pushNamed(
context,);
},child: ListTile(
leading: CircleAvatar(
radius: 20,backgroundImage:
AssetImage("assets/profileavatar.png")),title: Text(users[i]['name']),trailing: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,// added line
mainAxisSize: MainAxisSize.min,children: <Widget>[
Text(
users[i]['status'],style: TextStyle(
color: Colors.green,SizedBox(
width: 20,InkWell(
onTap: () {
Navigator.pushNamed(
context,);
},child: Icon(
Icons.add_location,Container(
decoration: BoxDecoration(
color: Colors.green,border: Border.all(
color: Colors.green,borderRadius:
BorderRadius.all(Radius.circular(20))),child: InkWell(
onTap: () async {
const number =
'08592119XXXX'; //set the number here
bool res =
await FlutterPhoneDirectCaller.callNumber(
number);
},child: Icon(
Icons.call,)
])),);
},separatorBuilder: (BuildContext context,int index) {
return Divider(
color: Colors.black,);
}));
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
