flutter开发实战-类似微博帖子列表及下拉刷新上拉加载效果

2024-05-30 16:12
文章标签 实战 加载 微博 开发 刷新 效果 列表 上拉 flutter 类似 帖子

本文主要是介绍flutter开发实战-类似微博帖子列表及下拉刷新上拉加载效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

flutter开发实战-类似微博帖子列表及下拉刷新上拉加载效果

在之前处理类似微博帖子列表及下拉刷新上拉加载效果，刷新使用的是EasyRefresh

一、引入EasyRefresh与likeButton

在工程的pubspec.yaml中引入插件

    # 下拉刷新、上拉更多easy_refresh: ^3.3.2+1pull_to_refresh: ^2.0.0

需要使用EasyRefreshController来控制处理刷新，初始化

@overridevoid initState() {super.initState();_controller = EasyRefreshController(controlFinishRefresh: true,controlFinishLoad: true,);}@overridevoid dispose() {_controller.dispose();super.dispose();}

需要在onRefresh与onLoad来处理下拉刷新上拉加载数据。

二、类似微博帖子列表及下拉刷新上拉加载效果

类似微博帖子列表，这里定义帖子item，每个帖子中可能包括多张图片。

NoteItem：

class NoteItem {String? feedId;String? coverImageUrl;String? title;String? textContent;String? username;String? avatarUrl;String? time;String? likeNum;bool? liked;String? categoryName;List<NoteImage>? images;
}class NoteImage {String? imageUrl;String? imageWidth;String? imageHeight;
}

定义每个帖子的Widget：NoteListItemWidget，NoteListItemWidget结构是用户头像，描述文本，帖子图片，点赞、评论、分享栏。

NoteListItemWidget：

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_app_demolab/display/note_item.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:like_button/like_button.dart';class NoteListItemWidget extends StatefulWidget {NoteListItemWidget({super.key,required this.noteItem,});final NoteItem noteItem;@override_NoteListItemWidgetState createState() => _NoteListItemWidgetState();
}class _NoteListItemWidgetState extends State<NoteListItemWidget> {@overrideWidget build(BuildContext context) {return Container(margin: EdgeInsets.symmetric(vertical: 5.0, horizontal: 0.0),padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 15.0),//边框设置decoration: new BoxDecoration(//背景color: Color(0xFFFFFFFF),//设置四周圆角 角度 这里的角度应该为 父Container height 的一半borderRadius: BorderRadius.only(topLeft: Radius.circular(10.0), topRight: Radius.circular(10.0)),//设置四周边框border: new Border.all(width: 1, color: Color(0xFFf1f1f1)),),child: Column(mainAxisAlignment: MainAxisAlignment.start,crossAxisAlignment: CrossAxisAlignment.start,children: [NoteListAuthorBar(username: widget.noteItem.username,avatarUrl: widget.noteItem.avatarUrl,showTime: widget.noteItem.time),Text(widget.noteItem.textContent??"",maxLines: 5,overflow: TextOverflow.ellipsis,style: TextStyle(fontSize: 14,fontWeight: FontWeight.normal,color: Color(0xFF666666),),),NoteListImage(images: (widget.noteItem.images != null? widget.noteItem.images: [])),NoteListBottom(liked: widget.noteItem.liked,likeNum: widget.noteItem.likeNum,categoryName: widget.noteItem.categoryName),],),);}
}// 顶部header
class NoteListAuthorBar extends StatelessWidget {const NoteListAuthorBar({super.key,this.username,this.avatarUrl,this.showTime,});final String? username;final String? avatarUrl;final String? showTime;@overrideWidget build(BuildContext context) {return Container(padding: EdgeInsets.only(bottom: 10),height: 60,child: Row(mainAxisAlignment: MainAxisAlignment.start,crossAxisAlignment: CrossAxisAlignment.center,children: [CircleAvatar(backgroundImage: NetworkImage(avatarUrl ?? ""),),Padding(padding: EdgeInsets.only(left: 10),),Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.start,children: [Text(username ?? "",maxLines: 1,overflow: TextOverflow.ellipsis,style: TextStyle(fontSize: 16,fontWeight: FontWeight.bold,color: Color(0xFF444444),),),Padding(padding: EdgeInsets.only(top: 5),),Text(showTime ?? "",maxLines: 1,overflow: TextOverflow.ellipsis,style: TextStyle(fontSize: 12,fontWeight: FontWeight.normal,color: Color(0xFF444444),),),],)],),);}
}// 显示图片
class NoteListImage extends StatelessWidget {const NoteListImage({super.key,this.images,});final List<NoteImage>? images;Widget layoutOfImages(List images, BuildContext context) {double screenWidth = MediaQuery.of(context).size.width;double containW = screenWidth - 30;if (images.length == 1) {NoteImage noteImage = images[0];double imgWidth = 0;double imgHeight = 0;if (noteImage.imageWidth != null &&noteImage.imageWidth!.isNotEmpty &&noteImage.imageHeight != null &&noteImage.imageHeight!.isNotEmpty) {imgWidth = double.parse(noteImage.imageWidth!);imgHeight = double.parse(noteImage.imageHeight!);if (imgWidth > 0 && imgHeight > 0) {if (imgWidth < 1.0 && imgHeight < 1.0) {double maxLen = containW / 2.0;double showW = maxLen;double showH = maxLen;return Container(height: showH,width: showW,child: CachedNetworkImage(imageUrl: noteImage.imageUrl ?? "",placeholder: (context, url) =>Center(child: CupertinoActivityIndicator()),errorWidget: (context, url, error) => Icon(Icons.error),fit: BoxFit.cover,),);} else {double imageScale = imgWidth / imgHeight;double len1_3 = (containW - 20) / 3.0;double maxLen = len1_3 * 2 + 10;double showW = 0;double showH = 0;if (imageScale > 1.0) {// 横图showW = maxLen;showH = showW / imageScale;} else {// 竖图showH = maxLen;showW = imageScale * showH;}return Container(height: showH,width: showW,child: CachedNetworkImage(imageUrl: noteImage.imageUrl??"",placeholder: (context, url) =>Center(child: CupertinoActivityIndicator()),errorWidget: (context, url, error) => Icon(Icons.error),fit: BoxFit.cover,),);}}}} else if (images.length >= 2) {double showImageW = 0;if (images.length == 2 || images.length == 4) {showImageW = (containW - 10) / 2.0;} else {showImageW = (containW - 20) / 3.0;}List<Widget> imageWidgets = [];for (int index = 0; index < images.length; index++) {NoteImage noteImage = images[index];Widget widget = Container(height: showImageW,width: showImageW,child: CachedNetworkImage(imageUrl: noteImage.imageUrl??"",placeholder: (context, url) =>Center(child: CupertinoActivityIndicator()),errorWidget: (context, url, error) => Icon(Icons.error),fit: BoxFit.cover,));imageWidgets.add(widget);}return Container(alignment: Alignment.center,width: containW,child: Wrap(spacing: 8.0,// 主轴(水平)方向间距runSpacing: 8.0,// 纵轴（垂直）方向间距alignment: WrapAlignment.start,//沿主轴方向居中crossAxisAlignment: WrapCrossAlignment.center,children: imageWidgets,),);}return Container();}@overrideWidget build(BuildContext context) {return Container(padding: EdgeInsets.symmetric(vertical: 10, horizontal: 0),child: layoutOfImages(this.images??[], context),);}
}// 显示底部
class NoteListBottom extends StatelessWidget {const NoteListBottom({super.key,this.liked,this.likeNum,this.categoryName,});final bool? liked;final String? likeNum;final String? categoryName;@overrideWidget build(BuildContext context) {return Container(height: 60,child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,crossAxisAlignment: CrossAxisAlignment.center,children: [Container(padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 10.0),//边框设置decoration: new BoxDecoration(//背景color: Color(0xFFFFFFFF),//设置四周圆角 角度 这里的角度应该为 父Container height 的一半borderRadius: BorderRadius.only(topLeft: Radius.circular(10.0),topRight: Radius.circular(10.0)),//设置四周边框border: new Border.all(width: 1, color: Color(0xFFf1f1f1)),),child: Text(this.categoryName??"",maxLines: 1,overflow: TextOverflow.ellipsis,style: TextStyle(fontSize: 12,fontWeight: FontWeight.normal,color: Color(0xFF444444),),),),Container(padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 10.0),child: Row(mainAxisAlignment: MainAxisAlignment.end,crossAxisAlignment: CrossAxisAlignment.center,children: [LikeButton(likeBuilder: (bool isLiked) {return Icon(Icons.thumb_up,color: (isLiked ? Colors.deepOrange : Color(0xFFA9A9A9)));},likeCount: int.parse(this.likeNum??"0"),isLiked: this.liked,),TextButton(child: Wrap(// 可以通过设置两个基础组件的间距alignment: WrapAlignment.center, //沿主轴方向居中crossAxisAlignment: WrapCrossAlignment.center,spacing: 5,children: [Icon(Icons.comment, color: Color(0xFFA9A9A9)),Text("评论",style:TextStyle(fontSize: 12, color: Color(0xFF888888)))],),onPressed: () {},),TextButton(child: Wrap(// 可以通过设置两个基础组件的间距alignment: WrapAlignment.center, //沿主轴方向居中crossAxisAlignment: WrapCrossAlignment.center,spacing: 5,children: [Icon(Icons.share, color: Color(0xFFA9A9A9)),Text("分享",style:TextStyle(fontSize: 12, color: Color(0xFF888888)))],),onPressed: () {},),],),)],),);}
}

最后，我们在page中处理类似帖子列表DisplayPage

DisplayPage：

import 'dart:math';import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app_demolab/display/note_item.dart';
import 'package:flutter_app_demolab/display/note_item_widget.dart';class DisplayPage extends StatefulWidget {const DisplayPage({super.key});@overrideState<DisplayPage> createState() => _DisplayPageState();
}class _DisplayPageState extends State<DisplayPage> {int _count = 10;late EasyRefreshController _controller;bool isLoading = false;ScrollController scrollController = ScrollController();List<NoteItem> list = [];List<NoteImage> noteImages = [];String randomBit() {String scopeF = '0123456789'; //首位String result = '';result = scopeF[Random().nextInt(scopeF.length)];return result;}@overridevoid initState() {initItems();super.initState();_controller = EasyRefreshController(controlFinishRefresh: true,controlFinishLoad: true,);}@overridevoid dispose() {_controller.dispose();super.dispose();}void initItems() {for (int index = 0; index < 12; index++) {NoteImage model = NoteImage();noteImages.add(model);if (index == 0) {model.imageUrl ="https://c-ssl.duitang.com/uploads/blog/202010/11/20201011085349_R2CjU.thumb.1000_0.jpeg";model.imageWidth = "580";model.imageHeight = "880";} else if (index == 1) {model.imageUrl ="https://c-ssl.duitang.com/uploads/blog/202011/15/20201115080806_7ddba.thumb.1000_0.jpg";model.imageWidth = "580";model.imageHeight = "580";} else if (index == 2) {model.imageUrl ="https://c-ssl.duitang.com/uploads/blog/202011/15/20201115100436_7ffc6.thumb.1000_0.jpg";model.imageWidth = "580";model.imageHeight = "560";} else if (index == 3) {model.imageUrl ="https://c-ssl.duitang.com/uploads/item/202006/09/20200609232715_yvqkd.thumb.1000_0.jpg";model.imageWidth = "580";model.imageHeight = "380";} else if (index == 4) {model.imageUrl ="https://c-ssl.duitang.com/uploads/blog/202012/03/20201203144923_425bc.thumb.1000_0.jpg";model.imageWidth = "580";model.imageHeight = "430";} else if (index == 5) {model.imageUrl ="https://c-ssl.duitang.com/uploads/blog/202010/11/20201011085351_3d2cS.thumb.1000_0.jpeg";model.imageWidth = "580";model.imageHeight = "850";} else if (index == 6) {model.imageUrl ="https://c-ssl.duitang.com/uploads/blog/202009/28/20200928184639_sxrum.thumb.1000_0.jpeg";model.imageWidth = "580";model.imageHeight = "810";} else if (index == 7) {model.imageUrl ="https://c-ssl.duitang.com/uploads/blog/202012/03/20201203145208_55d8c.thumb.1000_0.jpg";model.imageWidth = "580";model.imageHeight = "430";} else if (index == 8) {model.imageUrl ="https://c-ssl.duitang.com/uploads/item/202006/09/20200609232715_pjsin.thumb.1000_0.jpg";model.imageWidth = "580";model.imageHeight = "860";} else if (index == 9) {model.imageUrl ="https://c-ssl.duitang.com/uploads/blog/202012/03/20201203144929_cd406.thumb.1000_0.jpg";model.imageWidth = "580";model.imageHeight = "450";} else if (index == 10) {model.imageUrl ="https://c-ssl.duitang.com/uploads/blog/202012/03/20201203144705_40405.thumb.1000_0.jpg";model.imageWidth = "580";model.imageHeight = "450";} else if (index == 11) {model.imageUrl ="https://c-ssl.duitang.com/uploads/blog/202012/03/20201203144708_d5287.thumb.1000_0.jpg";model.imageWidth = "580";model.imageHeight = "750";}}for (int index = 0; index < 20; index++) {NoteItem model = NoteItem();model.liked = false;list.add(model);if (index % 5 == 0) {model.username = "可可";model.avatarUrl ="https://c-ssl.duitang.com/uploads/item/202007/22/20200722212206_ifscm.thumb.1000_0.jpg";model.time = "08/01 13:51";model.textContent = "等轮到你讲话时再说,认真聆听对方的谈话,千万别打断对方讲话,耐心等着,轮到你时再讲。";model.likeNum = "861380";model.categoryName = "兽圈";} else if (index % 5 == 2) {model.username = "琪琪";model.avatarUrl ="https://c-ssl.duitang.com/uploads/item/202007/22/20200722212209_insvm.thumb.1000_0.png";model.time = "08/01 13:51";model.textContent = "记得有活动，在活动现场等你哦～";model.likeNum = "50999";model.categoryName = "娃圈";} else if (index % 5 == 4) {model.username = "悦悦";model.avatarUrl ="https://c-ssl.duitang.com/uploads/item/202007/19/20200719102754_jrcoe.thumb.1000_0.jpg";model.time = "08/01 13:51";model.textContent = "说一说你想要的形象模型，晒一晒你的喜欢";model.likeNum = "6150";model.categoryName = "Pia戏圈";} else {model.username = "爱丽多啦";model.avatarUrl ="https://c-ssl.duitang.com/uploads/item/202007/19/20200719102756_ihfku.thumb.1000_0.jpg";model.time = "08/01 13:51";model.textContent = "你永远不懂我喜欢的东西，555";model.likeNum = "1507";model.categoryName = "语c圈";}List<NoteImage> tmpImages = [];String randomf = randomBit();String randomt = randomBit();int f = int.parse(randomf);int t = int.parse(randomt);print("f:$f");print("t:$t");if (f < t) {tmpImages.addAll(noteImages.sublist(f, t));} else if (f > t) {tmpImages.addAll(noteImages.sublist(t, f));} else {tmpImages.addAll(noteImages.sublist(t, t+1));}model.images = tmpImages;}}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('EasyRefresh'),),body: EasyRefresh(controller: _controller,header: const ClassicHeader(),footer: const ClassicFooter(),onRefresh: () async {await Future.delayed(const Duration(seconds: 4));if (!mounted) {return;}list = [];initItems();setState(() {_count = 10;});_controller.finishRefresh();_controller.resetFooter();},onLoad: () async {await Future.delayed(const Duration(seconds: 4));if (!mounted) {return;}initItems();setState(() {_count += 5;});_controller.finishLoad(_count >= 200 ? IndicatorResult.noMore : IndicatorResult.success);},child: ListView.builder(itemBuilder: (context, index) {return NoteListItemWidget(noteItem: this.list[index]);},itemCount: this.list.length,),),);}
}

效果图如下：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、小结

flutter开发实战-类似微博帖子列表及下拉刷新上拉加载效果

学习记录，每天不停进步。

这篇关于flutter开发实战-类似微博帖子列表及下拉刷新上拉加载效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1016504。

相关文章

利用Python开发Markdown表格结构转换为Excel工具

利用Python开发Markdown表格结构转换为Excel工具

《利用Python开发Markdown表格结构转换为Excel工具》在数据管理和文档编写过程中,我们经常使用Markdown来记录表格数据,但它没有Excel使用方便,所以本文将使用Python编写一... 目录1.完整代码2. 项目概述3. 代码解析3.1 依赖库3.2 GUI 设计3.3 解析 Mark
阅读更多...
利用Go语言开发文件操作工具轻松处理所有文件

利用Go语言开发文件操作工具轻松处理所有文件

《利用Go语言开发文件操作工具轻松处理所有文件》在后端开发中,文件操作是一个非常常见但又容易出错的场景,本文小编要向大家介绍一个强大的Go语言文件操作工具库,它能帮你轻松处理各种文件操作场景... 目录为什么需要这个工具？核心功能详解1. 文件/目录存javascript在性检查2. 批量创建目录3. 文件
阅读更多...
SpringBoot项目启动报错"找不到或无法加载主类"的解决方法

SpringBoot项目启动报错"找不到或无法加载主类"的解决方法

《SpringBoot项目启动报错找不到或无法加载主类的解决方法》在使用IntelliJIDEA开发基于SpringBoot框架的Java程序时,可能会出现找不到或无法加载主类com.example.... 目录一、问题描述二、排查过程三、解决方案一、问题描述在使用 IntelliJ IDEA 开发基于
阅读更多...
Python实战之屏幕录制功能的实现

Python实战之屏幕录制功能的实现

《Python实战之屏幕录制功能的实现》屏幕录制,即屏幕捕获,是指将计算机屏幕上的活动记录下来,生成视频文件,本文主要为大家介绍了如何使用Python实现这一功能,希望对大家有所帮助... 目录屏幕录制原理图像捕获音频捕获编码压缩输出保存完整的屏幕录制工具高级功能实时预览增加水印多平台支持屏幕录制原理屏幕
阅读更多...
Python中DataFrame转列表的最全指南

Python中DataFrame转列表的最全指南

《Python中DataFrame转列表的最全指南》在Python数据分析中,Pandas的DataFrame是最常用的数据结构之一,本文将为你详解5种主流DataFrame转换为列表的方法,大家可以... 目录引言一、基础转换方法解析1. tolist()直接转换法2. values.tolist()矩阵
阅读更多...
Android App安装列表获取方法(实践方案)

Android App安装列表获取方法(实践方案)

《AndroidApp安装列表获取方法(实践方案)》文章介绍了Android11及以上版本获取应用列表的方案调整,包括权限配置、白名单配置和action配置三种方式,并提供了相应的Java和Kotl... 目录前言实现方案         方案概述一、 androidManifest 三种配置方式
阅读更多...
python展开嵌套列表的多种方法

python展开嵌套列表的多种方法

《python展开嵌套列表的多种方法》本文主要介绍了python展开嵌套列表的多种方法,包括for循环、列表推导式和sum函数三种方法,具有一定的参考价值,感兴趣的可以了解一下... 目录一、嵌套列表格式二、嵌套列表展开方法（一）for循环（1）for循环+append()（2）for循环+pyPhWiFd
阅读更多...
最新Spring Security实战教程之Spring Security安全框架指南

最新Spring Security实战教程之Spring Security安全框架指南

《最新SpringSecurity实战教程之SpringSecurity安全框架指南》SpringSecurity是Spring生态系统中的核心组件,提供认证、授权和防护机制,以保护应用免受各种安... 目录前言什么是Spring Security？同类框架对比Spring Security典型应用场景传统
阅读更多...
最新Spring Security实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)

最新Spring Security实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)

《最新SpringSecurity实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)》本章节介绍了如何通过SpringSecurity实现从配置自定义登录页面、表单登录处理逻辑的配置,并简单模拟... 目录前言改造准备开始登录页改造自定义用户名密码登陆成功失败跳转问题自定义登出前后端分离适配方案结语前言
阅读更多...
基于Python开发批量提取Excel图片的小工具

基于Python开发批量提取Excel图片的小工具

《基于Python开发批量提取Excel图片的小工具》这篇文章主要为大家详细介绍了如何使用Python中的openpyxl库开发一个小工具,可以实现批量提取Excel图片,有需要的小伙伴可以参考一下... 目前有一个需求，就是批量读取当前目录下所有文件夹里的Excel文件，去获取出Excel文件中的图片，并
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2