PROSAGA码农传奇-html/HTML5-如何以水平滚动视图格式显示 API 数据？

我在控制台中成功获取了我的 JSON 数据，但无法在水平滚动视图的 UI 中显示我的数据。
现在它没有显示任何错误。当我试图获取 JSON 数据并希望在我的应用程序中显示时，我遇到了语法问题。
请让我知道我的配置都是正确的，或者我应该添加更多。
我的 API 类

class Services{
      static const String url = 'http://medbo.digitalicon.in/api/medboapi/alldoctor';
      static Future<List<MyDoc>> getDocFun() async{
        try{
          final response = await http.post(url);
          if(200 == response.statusCode){
            print(response.body);//getting response in console
            final List<MyDoc> docs = myDocFromJson(response.body) as List<MyDoc>;
            return docs;
          }else{
            // return List<MyDoc>();
          }
        }catch(e){
          
        }
        return <MyDoc>[];
      }
    }
我的json数据模型

// To parse this JSON data, do
    //
    //     final myDoc = myDocFromJson(jsonString);
    
    import 'dart:convert';
    
    MyDoc myDocFromJson(String str) => MyDoc.fromJson(json.decode(str));
    
    String myDocToJson(MyDoc data) => json.encode(data.toJson());
    
    class MyDoc {
        MyDoc({
            required this.status,
            required this.message,
            required this.data,
        });
    
        String status;
        String message;
        List<Datum> data;
    
        factory MyDoc.fromJson(Map<String, dynamic> json) => MyDoc(
            status: json["Status"],
            message: json["Message"],
            data: List<Datum>.from(json["Data"].map((x) => Datum.fromJson(x))),
        );
    
        Map<String, dynamic> toJson() => {
            "Status": status,
            "Message": message,
            "Data": List<dynamic>.from(data.map((x) => x.toJson())),
        };
    }
    
    class Datum {
        Datum({
            required this.doctorId,
            required this.encDoctorId,
            required this.doctorName,
            required this.doctorImage,
            this.linkPartner,
            required this.specialisation,
            this.gender,
            required this.qualification,
            this.fee,
            this.discountedFee,
            this.bookingFee,
            this.timeFrom,
            this.timeTo,
            this.visitDay,
            this.phone,
            this.alternatePhone,
            this.email,
            this.note,
            this.createBy,
            this.createDate,
            this.modBy,
            this.modDate,
            this.activeStatus,
            this.permission,
        });
    
        String doctorId;
        String encDoctorId;
        String doctorName;
        String doctorImage;
        dynamic linkPartner;
        String specialisation;
        dynamic gender;
        String qualification;
        dynamic fee;
        dynamic discountedFee;
        dynamic bookingFee;
        dynamic timeFrom;
        dynamic timeTo;
        dynamic visitDay;
        dynamic phone;
        dynamic alternatePhone;
        dynamic email;
        dynamic note;
        dynamic createBy;
        dynamic createDate;
        dynamic modBy;
        dynamic modDate;
        dynamic activeStatus;
        dynamic permission;
    
        factory Datum.fromJson(Map<String, dynamic> json) => Datum(
            doctorId: json["DoctorId"],
            encDoctorId: json["EncDoctorId"],
            doctorName: json["DoctorName"],
            doctorImage: json["DoctorImage"],
            linkPartner: json["LinkPartner"],
            specialisation: json["Specialisation"],
            gender: json["Gender"],
            qualification: json["Qualification"],
            fee: json["Fee"],
            discountedFee: json["DiscountedFee"],
            bookingFee: json["BookingFee"],
            timeFrom: json["TimeFrom"],
            timeTo: json["TimeTo"],
            visitDay: json["VisitDay"],
            phone: json["Phone"],
            alternatePhone: json["AlternatePhone"],
            email: json["Email"],
            note: json["Note"],
            createBy: json["CreateBy"],
            createDate: json["CreateDate"],
            modBy: json["ModBy"],
            modDate: json["ModDate"],
            activeStatus: json["ActiveStatus"],
            permission: json["Permission"],
        );
    
        Map<String, dynamic> toJson() => {
            "DoctorId": doctorId,
            "EncDoctorId": encDoctorId,
            "DoctorName": doctorName,
            "DoctorImage": doctorImage,
            "LinkPartner": linkPartner,
            "Specialisation": specialisation,
            "Gender": gender,
            "Qualification": qualification,
            "Fee": fee,
            "DiscountedFee": discountedFee,
            "BookingFee": bookingFee,
            "TimeFrom": timeFrom,
            "TimeTo": timeTo,
            "VisitDay": visitDay,
            "Phone": phone,
            "AlternatePhone": alternatePhone,
            "Email": email,
            "Note": note,
            "CreateBy": createBy,
            "CreateDate": createDate,
            "ModBy": modBy,
            "ModDate": modDate,
            "ActiveStatus": activeStatus,
            "Permission": permission,
        };
    }
我在其中调用 API 的主页 initState()

Services.getDocFun().then((docs){
      setState(() {
             _docsVar =docs;
      });
    }
    );
然后在我的主页中，我使用了一个容器，它将返回我的水平滚动列表。

Container(
                  width: double.infinity,
                  height:200.0,
                  child: ListView.builder(
                    itemCount: _docsVar.length,
                    scrollDirection: Axis.horizontal,
                    physics: BouncingScrollPhysics(),
                    shrinkWrap: true,
                    itemBuilder: (context,index){
                    MyDoc doc = _docsVar[index];
                    return DoctorCard(doc: doc);
    
                    },
                  ),
    
                ),
这是我的DoctorCardHere Im 面临的显示问题.doctorName和 . doctorImage来自 API。我应该使用什么语法Text()字段和Image字段从 api 获取数据？

class DoctorCard extends StatefulWidget {
      const DoctorCard({Key? key, required MyDoc doc}) : super(key: key);
    
      @override
      _DoctorCardState createState() => _DoctorCardState();
    }
    
    class _DoctorCardState extends State<DoctorCard> {
    
    
      
      @override
      Widget build(BuildContext context) {
        return Card(
          margin: EdgeInsets.only(left: 18.0, bottom: 2.0),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(12.0),
          ),
          child: Container(
            width: 150.0,
            padding: EdgeInsets.all(8.0),
            child: Column(
              children: [
                Expanded(
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(14.0),
                     child: Image.asset('assets/images/medbo-doctors.png',fit: BoxFit.cover),
                  ),
                ),
                SizedBox(
                  height: 12.0,
                ),
                Text( 
                  "Dr. Tuhin",
                  overflow: TextOverflow.clip,
                  maxLines: 1,
                  textAlign: TextAlign.center,
                ),
                SizedBox(height: 6.0),
                Text(
                  "Specialist",
                  overflow: TextOverflow.clip,
                  maxLines: 1,
                  textAlign: TextAlign.center   ,
                  ),
              ],
            ),
          ),
        );
      }
    }

首先你应该给索引你的自定义类

Container(
                  width: double.infinity,
                  height:200.0,
                  child: ListView.builder(
                    itemCount: _docsVar.length,
                    scrollDirection: Axis.horizontal,
                    physics: BouncingScrollPhysics(),
                    shrinkWrap: true,
                    itemBuilder: (context,index){
                    MyDoc doc = _docsVar[index];
                    return DoctorCard(doc: doc, index : index);
    
                    },
                  ),
    
                ),
然后发送构造函数当前索引

class DoctorCard extends StatefulWidget {
    int index;
      const DoctorCard({Key? key, required MyDoc doc , this.index}) : super(key: key);
    
      @override
      _DoctorCardState createState() => _DoctorCardState();
    }
    
    class _DoctorCardState extends State<DoctorCard> {
    
    
      
      @override
      Widget build(BuildContext context) {
        return Card(
          margin: EdgeInsets.only(left: 18.0, bottom: 2.0),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(12.0),
          ),
          child: Container(
            width: 150.0,
            padding: EdgeInsets.all(8.0),
            child: Column(
              children: [
                Expanded(
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(14.0),
                     child: Image.asset(doc[index].yourimage,fit: BoxFit.cover),
                  ),
                ),
                SizedBox(
                  height: 12.0,
                ),
                Text( 
                  doc[index].yourtext,
                  overflow: TextOverflow.clip,
                  maxLines: 1,
                  textAlign: TextAlign.center,
                ),
                SizedBox(height: 6.0),
                Text(
                  doc[index].yourtext,
                  overflow: TextOverflow.clip,
                  maxLines: 1,
                  textAlign: TextAlign.center   ,
                  ),
              ],
            ),
          ),
        );
      }
    }