flutter开发实战-类似微博帖子列表及下拉刷新上拉加载效果
在之前处理类似微博帖子列表及下拉刷新上拉加载效果，刷新使用的是EasyRefresh
一、引入EasyRefresh与likeButton
在工程的pubspec.yaml中引入插件
# 下拉刷新、上拉更多
easy_refresh: ^3.3.2+1
pull_to_refresh: ^2.0.0
需要使用EasyRefreshController来控制处理刷新，初始化
@override
void initState() {
super.initState();
_controller = EasyRefreshController(
controlFinishRefresh: true,
controlFinishLoad: true,
);
}
@override
void 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> {
@override
Widget 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;
@override
Widget 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();
}
@override
Widget 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;
@override
Widget 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});
@override
State<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;
}
@override
void initState() {
initItems();
super.initState();
_controller = EasyRefreshController(
controlFinishRefresh: true,
controlFinishLoad: true,
);
}
@override
void 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;
}
}
@override
Widget 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开发实战-类似微博帖子列表及下拉刷新上拉加载效果
学习记录，每天不停进步。
