首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在等待请求时在listview末尾添加CircularProgressIndicator

在等待请求时,在ListView末尾添加CircularProgressIndicator可以通过以下步骤实现:

  1. 创建一个ListView控件,用于显示数据列表。
  2. 在ListView的末尾添加一个布局,用于显示加载指示器。
  3. 判断是否有正在加载的请求,如果有,则显示加载指示器;如果没有,则隐藏加载指示器。
  4. 当请求完成后,更新数据源并刷新ListView。

以下是具体的代码示例:

代码语言:txt
复制
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框架重新构建界面,从而实现数据的刷新。

这个示例只是一个基本的实现,你可以根据实际需求进行扩展和优化。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • Flutter Widgets 之 FutureBuilder

    展示异步任务状态 当有一个Future(异步)任务需要展示给用户,可以使用FutureBuilder控件来完成,比如向服务器发送数据成功显示成功提示: var _future = Future.delayed...Future任务中出现异常如何处理,下面模拟出现异常,修改_future: var _future = Future.delayed(Duration(seconds: 3), () { return...ListView加载网络数据 FutureBuilder还有一个比较常用的场景:网络加载数据并列表展示,这是一个非常常见的功能,在网络请求过程中显示loading,请求失败显示失败UI,成功显示成功..., ); } 数据加载成功,构建数据展示控件: _dataWidget(data) { return ListView.separated( itemBuilder:...snapshot = _snapshot.inState(ConnectionState.none); } _subscribe(); } } FutureBuilder重建判断旧的

    1.2K40

    Flutter中实现下拉刷新与上拉加载更多

    其基本的实现方法是该组件添加onRefresh事件,当用户下拉刷新时会触发该事件,该事件中可以用调用一个延时任务Future.delayed( ),延时任务的回调中重新请求数据即可。 2....上拉加载更多 Flutter中主要通过使用 ListView.builder( ) 添加控制器来实现上拉加载更多。...其基本的实现方法是该组件里添加控制器,组件初始化时实例化ScrollController类型控制器,然后初始化的initState( )中,给控制器添加addListener( )监听事件,事件的回调函数中可以获得滚动的下拉距离及整个页面的高度...,然后判断这两个值的相差距离值,其值快接近触发数据请求。...fontSize: 16.0), ), // 加载图标 CircularProgressIndicator

    3.2K10

    Flutter中的html内容加载

    上一篇文章Flutter 中的下拉刷新和上拉加载中,我介绍了如何在Flutter中实现下拉刷新和上拉加载的效果,今天我们继续以上文中的代码为例,来介绍如何加载HTML文档内容。...,用于分页请求数据 bool _haveMore = true; //是否还有更多的数据可以请求 //网络请求数据 _requestData() async { String urlStr...response.statusCode}."); } } @override void initState() { super.initState(); //页面加载请求数据...Flutter中,实现WebView加载html内容的第三方组件有很多,这里我们给推荐flutter_inappbrower这一个第三方组件。...需要注意的是: 1, 要在你的 info.plist中添加 io.flutter.embedded_views_preview 如果不添加,则会报错误: [VERBOSE

    16.6K43

    【Flutter】744- Flutter 最佳实践

    使用 spread 集合 当现有项目已经存储另一个集合中,spread 集合语法将使代码更简单 //Don't var y = [4,5,6]; var x = [1,2]; x.addAll(y)...不要显式初始化变量 null Dart 中,如果未指定变量的值,则变量会自动初始化为 null ,因此添加 null 是多余且不需要的 //Don't int _item = null; //Do...对于仅包含一个表达式的函数,可以使用表达式函数 //Don't get width { return right - left; } Widget getProgressBar() { return CircularProgressIndicator...使用 ListView.builder 构建长列表 当使用无限列表或者非常大的列表,通常建议使用 ListView.builder 以提高性能。...默认的 ListView 构造函数一次生成整个列表,ListView.builder 创建一个惰性列表,当用户向下滚动列表,Flutter 会按需构建 Widget 15.

    1.3K21

    C++ Qt开发:StringListModel字符串列表映射组件

    QStringListModel 是 Qt 中用于处理字符串列表数据的模型类之一,它是 QAbstractListModel 的子类,用于 Qt 的视图类( QListView、QComboBox...该组件通常会配合ListView一起使用,例如将ListView组件与Model模型绑定,当ListView组件内有数据更新,就可以利用映射将数据模型中的数值以字符串格式提取出来,同理也可实现将字符串赋值到指定的...组将将被初始化为城市地址,如下图所示; 1.2 添加与插入 如下代码演示了如何在 MainWindow 中通过按钮的点击事件向 QStringListModel 中添加或插入数据。...以下是代码的一些说明: on_btnListAppend_clicked 方法用于 QStringListModel 的末尾添加一行。...具体步骤包括: 使用 insertRow 模型的末尾插入一行。 获取最后一行的索引。 从界面的 lineEdit 获取输入的文本。 使用 setData 方法将文本设置到模型的指定索引处。

    18710

    Flutter | 滚动组件,ListView,GridVIew等

    可滚动组件中有很多都支持 Sliver 的延时构建模型, ListView,GridView ,但是也有不支持改模型的 SingleChildScrollView 主轴和纵轴 滚动组件的坐标描述中,...其实此属性的本质上是决定可滚动组件的初始滚动位置是 头 还是 尾 , false ,初始位置头,反之则在 尾 primary:指是否使用 widget 树中默认的 PrimaryScrollController...被包裹的可以避免列表重绘,但是列表重绘的开销非常小(如一个颜色块,或者一个较短的文本) ,不添加 RepaintBoundary 反而会更加高效。...ListView.separated 可以在生成的列表项之间添加一个分隔组件,他比 ListView.builder 多了个 sparatorBuilder 参数,该参数是一个分割组件生成器 栗子:基数下面添加红色下划线...}, ); } } 复制代码 无限加载列表 首先是模拟从异步获取数据,这里使用 english_words 包的 generateWordPairs 方法生成单词;当列表滑动到末尾

    8.5K20

    Flutter 中探索 StreamBuilderimage

    偶尔,周期结束之前可能会发出一些值。 Dart 中,您可以创建一个返回 Stream 的容量,该容量可以异步进程处于活动状态发射一些值。...当您从一端输入值而从另一端输入侦听器,侦听器将获得该值。一个流可以有多个侦听器,这些侦听器的负载可以获得流水线,流水线将获得等价值。如何在流上放置值是通过使用流控制器实现的。...在下面的代码中,当 connectionState 值正在等待,将显示一个 CircularProgressIndicator。...如果传递的值不为空,那么当 connectionState 等待,hasData 属性在任何事件中首先都将为 true StreamBuilder( initialData: 0, //...other arguments ) 要在 connectionState 等待显示初始数据,应该调整 if snapshot.connectionState = = connectionState.waiting

    2.5K00

    Android开发者的Flutter入门(一)

    接下来我们就说说以上这些功能如何在Flutter里实现,先来两张截图感受一下: 新闻列表 新闻详情 新闻源我们使用的是https://newsapi.org。...函数getHeadLines用来做http请求走到await的时候会"等待"后面的http.get函数执行完毕,返回值赋给response,之后继续执行函数体中的后续代码。...反之有状态则是指这个Widget显示期间内状态会发生改变,就比如我们在做网络请求的时候会显示一个Progress图标,请求回来数据以后会显示一个列表。这就是状态发生了变化。...真正创建Widget是build函数内。这里会根据不同的状态返回不同的Widget。List _articles;存储出来的新闻列表,initState初始化的时候开始调用网络请求。...状态变为加载完成,build函数内会用ListView.builder来创建显示列表。

    3.3K10

    初学者的 Flutter bloc

    当我们使用 Flutter Bloc,我们要在应用中创建事件触发交互,然后 Bloc 会发射 emit 请求数据,存在在 state 中,真实的场景中,它会像这样: 用户点击按钮来获取游戏列表 事件被触发...,然后它会告知 Bloc 用户想获取游戏列表 Bloc 将会请求数据(比如从一个存储库,该存储库负责连接到 API 来获取数据) 当 Bloc 有数据,它将决定数据是否成功,然后 emit 发射一个状态...这个挂件只有它的 bloc 发射成功一个状态后才展示出来,它有三个状态: 成功:展示游戏列表 错误:展示一个错误信息 加载:展示一个 CircularProgressIndicator 挂件 项目结构...), ], child: HomeLayout(), ), ), ); } } 实际上,正如我们所看到的代码,开始的时候添加两个...为了实现这个,我们视图中添加了 BlocBuilder。 在这个案例中,我们只想在当前状态成功后重新构建视图,所以我们使用 buildWhen() 来实现。

    13210

    Flutter跨平台移动端开发丨SingleChildScrollView、ListView......

    默认情况下,Flutter会根据具体平台分别使用不同的ScrollPhysics对象,应用不同的显示效果,当滑动到边界,继续拖动的话,iOS上会出现弹性效果,而在Android上会出现微光效果。...默认情况下,Flutter会根据具体平台分别使用不同的ScrollPhysics对象,应用不同的显示效果,当滑动到边界,继续拖动的话,iOS上会出现弹性效果,而在Android上会出现微光效果。...(懒加载,如果设置了包裹那么在此列表项滑出屏幕外不会被GC。...默认情况下,Flutter会根据具体平台分别使用不同的ScrollPhysics对象,应用不同的显示效果,当滑动到边界,继续拖动的话,iOS上会出现弹性效果,而在Android上会出现微光效果。...(懒加载,如果设置了包裹那么在此列表项滑出屏幕外不会被GC。

    8.7K51

    如何使用Flutter开发一款电影APP详解

    页面initState的生命周期中,请求数据,再进行相应的展示。 下拉刷新的功能是使用的RefreshIndicator组件,在其onRefresh中进行下拉的逻辑处理。..._movieList[index]), ), ); } } 电影的详情页面 点击单条电影使用Navigator.pushNamed(context, ‘detail’, arguments...: data[‘id’]);即可跳转详情页,详情页中通过id再请求接口获取详情: import 'package:flutter/material.dart'; import 'package:movie...Center(child: CircularProgressIndicator(),) : SafeArea( child: Container( height:...应用中的数据都是从豆瓣开发者api中拉取的,分别是,正在热映in_theaters,top250top250和电影详情subject/id三个接口,请求这些接口是需要apikey的,为了大家能方便请求数据

    1.2K21

    【Flutter 专题】27 易忽略的【小而巧】的技术点汇总 (四)

    CachedNetworkImage 缓存图片 对于加载网络图片时,添加一个加载动画或网络图片异常添加一个错误图片会给用户一个良好的体验,此时 CachedNetworkImage 可以帮我们解决这个问题...loading 亦或者 Widget 等; errorWidget 用来网络图片加载异常展现,可自定义进行展示。...键盘右下角会有不同的按钮样式。例如搜索页面输入完成搜索信息后展示搜索的按钮更便捷。此时需要考虑 TextInputAction 属性,可自定义展示内容。...ExpansionTile 扩展Tile 和尚在学习过程中尝试了一下 ExpansionTile,是一个可向下扩展空间的 Widget,效果图。...Spacer 创建一个可调节的空间隔,可用于调整 Flex 容器(行或列)中窗口小部件之间的间距;默认 flex: 1。 ?

    1.4K41

    flutter组件5【上滑加载】

    、详情的说明 1.这是一个列表的动态加载 由于循环是从0开始的,所以数组长度等于当前循环最后一位的时候,出现加载效果条 Widget getListView() { return new ListView.builder...} }, controller: _scrollController, ); } 2.我们看加载效果条的逻辑 我们定义了一个组件,当加载状态等于加载中,...true :false, child: SizedBox( width: 20.0, height: 20.0, child: CircularProgressIndicator...10.0, b:10.0 ); } 3.我们初始化的时候controller监听到底部的时候,会触发_getMore方式 首先判断加载条状态是否为空闲,空闲的时候,先设置为加载中 请求数据成功后...,判断是否有数据数组,当存在的时候,追加列表 当没有数据的时候,文案换成没有更多数据了,显示底部 _getMore() async { if (loadStatus == LoadingStatus.STATUS_IDEL

    1K20

    构建实用的Flutter文件列表:从简到繁的完美演进

    添加网格视图按钮 首先,我们需要在文件列表页面上添加一个按钮,让用户可以选择查看文件列表的不同布局方式。我们的示例中,我们将在AppBar中添加一个按钮来切换布局方式。...这样做可以保证不同设备上都能够呈现出均匀的布局效果。 2. 美化界面 除了均匀布局之外,我们还可以通过添加一些装饰性的元素来美化文件列表的界面,使其更加吸引人。...文本将自动截断,并在末尾显示省略号,使文件名更加清晰可见。...发起HTTP请求 接下来,让我们文件列表页面中发起HTTP请求,获取文件列表数据。我们可以使用http库中的get方法来发送GET请求,并处理响应数据。...(GIF动不了啊)(又可以动了) 总结 本文中,我们详细探讨了如何在Flutter应用中构建文件列表,并逐步改进和优化这个文件列表,以提升用户体验和功能性。

    21011
    领券