如何使 Flutter ListView 添加額外的空小部件

Question

我有一個列表視圖，其中包含來自我的 JSON API 的數據，它運行良好，但我有一個我想解決的場景，它基本上是支付進度，旨在顯示付費用戶列表並將虛擬小部件添加到列表中表示剩余付費用戶的數量。 下面的 API 返回有關用戶和剩余支付用戶數量的信息，但我找不到如何將虛擬小部件添加到列表視圖以顯示剩余用戶數量。

var numberOfUserLeft;
List data;

  Future<String> getData() async {
    isLoadingActivity = true;
    String url;

     url = "mylink.php";


    var response = await http.get(
        Uri.encodeFull(url),
        headers: {
          "Accept": "application/json"
        }
    );

    this.setState(() {
      data = json.decode(response.body);
      isLoadingActivity = false;
      numberOfUserLeft = data[0]['userCount']

    });

     return "Success!";
  }

// my listview below

ListView.builder(
                     scrollDirection: Axis.horizontal,
                     // padding: EdgeInsets.all(5.0),
                     itemCount: data == null
                         ? 0
                         : data.length,
                     itemBuilder: (context, position) {
                       return       Container(
                           padding: EdgeInsets.all(10),
                           child: Row(children: [


                             Container(
                               padding: EdgeInsets.all(4),
                               child: Stack(
                                 clipBehavior: Clip.none,
                                 children: [
                                   CircleAvatar(
                                       radius: 60,
                                       backgroundColor: colorGreen,

                                       child:Container(
                                           padding: EdgeInsets.all(4),
                                           margin: EdgeInsets.all(3),
                                           decoration: BoxDecoration(
                                             color: Colors.white,
                                             shape: BoxShape.circle,
                                           ),
                                           child: ClipOval(
                                             child: Container(
                                               height: 250,
                                               width: 250,
                                               child: data[position]["profile_img"]!=null?Image.network(
                                                 data[position]["profile_img"],
                                                 fit: BoxFit.cover,
                                               ):Image.asset("assets/person_icon.png"),
                                             ),
                                           )
                                       )),
                                   Positioned(
                                     bottom: 100,
                                     right: 45,
                                     child: InkWell(
                                       onTap: () {},
                                       child:  Center(
                                         child: CircleAvatar(
                                           backgroundColor: colorGreen,
                                           radius: 15.0,
                                           child: Icon(
                                             Icons.check,
                                             color: Colors.white,
                                             size: 25,
                                           ),
                                         ),
                                       ),
                                     ),
                                   ),

                                 ],
                               ),
                             ),
                             Container(
                               padding: EdgeInsets.all(4),
                               child: Stack(
                                 clipBehavior: Clip.none,
                                 children: [
                                   CircleAvatar(
                                       radius: 60,
                                       backgroundColor: colorGreen,

                                       child:Container(
                                           padding: EdgeInsets.all(4),
                                           margin: EdgeInsets.all(3),
                                           decoration: BoxDecoration(
                                             color: Colors.white,
                                             shape: BoxShape.circle,
                                           ),
                                           child: ClipOval(
                                             child: Container(
                                               height: 250,
                                               width: 250,
                                               child: data[position]["profile_img"]!=null?Image.network(
                                                 data[position]["profile_img"],
                                                 fit: BoxFit.cover,
                                               ):Image.asset("assets/person_icon.png"),
                                             ),
                                           )
                                       )),
                                   Positioned(
                                     bottom: 100,
                                     right: 45,
                                     child: InkWell(
                                       onTap: () {},
                                       child:  Center(
                                         child: CircleAvatar(
                                           backgroundColor: colorGreen,
                                           radius: 15.0,
                                           child: Icon(
                                             Icons.check,
                                             color: Colors.white,
                                             size: 25,
                                           ),
                                         ),
                                       ),
                                     ),
                                   ),

                                 ],
                               ),
                             ),
                           ],))
                       ;
                     })

上面的 API 只返回一個付費的用戶，我可以使用numberOfUserLeft在 Listview 中創建一個虛擬小部件，找到我正在查看的附加屏幕截圖：

Answer 1

所以在你的itemBuilder:添加這樣的if-else語句

if(data.length >0){ //this means that it will never be less than 1
  data.insert(1,"instances of what you want to add");
 return Container(
                           padding: EdgeInsets.all(10),
                           child: Row(children: [


                             Container(
                               padding: EdgeInsets.all(4),
                               child: Stack(
                                 clipBehavior: Clip.none,
                                 children: [
                                   CircleAvatar(
                                       radius: 60,
                                       backgroundColor: colorGreen,

                                       child:Container(
                                           padding: EdgeInsets.all(4),
                                           margin: EdgeInsets.all(3),
                                           decoration: BoxDecoration(
                                             color: Colors.white,
                                             shape: BoxShape.circle,
                                           ),
                                           child: ClipOval(
                                             child: Container(
                                               height: 250,
                                               width: 250,
                                               child: data[position]["profile_img"]!=null?Image.network(
                                                 data[position]["profile_img"],
                                                 fit: BoxFit.cover,
                                               ):Image.asset("assets/person_icon.png"),
                                             ),
                                           )
                                       )),
                                   Positioned(
                                     bottom: 100,
                                     right: 45,
                                     child: InkWell(
                                       onTap: () {},
                                       child:  Center(
                                         child: CircleAvatar(
                                           backgroundColor: colorGreen,
                                           radius: 15.0,
                                           child: Icon(
                                             Icons.check,
                                             color: Colors.white,
                                             size: 25,
                                           ),
                                         ),
                                       ),
                                     ),
                                   ),

                                 ],
                               ),
                             ),
                             Container(
                               padding: EdgeInsets.all(4),
                               child: Stack(
                                 clipBehavior: Clip.none,
                                 children: [
                                   CircleAvatar(
                                       radius: 60,
                                       backgroundColor: colorGreen,

                                       child:Container(
                                           padding: EdgeInsets.all(4),
                                           margin: EdgeInsets.all(3),
                                           decoration: BoxDecoration(
                                             color: Colors.white,
                                             shape: BoxShape.circle,
                                           ),
                                           child: ClipOval(
                                             child: Container(
                                               height: 250,
                                               width: 250,
                                               child: data[position]["profile_img"]!=null?Image.network(
                                                 data[position]["profile_img"],
                                                 fit: BoxFit.cover,
                                               ):Image.asset("assets/person_icon.png"),
                                             ),
                                           )
                                       )),
                                   Positioned(
                                     bottom: 100,
                                     right: 45,
                                     child: InkWell(
                                       onTap: () {},
                                       child:  Center(
                                         child: CircleAvatar(
                                           backgroundColor: colorGreen,
                                           radius: 15.0,
                                           child: Icon(
                                             Icons.check,
                                             color: Colors.white,
                                             size: 25,
                                           ),
                                         ),
                                       ),
                                     ),
                                   ),

                                 ],
                               ),
                             ),
                           ],));
}

你可以用同樣的方法插入更多。 不要忘記添加 else 語句