arrays - Flutter - 如何将数组列表映射到小部件
问题描述
我想将数组数据从 MongoDB 传递到小部件列表。但是,我收到“类型 'MappedListIterable<ApplicantsList, Widget>' 不是类型 'List' 的子类型”的错误。有人能帮我吗?
这是我的变量:
List<ApplicantsList> applicants;
var store, store1;
申请人类/构造函数:
class ApplicantsList {
String name;
String contact;
ApplicantsList({this.name, this.contact});
}
从 mongodb 获取数据。(工作正常。我可以得到数据。)
Future <void> getApplicantInfo() async {
AuthService().getRequestorApplicants().then((val) async {
store = val.data[0];
store1 = val.data[1];
for (var i = 0; i < 2; i++) {
applicants =[ ApplicantsList(name: store['parentname'], contact:
store['location']) ];
}
});
}
这是我认为我得到错误的地方。将数据传递给 _PendingCardDonor 小部件时。
Container(
child: StreamBuilder<Object>(
stream: null,
builder: (context, snapshot) {
return Container(
height: MediaQuery.of(context).size.height,
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.vertical,
children: <Widget>[
Column(
children: applicants.map((e) => _PendingCardDonor(e.name, e.contact,"Balubad, Mindoro"),),,
],
));
}
),
),
_PendingCardDonor 小部件
Widget _PendingCardDonor (String name, String age, String location) {
return InkWell(
onTap: () {
},
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: [
BoxShadow(
color: getColorFromHex('#a19c9c'),
offset: Offset(-1, 2),
blurRadius: 4,
),
],
),
margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 10.0),
padding: EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 5.0),
padding: EdgeInsets.all(5.0),
decoration: BoxDecoration(
color: getColorFromHex('#faf7f7'),
borderRadius: BorderRadius.all(Radius.circular(5)),
),
child: Row(
children: [
Icon(Icons.person, color: Colors.black,),
SizedBox(
width: 5,
),
Flexible(
flex: 1,
child: Column(
children: [
Container(
child: AutoSizeText(name,
style: TextStyle(color: Colors.black, fontSize: 16,),
minFontSize: 13,
stepGranularity: 1,
maxLines:2),
),
],
),
),
],
),
),
Container(
margin: EdgeInsets.only(bottom: 5.0),
padding: EdgeInsets.all(5.0),
decoration: BoxDecoration(
color: getColorFromHex('#faf7f7'),
borderRadius: BorderRadius.all(Radius.circular(5)),
),
child: Row(
children: [
Icon(Icons.calendar_today_rounded, color: Colors.black, ),
SizedBox(
width: 5,
),
Text(age + " yrs old",
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 16.0,
color: Colors.black,
)),
],
),
),
Container(
margin: EdgeInsets.only(bottom: 5.0),
padding: EdgeInsets.all(5.0),
decoration: BoxDecoration(
color: getColorFromHex('#faf7f7'),
borderRadius: BorderRadius.all(Radius.circular(5)),
),
child: Row(
children: [
Icon(Icons.location_pin, color: Colors.black,),
SizedBox(
width: 5,
),
Flexible(
child: Column(
children: [
Container(
child: AutoSizeText(location,
style: TextStyle(color: Colors.black, fontSize: 16, ),
minFontSize: 13,
stepGranularity: 1,
maxLines:3),
),
],
),
),
],
),
),
Container(
width: MediaQuery.of(context).size.width,
child: RaisedButton(
elevation: 0.0,
color: getColorFromHex('#FE9C8F'),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
onPressed: () {
Navigator.push(context, PageTransition(type: PageTransitionType.leftToRight, child: ViewPendingApplicant(
upass: widget.upass,
email: widget.email,
name: name,
age: age,
location: location,
)));
},
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(
Icons.folder_open,
color: Colors.white,
),
Padding(
padding: EdgeInsets.only(left: 10.0),
child: Text(
"OPEN",
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
color: Colors.white),
)),
],
),
),
),
],
),
),
);
}
解决方案
看起来你可以.toList()
像applicants.map
这样添加:
Container(
child: StreamBuilder<Object>(
stream: null,
builder: (context, snapshot) {
return Container(
height: MediaQuery.of(context).size.height,
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.vertical,
children: <Widget>[
Column(
children: applicants
.map((e) => _PendingCardDonor(e.name, e.contact,"Balubad, Mindoro")),
.toList() // <-- HERE
),
]
)
);
}
),
),
推荐阅读
- sql - 返回一个包含多列的表
- java - 如何制作一个在我按下时播放歌曲的按钮,一旦我再次按下它就会停止歌曲?
- python - PYTORCH支持的“torch.nn.CTCLoss”和torch_baidu_ctc支持的“CTCLoss”有区别吗?
- python - python中的process.pid在macOS mojave上给出错误的值
- ionic-framework - Android 4.4.4 上的 Ionic 4 上的黑屏
- asp.net-mvc - 当服务器位于 AWS ELB 之后时,ASP.NET Core MVC 应用程序如何获取客户端 IP 地址?
- sql-server - SQL Server 中带有多分隔符的 STRING_SPLIT
- react-native - 请帮助我使用绝对位置样式
- python - Python仅更改某些值的日期格式
- javascript - 全屏 YouTube 视频作为背景,没有共享/稍后观看/图标/开始按钮