首页 > 解决方案 > 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),
                        )),
                  ],
                ),

              ),
            ),

          ],
        ),
      ),
    );
  }

标签: arraysmongodblist

解决方案


看起来你可以.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
            ),
          ]
        )
      );  
    }
  ),
),

推荐阅读