在Flutter中使用ListView来显示嵌套的API数据,可以通过以下步骤实现:
以下是一个示例代码:
import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
// Model类
class ItemModel {
final String title;
final String description;
ItemModel({required this.title, required this.description});
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter ListView Demo',
home: Scaffold(
appBar: AppBar(
title: Text('ListView Demo'),
),
body: FutureBuilder<List<ItemModel>>(
future: fetchItems(), // 发送API请求并解析数据为Model对象的列表
builder: (context, snapshot) {
if (snapshot.hasData) {
// 数据加载完成
return ListView.builder(
itemCount: snapshot.data!.length,
itemBuilder: (context, index) {
// 构建每个列表项
return ListTile(
title: Text(snapshot.data![index].title),
subtitle: Text(snapshot.data![index].description),
);
},
);
} else if (snapshot.hasError) {
// 数据加载出错
return Text('Error: ${snapshot.error}');
}
// 数据加载中
return CircularProgressIndicator();
},
),
),
);
}
// 发送API请求并解析数据为Model对象的列表
Future<List<ItemModel>> fetchItems() async {
final response = await Dio().get('https://api.example.com/items');
final data = response.data['items'] as List<dynamic>;
return data.map((item) => ItemModel(
title: item['title'],
description: item['description'],
)).toList();
}
}
void main() {
runApp(MyApp());
}
在上述示例中,我们创建了一个ItemModel类来表示API返回的数据结构。然后使用Dio库发送API请求,并将返回的JSON数据解析为ItemModel对象的列表。最后,使用ListView.builder构建一个可滚动的列表视图,并使用ItemModel对象的属性来显示数据。
请注意,这只是一个简单的示例,实际情况中可能需要根据API返回的数据结构和需求进行适当的调整和处理。另外,为了使代码更加健壮和可维护,可能需要添加错误处理、数据缓存等功能。
推荐的腾讯云相关产品:腾讯云移动开发平台(https://cloud.tencent.com/product/mapp),腾讯云云服务器(https://cloud.tencent.com/product/cvm),腾讯云数据库(https://cloud.tencent.com/product/cdb)。
领取专属 10元无门槛券
手把手带您无忧上云