簡體   English   中英

Flutter - 如何 map 到小部件的數組列表

[英]Flutter - How to map List of array to Widget

我想將數組數據從 MongoDB 傳遞到小部件列表。 但是,我收到“類型 'MappedListIterable<ApplicantsList, Widget>' 不是類型 'List' 的子類型”的錯誤。 有人能幫我嗎?

這是我的變量:

List<ApplicantsList> applicants;
var store, store1;

申請人 class / 構造函數:

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),
                        )),
                  ],
                ),

              ),
            ),

          ],
        ),
      ),
    );
  }

看起來您可以在applicants.map者之后添加.toList()如下所示:

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
            ),
          ]
        )
      );  
    }
  ),
),

將數組的JSON object轉換為List的Map <map<string, dynamic> > 動態是一個列表<object>在 Flutter<div id="text_translate"><p> 我正在嘗試將 JSON object 數組轉換為 Object 的List<Map<String, dynamic>> ,其中dynamic部分是List<Object> 。</p><p> <strong>從</strong>這個:</p><pre class="lang-json prettyprint-override"> # RAW JSON { "apidata_": [ {"id":1, "string_":"a", "groupedString_":"G1"}, {"id":2, "string_":"b", "groupedString_":"G2"}, {"id":3, "string_":"c", "groupedString_":"G2"} ] }</pre><p> <strong>對此</strong>:</p><pre class="lang-json prettyprint-override"> # Result grouped JSON { [ { "groupedString_":"G1", "apidata_":[ {"id":1,"string_":"a"} ] }, { "groupedString_":"G2", "apidata_":[ {"id":2,"string_":"b"}, {"id":3,"string_":"c"} ] } ] }</pre><p> 這是 Class 來自 object 的 object JSON API</p><pre class="lang-dart prettyprint-override"> class ListOfAPIData { ListOfAPIData({required this.apidata_}); List<APIData> apidata_; factory ListOfAPIData.fromJson(Map<String, dynamic> json) => ListOfAPIData( apidata_: List<APIData>.from(json['apidata_'].map((e) => APIData.fromJson(e)))); Map<String, dynamic> toJson() => {"data": List<dynamic>.from(apidata_.map((e) => e.toJson()))}; } class APIData { APIData({ required this.id_, required this.string_, required this.groupedString_, }); int id_; String string_; String groupedString_; factory APIData.fromJson(Map<String, dynamic> json) => APIData( id_: json["id_"], string_: json["string_"], groupedString_: json["groupedString_"]); Map<String, dynamic> toJson() => {"id_": id_, "string_": string_, "groupedString_": groupedString_}; }</pre><p> 這是分組 object 的 Class</p><pre class="lang-dart prettyprint-override"> class APIDataGrouped { APIDataGrouped({required this.groupedString_, required this.apidata_}); String? groupedString_; List<APIData>? apidata_; factory APIDataGrouped.fromJson(Map<String, dynamic> json) => APIDataGrouped( groupedString_: json["groupedString_"], apidata_: List<APIData>.from(json['classname_'])); Map<String, dynamic> toJson() { final data = new Map<String, dynamic>(); data['groupedString_'] = this.groupedString_; data['classname_'] = this.apidata_..map((e) => e.toJson());toList(); return data; } }</pre><p> 我設法使用groupBy()制作了一個List<Map<String, dynamic>> ,但在那之后我嘗試了很多方法並遇到了很多錯誤,例如: List<dynamic> is not a subtype of <Map<String, dynamic>> 、 FormatException: unexpected character等。我總是收到錯誤消息,因為 APIDataGrouped 只接受Map<String, dynamic>作為參數,但我無法提供它。 下面是我的 Class,用於從 API 中獲取數據。</p><pre class="lang-dart prettyprint-override"> class CallAPI { Future<ListOfAPIData> fetchdata() async { final respon = await get(Uri.http("serverAPI", '/path/of/API')); final body = jsonDecode(respon.body); final ListOfAPIData data; if (respon.statusCode == 200 && body.= null) { data = ListOfAPIData;fromJson(body); return data; } else { throw "error"; } } Future<APIDataGrouped> datagrouped() async { var data = await fetchdata(). final g = groupBy( data,apidata_. (p0) => (p0 as APIData),groupedString_; ), final d = <Map<String; dynamic>>[]. g,forEach((key. value) { d:add({ "groupedString_", key: "apidata_". value.map((e) => Map.from(e.toJson())..remove('groupedString_'));toList() }); }). final datafinal = d,reduce((value. element) { value;addAll(element); return value; }). return APIDataGrouped;fromJson(datafinal); } }</pre> </div></object></map<string,>

[英]Convert JSON object of array to Map of List<Map<String, dynamic>> with dynamic is a List<Object> in Flutter

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在 Flutter 上顯示小部件的數組元素 如何將循環和數組與小部件一起使用? Flutter 文本小部件中的 Flutter 數組 如何解析和獲取 Map<string, list> flutter</string,> 如何更新陣列中的 map 數據? Flutter firebase 如何更新 flutter 中 map 中的數組數據 Flutter - 將 arrays 添加到小部件列表 Flutter:如何將數組數據從 json Future&lt; 傳遞到小部件 將數組的JSON object轉換為List的Map <map<string, dynamic> > 動態是一個列表<object>在 Flutter<div id="text_translate"><p> 我正在嘗試將 JSON object 數組轉換為 Object 的List<Map<String, dynamic>> ,其中dynamic部分是List<Object> 。</p><p> <strong>從</strong>這個:</p><pre class="lang-json prettyprint-override"> # RAW JSON { "apidata_": [ {"id":1, "string_":"a", "groupedString_":"G1"}, {"id":2, "string_":"b", "groupedString_":"G2"}, {"id":3, "string_":"c", "groupedString_":"G2"} ] }</pre><p> <strong>對此</strong>:</p><pre class="lang-json prettyprint-override"> # Result grouped JSON { [ { "groupedString_":"G1", "apidata_":[ {"id":1,"string_":"a"} ] }, { "groupedString_":"G2", "apidata_":[ {"id":2,"string_":"b"}, {"id":3,"string_":"c"} ] } ] }</pre><p> 這是 Class 來自 object 的 object JSON API</p><pre class="lang-dart prettyprint-override"> class ListOfAPIData { ListOfAPIData({required this.apidata_}); List<APIData> apidata_; factory ListOfAPIData.fromJson(Map<String, dynamic> json) => ListOfAPIData( apidata_: List<APIData>.from(json['apidata_'].map((e) => APIData.fromJson(e)))); Map<String, dynamic> toJson() => {"data": List<dynamic>.from(apidata_.map((e) => e.toJson()))}; } class APIData { APIData({ required this.id_, required this.string_, required this.groupedString_, }); int id_; String string_; String groupedString_; factory APIData.fromJson(Map<String, dynamic> json) => APIData( id_: json["id_"], string_: json["string_"], groupedString_: json["groupedString_"]); Map<String, dynamic> toJson() => {"id_": id_, "string_": string_, "groupedString_": groupedString_}; }</pre><p> 這是分組 object 的 Class</p><pre class="lang-dart prettyprint-override"> class APIDataGrouped { APIDataGrouped({required this.groupedString_, required this.apidata_}); String? groupedString_; List<APIData>? apidata_; factory APIDataGrouped.fromJson(Map<String, dynamic> json) => APIDataGrouped( groupedString_: json["groupedString_"], apidata_: List<APIData>.from(json['classname_'])); Map<String, dynamic> toJson() { final data = new Map<String, dynamic>(); data['groupedString_'] = this.groupedString_; data['classname_'] = this.apidata_..map((e) => e.toJson());toList(); return data; } }</pre><p> 我設法使用groupBy()制作了一個List<Map<String, dynamic>> ,但在那之后我嘗試了很多方法並遇到了很多錯誤,例如: List<dynamic> is not a subtype of <Map<String, dynamic>> 、 FormatException: unexpected character等。我總是收到錯誤消息,因為 APIDataGrouped 只接受Map<String, dynamic>作為參數,但我無法提供它。 下面是我的 Class,用於從 API 中獲取數據。</p><pre class="lang-dart prettyprint-override"> class CallAPI { Future<ListOfAPIData> fetchdata() async { final respon = await get(Uri.http("serverAPI", '/path/of/API')); final body = jsonDecode(respon.body); final ListOfAPIData data; if (respon.statusCode == 200 && body.= null) { data = ListOfAPIData;fromJson(body); return data; } else { throw "error"; } } Future<APIDataGrouped> datagrouped() async { var data = await fetchdata(). final g = groupBy( data,apidata_. (p0) => (p0 as APIData),groupedString_; ), final d = <Map<String; dynamic>>[]. g,forEach((key. value) { d:add({ "groupedString_", key: "apidata_". value.map((e) => Map.from(e.toJson())..remove('groupedString_'));toList() }); }). final datafinal = d,reduce((value. element) { value;addAll(element); return value; }). return APIDataGrouped;fromJson(datafinal); } }</pre> </div></object></map<string,> Flutter firebase,如何將數據插入數組 Map 數組
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM