Flutter_学习记录_实现列表上下拉加载 +实现加载html的数据
1. 效果图

2. 下拉加载的实现RefreshIndicator
在Flutter官方sdk中给我们提供了下拉刷新的组件RefreshIndicator。
// 显示内容列表Widget _showNewsListWidget() {if (_newsDataList.isNotEmpty) {// RefreshIndicator 来实现下拉加载的功能return RefreshIndicator(onRefresh: () async {print("下拉加载");// 网络数据的请求_getNewDataRequest();},child: ListView.builder(itemCount: _newsDataList.length,itemBuilder: (context, index) {return Column(children: [ListTile(title: Text(_newsDataList[index]["title"]),onTap: () {Navigator.of(context).push(MaterialPageRoute(builder: (context) => NewsdetailDemo(cid: _newsDataList[index]["aid"])),);},)],);}, ));} else {// loadingreturn Center(child: CircularProgressIndicator(),);}}
3. 上拉加载的实现
flutter是没有提供上拉分页加载更多的组件,但是在Flutter ListView中有一个ScrollController组件,它就是专门来控制ListView滑动事件,在
这里我们可以根据ListView的位置来判断是否滑动到了底部来做加载更多的处理。
上拉分页加载更多主要通过ListView监听
ScrollController实现
_scrollController.position.pixels滚动的距离
_scrollController.position.maxScrollExtent总距离
核心代码,就是在 initState方法中,添加监听:
_scrollController = ScrollController(); //listview的控制器_scrollController.addListener((){double scrollOffsetY = _scrollController.position.pixels;double scrollContentHeight = _scrollController.position.maxScrollExtent;if (scrollOffsetY > scrollContentHeight + 20) { print("上拉加载更多");_getNewDataRequest();}});
在ListView中的controller中 关联_scrollController, 代码如下:
ListView.builder(// controller 关联_scrollControllercontroller: _scrollController,itemCount: _newsDataList.length,itemBuilder: (context, index) {return Column();}))
4. 实现列表上下拉加载的完整代码
import 'dart:convert';
import 'package:demoapp/Demo/NewsDemo/NewsDetail_demo.dart';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';class NewsDemo extends StatefulWidget {const NewsDemo({super.key});State<NewsDemo> createState() => _NewsDemoState();
}class _NewsDemoState extends State<NewsDemo> {final ScrollController _scrollController = ScrollController();List _newsDataList = [];int _page = 1;bool _isLoadingData = false;bool _hasMoreData = true;// 获取网络请求的数据void _getNewDataRequest() async {if (_isLoadingData == true ) {print("数据加载中,请勿重新加载");return;}if (_hasMoreData == false) {print("没有更多的数据了");return;}_isLoadingData = true;var apiUri = "https://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=$_page";print("apiUri = $apiUri");final response = await Dio().get(apiUri);List resultList = json.decode(response.data)["result"];setState(() {print("数据请求成功");if (_page == 1) {_newsDataList = resultList;} else {_newsDataList.addAll(resultList);}_isLoadingData = false;if (resultList.isNotEmpty) {_page += 1;}if (resultList.length < 20) {_hasMoreData = false;}});}// cell 底部视图的设置Widget _newsListCellBottomWidget(int index) {if (index == _newsDataList.length - 1) {if (_hasMoreData) {return CircularProgressIndicator();} else {return Text("---我也是有底线的---");}} else {return Divider();}}// 显示内容列表Widget _showNewsListWidget() {if (_newsDataList.isNotEmpty) {// RefreshIndicator 来实现下拉加载的功能return RefreshIndicator(onRefresh: () async {print("下拉加载");_page = 1;_hasMoreData = true;_getNewDataRequest();},child: ListView.builder(controller: _scrollController,itemCount: _newsDataList.length,itemBuilder: (context, index) {return Column(children: [ListTile(title: Text(_newsDataList[index]["title"]),onTap: () {Navigator.of(context).push(MaterialPageRoute(builder: (context) => NewsdetailDemo(cid: _newsDataList[index]["aid"])),);},),_newsListCellBottomWidget(index)],);}, ));} else {return Center(child: CircularProgressIndicator(),);}}void initState() {super.initState();_scrollController.addListener((){double scrollOffsetY = _scrollController.position.pixels;double scrollContentHeight = _scrollController.position.maxScrollExtent;if (scrollOffsetY > scrollContentHeight + 20) { print("上拉加载更多");_getNewDataRequest();}});_getNewDataRequest();}Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("模拟新闻列表上下拉加载 + 加载html的数据"),),body: _showNewsListWidget(),);}
}
5. 加载 Html 的数据
- 第三方插件:
flutter_widget_from_html_core: ^0.16.0 - 引入头文件:
import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';
- 使用代码
return HtmlWidget("xxxx==> Html 的数据",onTapImage: (imageMetadata) {print(imageMetadata);},onTapUrl: (url) {print(url);return true;},);
6. 实现加载html的数据,完整代码
import 'dart:convert';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';class NewsdetailDemo extends StatefulWidget {final String cid;const NewsdetailDemo({super.key, required this.cid});State<NewsdetailDemo> createState() => _NewsdetailDemoState();
}class _NewsdetailDemoState extends State<NewsdetailDemo> {List _resultDetailList = [];// 获取详情的数据void _getNewsDetailRequest() async {String apiUri = "https://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=${widget.cid}";final response = await Dio().get(apiUri);final result = json.decode(response.data)["result"];setState(() {_resultDetailList = result;});}// 内容视图Widget _newsDetailWidget() {if (_resultDetailList.isNotEmpty) {Map resultInfo = _resultDetailList.isNotEmpty ? _resultDetailList[0] : {};return Padding(padding: EdgeInsets.all(10),child: ListView(children: [Text(resultInfo["title"], textAlign: TextAlign.center, style: TextStyle(fontSize: 24),),SizedBox(height: 20),HtmlWidget(resultInfo["content"],onTapImage: (imageMetadata) {print(imageMetadata);},onTapUrl: (url) {print(url);return true;},)],),);} else {return Center(child: CircularProgressIndicator());}}void initState() {super.initState();_getNewsDetailRequest();}Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("详情"),),body: _newsDetailWidget(),);}
}
相关文章:
Flutter_学习记录_实现列表上下拉加载 +实现加载html的数据
1. 效果图 2. 下拉加载的实现RefreshIndicator 在Flutter官方sdk中给我们提供了下拉刷新的组件RefreshIndicator。 // 显示内容列表Widget _showNewsListWidget() {if (_newsDataList.isNotEmpty) {// RefreshIndicator 来实现下拉加载的功能return RefreshIndicator(onRefr…...
基于PaddleNLP使用DeepSeek-R1搭建智能体
基于PaddleNLP使用DeepSeek-R1搭建智能体 最近在学习DeepSeek,找到了PaddleNLP星河社区大模型,跟着敲写了一遍。内容来源:DeepSeek实战训练营:从云端模型部署到应用开发 - 飞桨AI Studio星河社区-人工智能学习与实训社区 本项目基…...
『PostgreSQL』PGSQL备份与还原实操指南
📣读完这篇文章里你能收获到 了解逻辑备份与物理备份的区别及适用场景🔍。掌握全库、指定库、指定表备份还原的命令及参数📝。学会如何根据业务需求选择合适的备份策略📊。熟悉常见备份还原问题的排查与解决方法🔧。 …...
基于单片机的智慧农业大棚系统(论文+源码)
1系统整体设计 经过上述的方案分析,采用STM32单片机为核心,结合串口通信模块,温湿度传感器,光照传感器,土壤湿度传感器,LED灯等硬件设备来构成整个控制系统。系统可以实现环境的温湿度检测,土壤…...
【C语言】数组篇
目录 引言一维数组数组的定义数组的初始化完全初始化部分初始化省略数组长度 数组元素的访问 多维数组二维数组的定义二维数组的初始化完全初始化部分初始化省略第一维长度 二维数组元素的访问 遍历数组元素遍历一维数组遍历二维数组 数组作为函数参数一维数组作为函数参数二维…...
FreeRTOS概述
文章目录 核心文件头文件内存管理文件入口函数数据类型前缀 核心文件 最核心文件:task.c和list.c 文件作用tasks.c必需,任务操作list.c必须,列表queue.c基本必需,提供队列操作、信号量(semaphore)操作timer.c可选,so…...
C++ 使用红黑树的实现及迭代器完成对set和map的封装
一、红黑树的实现以及迭代器 #pragma once // 要实现完整的迭代器需要对红黑树进行改造,有兴趣可参考侯捷《STL源码剖析》 enum Colour {RED,BLACK };template<class T> struct RBTreeNode {RBTreeNode<T>* _left;RBTreeNode<T>* _right;RBTreeN…...
【Java从入门到起飞】面向对象编程(高级)
文章目录 1. 抽象类1.1 概述1.1.1 抽象类引入 1.2 abstract使用格式1.2.1 抽象方法1.2.2 抽象类1.2.3 抽象类的使用 1.3 抽象类的特征1.4 抽象类的细节1.5 抽象类存在的意义 2. 接口2.1 概述2.2 定义格式2.3 接口成分的特点2.3.1.抽象方法2.3.2 常量2.3.3 案例演示 2.4 基本的实…...
内网安全-横向移动PTH 哈希PTT 票据PTK 密匙Kerberos密码喷射
一.域横向pth,mimkatz,NTLM windwos server 2012 R2之前可能是NTLM和LM,之后为NTLM 1.mimkatz ptk 使用mimkatz进行横向移动 mimikatz sekurlsa::pth /user:administrator(目标本地用户名) /domain:192.168.3.32&a…...
【VMware安装Ubuntu实战分享】
在当今数字化时代,虚拟机技术已成为许多开发者、系统管理员以及技术爱好者的得力助手。VMware作为一款功能强大且广泛应用的虚拟化软件,为我们提供了便捷的环境来运行各种操作系统,而Ubuntu凭借其开源、稳定和易用性,深受广大用户…...
【推荐项目】 043-停车管理系统
043-停车管理系统 介绍 使用 springboot vuejs mysql 技术搭建框架。 智能停车管理系统描述 后端框架:采用Spring Boot与MySQL的强强联合,为系统提供稳健、高效的服务支撑。 前端框架:前端选用Vue.js,打造流畅、美观的用户交…...
【深入解析 epoll 的底层实现原理】
IO多路复用的简介select的工作原理和缺点epoll的引入和底层实现(数据结构、系统调用)epoll的优势和改进epoll的工作模式(LT和ET)在Java中的应用或相关API 需要确保每个部分逻辑清晰,逐步深入,帮助用户建立…...
Ubuntu 22.04 官方下载安装 Gradle 记录
Ubuntu 22.04 官方下载安装 Gradle 记录 Gradle 是一个强大的自动化构建工具,广泛用于 Java、Android 等项目的构建中。下面详细介绍如何在 Ubuntu 22.04 中使用官网下载安装 Gradle。 一、准备工作 首先,确保你的系统已安装 Java JDK(推荐…...
HTTPS加密原理详解
目录 HTTPS是什么 加密是什么 HTTPS的工作流程 1.使用对称加密 2.引入非对称加密 3.引入证书机制 客户端验证证书真伪的过程 签名的加密流程 整体工作流程 总结 HTTPS是什么 HTTPS协议也是一个应用程协议,是在HTTP的基础上加入了一个加密层,由…...
无公网IP也能远程控制Windows:Linux rdesktop内网穿透实战
文章目录 前言1. Windows 开启远程桌面2. Linux安装rdesktop工具3. Win安装Cpolar工具4. 配置远程桌面地址5. 远程桌面连接测试6. 设置固定远程地址7. 固定地址连接测试 前言 如今远程办公已经从一种选择变成了许多企业和个人的必修课,而如何在Linux系统上高效地访…...
Unity入门学习笔记(Day01)
一.认识unity工作面板 1.1.project window(项目面板) 显示当前项目中的所有文件和目录,包含了项目里面所有的资源文件 1.2.console window(输出面板) 显示当前游戏开发中生成的警告错误 1.3.hierarchy window&…...
HTML中的块元素与行内元素
1.块级标签 块级元素会独占一行,通常用于构建页面的结构。常见的块级元素包括: <div>:通用的块级容器。没有任何语意。可以创建网页的不同部分,导航栏侧边栏等。 <body><div class"nav"><a hre…...
postgreSQL window function高级用法
正常使用:相当于对每个row做一次子查询 SELECT depname, empno, salary, avg(salary) OVER (PARTITION BY depname) FROM empsalary;order by 区别window frame and partition 没有order by, window function是对整个partition起作用, part…...
当中国“智算心跳”与全球共振:九章云极DataCanvas首秀MWC 2025
3月3日,西班牙巴塞罗那,全球通信与科技领域的盛会“2025世界移动通信大会(MWC 2025)”正式拉开帷幕。中国人工智能基础设施领军企业九章云极DataCanvas公司以全球化战略视野与硬核技术实力,全方位、多维度地展示了在智…...
机器视觉检测显卡与工控机选型指南
在机器视觉检测项目中,深度学习显卡和工控机的选择直接影响算法性能、系统稳定性和长期维护成本。以下是关键注意事项及建议: 一、深度学习显卡选择 核心需求分析 任务类型:检测任务复杂度(如YOLO、ResNet等模型的参数量)决定显存需求。 高分辨率图像(如4K以上)需大显存…...
高危文件识别的常用算法:原理、应用与企业场景
高危文件识别的常用算法:原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件,如包含恶意代码、敏感数据或欺诈内容的文档,在企业协同办公环境中(如Teams、Google Workspace)尤为重要。结合大模型技术&…...
WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)
一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解,适合用作学习或写简历项目背景说明。 🧠 一、概念简介:Solidity 合约开发 Solidity 是一种专门为 以太坊(Ethereum)平台编写智能合约的高级编…...
微信小程序云开发平台MySQL的连接方式
注:微信小程序云开发平台指的是腾讯云开发 先给结论:微信小程序云开发平台的MySQL,无法通过获取数据库连接信息的方式进行连接,连接只能通过云开发的SDK连接,具体要参考官方文档: 为什么? 因为…...
学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”
2025年#高考 将在近日拉开帷幕,#AI 监考一度冲上热搜。当AI深度融入高考,#时间同步 不再是辅助功能,而是决定AI监考系统成败的“生命线”。 AI亮相2025高考,40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕,江西、…...
return this;返回的是谁
一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请,不同级别的经理有不同的审批权限: // 抽象处理者:审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...
LRU 缓存机制详解与实现(Java版) + 力扣解决
📌 LRU 缓存机制详解与实现(Java版) 一、📖 问题背景 在日常开发中,我们经常会使用 缓存(Cache) 来提升性能。但由于内存有限,缓存不可能无限增长,于是需要策略决定&am…...
脑机新手指南(七):OpenBCI_GUI:从环境搭建到数据可视化(上)
一、OpenBCI_GUI 项目概述 (一)项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台,其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言,首次接触 OpenBCI 设备时,往…...
Unity UGUI Button事件流程
场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...
通过MicroSip配置自己的freeswitch服务器进行调试记录
之前用docker安装的freeswitch的,启动是正常的, 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...
使用SSE解决获取状态不一致问题
使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件,这个上传文件是整体功能的一部分,文件在上传的过程中…...
