,可以通过以下步骤实现:
class ListItem {
final int id;
final String title;
final String description;
ListItem({required this.id, required this.title, required this.description});
}
import 'package:dio/dio.dart';
Future<List<ListItem>> fetchListItems() async {
try {
Response response = await Dio().get('API_URL');
List<dynamic> data = response.data;
List<ListItem> listItems = data.map((item) {
return ListItem(
id: item['id'],
title: item['title'],
description: item['description'],
);
}).toList();
return listItems;
} catch (error) {
throw Exception('Failed to fetch list items: $error');
}
}
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
class ListScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('List Screen'),
),
body: Consumer<List<ListItem>>(
builder: (context, listItems, _) {
if (listItems.isEmpty) {
return Center(
child: CircularProgressIndicator(),
);
} else {
return ListView.builder(
itemCount: listItems.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(listItems[index].title),
subtitle: Text(listItems[index].description),
);
},
);
}
},
),
);
}
}
在上述示例中,使用Consumer小部件订阅了列表项数据的更改。如果列表项为空,显示一个圆形进度指示器。否则,使用ListView.builder构建一个包含列表项的列表。
这是一个基本的实现方法,可以根据具体需求进行调整和扩展。关于Flutter的更多信息和相关产品,可以参考腾讯云的Flutter开发文档:Flutter开发文档。
领取专属 10元无门槛券
手把手带您无忧上云