注册
登录
html/HTML5
如何以水平滚动视图格式显示 API 数据?
返回
如何以水平滚动视图格式显示 API 数据?
作者:
糖果
发布时间:
2024-08-15 11:44:28 (2天前)
我在控制台中成功获取了我的 JSON 数据,但无法在水平滚动视图的 UI 中显示我的数据。 现在它没有显示任何错误。当我试图获取 JSON 数据并希望在我的应用程序中显示时,我遇到了语法问题。 请让我知道我的配置都是正确的,或者我应该添加更多。 我的 API 类 class Services{ static const String url = 'http://medbo.digitalicon.in/api/medboapi/alldoctor'; static Future
> getDocFun() async{ try{ final response = await http.post(url); if(200 == response.statusCode){ print(response.body);//getting response in console final List
docs = myDocFromJson(response.body) as List
; return docs; }else{ // return List
(); } }catch(e){ } return
[]; } } 我的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
data; factory MyDoc.fromJson(Map
json) => MyDoc( status: json["Status"], message: json["Message"], data: List
.from(json["Data"].map((x) => Datum.fromJson(x))), ); Map
toJson() => { "Status": status, "Message": message, "Data": List
.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
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
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
{ @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 , ), ], ), ), ); } }
收藏
举报
2 条回复
1#
回复此人
糖果
|
2021-08-18 17-17
首先你应该给索引你的自定义类 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
{ @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 , ), ], ), ), ); } }
编辑
登录
后才能参与评论