【flutter】SingleChildScrollView异步加载数据,并滑动到底端

最近有个需求是异步加载数据,移动到底端,折磨了好久。页面大概就是上面一张图片,下面是文字列表。图片是本地的,文字列表是调接口获取的。reverse:false并不能满足我的需求,因为当文字列表少的时候,页面居底部对齐,上面会留白。网上的方法大体都是 SchedulerBinding.instance.addPostFrameCallback((_) { scro...
摘要由CSDN通过智能技术生成

最近有个需求是异步加载数据,移动到底端,折磨了好久。
页面大概就是上面一张图片,下面是文字列表。图片是本地的,文字列表是调接口获取的。
reverse:false并不能满足我的需求,因为当文字列表少的时候,页面居底部对齐,上面会留白。
网上的方法大体都是

 SchedulerBinding.instance.addPostFrameCallback((_) {
   
              scrollController.jumpTo(scrollController.position.maxScrollExtent);
            }
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现异步请求网络数据并显示加载中demo,我们可以使用Flutter框架的http插件和状态管理来完成。 首先,我们需要在pubspec.yaml文件中添加http插件的依赖。 ``` dependencies: flutter: sdk: flutter http: ^0.13.0 ``` 然后,在需要显示加载中的页面中,创建一个有状态的组件。在该组件的状态中定义一个布尔值isLoading来表示数据是否正在加载中。 ```dart import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; import 'dart:convert'; class LoadingDemo extends StatefulWidget { @override _LoadingDemoState createState() => _LoadingDemoState(); } class _LoadingDemoState extends State<LoadingDemo> { bool isLoading = false; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Loading Demo'), ), body: Center( child: isLoading ? CircularProgressIndicator() : RaisedButton( child: Text('加载数据'), onPressed: () { fetchData(); }, ), ), ); } void fetchData() async { setState(() { isLoading = true; }); var response = await http.get('https://api.example.com/data'); if (response.statusCode == 200) { // 请求成功 var data = json.decode(response.body); // 处理数据 } else { // 请求失败 } setState(() { isLoading = false; }); } } ``` 在上述代码中,isLoading初始值为false,当点击加载数据按钮时,调用fetchData函数来请求数据。在请求数据时,将isLoading设置为true来显示加载动画,请求完成后再将其设置为false。 为了能够在Flutter中显示加载动画,我们使用了CircularProgressIndicator小部件,它会在屏幕中间显示一个圆形的进度指示器。 通过上述代码,我们可以实现一个简单的加载中demo,用于异步请求网络数据并显示加载状态。当点击加载数据按钮时,会显示加载动画,请求完成后隐藏加载动画。只需简单几步即可实现这样的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值