给定json响应,使用dio在Flutter中绑定到列表的步骤如下:
flutter packages get
命令来获取依赖包。import 'package:dio/dio.dart';
Future<List<MyModel>> fetchData() async {
try {
Response response = await Dio().get('https://example.com/api/data');
List<dynamic> jsonList = response.data;
List<MyModel> dataList = jsonList.map((json) => MyModel.fromJson(json)).toList();
return dataList;
} catch (e) {
print(e);
return [];
}
}
import 'package:flutter/material.dart';
class MyListView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return FutureBuilder<List<MyModel>>(
future: fetchData(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
} else if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
} else {
List<MyModel> dataList = snapshot.data;
return ListView.builder(
itemCount: dataList.length,
itemBuilder: (context, index) {
MyModel data = dataList[index];
return ListTile(
title: Text(data.name),
subtitle: Text(data.description),
);
},
);
}
},
);
}
}
在上面的代码中,我们使用FutureBuilder来等待fetchData函数返回数据。根据不同的连接状态和错误状态,我们构建不同的UI。当数据可用时,我们使用ListView.builder构建一个列表视图,并将数据绑定到列表项中。
这是一个简单的示例,展示了如何使用dio在Flutter中绑定json响应到列表。根据实际需求,你可能需要对代码进行适当的修改和调整。
领取专属 10元无门槛券
手把手带您无忧上云