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。

相关文章

MySQL 多列 IN 查询之语法、性能与实战技巧(最新整理)

MySQL 多列 IN 查询之语法、性能与实战技巧(最新整理)

《MySQL多列IN查询之语法、性能与实战技巧(最新整理)》本文详解MySQL多列IN查询,对比传统OR写法,强调其简洁高效,适合批量匹配复合键,通过联合索引、分批次优化提升性能,兼容多种数据库... 目录一、基础语法：多列 IN 的两种写法1. 直接值列表2. 子查询二、对比传统 OR 的写法三、性能分析
阅读更多...
浅析Spring如何控制Bean的加载顺序

浅析Spring如何控制Bean的加载顺序

《浅析Spring如何控制Bean的加载顺序》在大多数情况下,我们不需要手动控制Bean的加载顺序,因为Spring的IoC容器足够智能,但在某些特殊场景下,这种隐式的依赖关系可能不存在,下面我们就来... 目录核心原则：依赖驱动加载手动控制 Bean 加载顺序的方法方法 1：使用@DependsOn(最直
阅读更多...
Python办公自动化实战之打造智能邮件发送工具

Python办公自动化实战之打造智能邮件发送工具

《Python办公自动化实战之打造智能邮件发送工具》在数字化办公场景中,邮件自动化是提升工作效率的关键技能,本文将演示如何使用Python的smtplib和email库构建一个支持图文混排,多附件,多... 目录前言一、基础配置：搭建邮件发送框架1.1 邮箱服务准备1.2 核心库导入1.3 基础发送函数二、
阅读更多...
Android ClassLoader加载机制详解

Android ClassLoader加载机制详解

《AndroidClassLoader加载机制详解》Android的ClassLoader负责加载.dex文件,基于双亲委派模型,支持热修复和插件化,需注意类冲突、内存泄漏和兼容性问题,本文给大家介... 目录一、ClassLoader概述1.1 类加载的基本概念1.2 android与Java Class
阅读更多...
PowerShell中15个提升运维效率关键命令实战指南

PowerShell中15个提升运维效率关键命令实战指南

《PowerShell中15个提升运维效率关键命令实战指南》作为网络安全专业人员的必备技能,PowerShell在系统管理、日志分析、威胁检测和自动化响应方面展现出强大能力,下面我们就来看看15个提升... 目录一、PowerShell在网络安全中的战略价值二、网络安全关键场景命令实战1. 系统安全基线核查
阅读更多...
Python中将嵌套列表扁平化的多种实现方法

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表（即列表中包含列表）转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert
阅读更多...
从原理到实战深入理解Java 断言assert

从原理到实战深入理解Java 断言assert

《从原理到实战深入理解Java断言assert》本文深入解析Java断言机制,涵盖语法、工作原理、启用方式及与异常的区别,推荐用于开发阶段的条件检查与状态验证,并强调生产环境应使用参数验证工具类替代... 目录深入理解 Java 断言（assert）：从原理到实战引言：为什么需要断言？一、断言基础1.1 语
阅读更多...
Java MQTT实战应用

Java MQTT实战应用

《JavaMQTT实战应用》本文详解MQTT协议,涵盖其发布/订阅机制、低功耗高效特性、三种服务质量等级（QoS0/1/2）,以及客户端、代理、主题的核心概念,最后提供Linux部署教程、Sprin... 目录一、MQTT协议二、MQTT优点三、三种服务质量等级四、客户端、代理、主题1. 客户端（Clien
阅读更多...
在Spring Boot中集成RabbitMQ的实战记录

在Spring Boot中集成RabbitMQ的实战记录

《在SpringBoot中集成RabbitMQ的实战记录》本文介绍SpringBoot集成RabbitMQ的步骤,涵盖配置连接、消息发送与接收,并对比两种定义Exchange与队列的方式:手动声明(... 目录前言准备工作1. 安装 RabbitMQ2. 消息发送者（Producer）配置1. 创建 Spr
阅读更多...
深度解析Spring Boot拦截器Interceptor与过滤器Filter的区别与实战指南

深度解析Spring Boot拦截器Interceptor与过滤器Filter的区别与实战指南

《深度解析SpringBoot拦截器Interceptor与过滤器Filter的区别与实战指南》本文深度解析SpringBoot中拦截器与过滤器的区别,涵盖执行顺序、依赖关系、异常处理等核心差异,并... 目录Spring Boot拦截器（Interceptor）与过滤器（Filter）深度解析：区别、实现
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2