在等待请求时,在ListView末尾添加CircularProgressIndicator可以通过以下步骤实现:
以下是具体的代码示例:
import 'package:flutter/material.dart';
class MyListView extends StatefulWidget {
@override
_MyListViewState createState() => _MyListViewState();
}
class _MyListViewState extends State<MyListView> {
List<String> items = []; // 数据源
bool isLoading = false; // 是否正在加载
@override
void initState() {
super.initState();
// 模拟初始化数据
fetchData();
}
// 模拟异步请求数据
Future<void> fetchData() async {
setState(() {
isLoading = true; // 开始加载,显示指示器
});
// 模拟网络请求延迟
await Future.delayed(Duration(seconds: 2));
// 模拟获取新的数据
List<String> newItems = ['Item 1', 'Item 2', 'Item 3'];
setState(() {
items.addAll(newItems); // 添加新的数据
isLoading = false; // 加载完成,隐藏指示器
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ListView with CircularProgressIndicator'),
),
body: Column(
children: <Widget>[
Expanded(
child: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(items[index]),
);
},
),
),
Container(
padding: EdgeInsets.all(16),
alignment: Alignment.center,
child: isLoading
? CircularProgressIndicator() // 显示加载指示器
: null,
),
],
),
);
}
}
void main() {
runApp(MaterialApp(
home: MyListView(),
));
}
这个示例中,我们通过使用ListView.builder来构建可滚动的列表。在ListView的末尾,添加一个Container作为加载指示器的容器。isLoading变量用于控制加载指示器的显示与隐藏。当isLoading为true时,显示CircularProgressIndicator指示器;当isLoading为false时,不显示指示器。
在fetchData方法中,我们模拟了异步请求数据的过程。在开始请求时,将isLoading设置为true,显示加载指示器。在请求完成后,将isLoading设置为false,隐藏加载指示器,并更新数据源items。通过调用setState方法,我们通知Flutter框架重新构建界面,从而实现数据的刷新。
这个示例只是一个基本的实现,你可以根据实际需求进行扩展和优化。
领取专属 10元无门槛券
手把手带您无忧上云