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});@overrideState<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(),);}}@overridevoid initState() {super.initState();_scrollController.addListener((){double scrollOffsetY =  _scrollController.position.pixels;double scrollContentHeight =  _scrollController.position.maxScrollExtent;if (scrollOffsetY > scrollContentHeight + 20) { print("上拉加载更多");_getNewDataRequest();}});_getNewDataRequest();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("模拟新闻列表上下拉加载 + 加载html的数据"),),body: _showNewsListWidget(),);}
}

5. 加载 Html 的数据

1. 第三方插件：flutter_widget_from_html_core: ^0.16.0
2. 引入头文件：

import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';

3. 使用代码

           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});@overrideState<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());}}@overridevoid initState() {super.initState();_getNewsDetailRequest();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("详情"),),body: _newsDetailWidget(),);}
}