Flutter 实现简单聊天界面 下拉滑动加载更多
先上效果图。
刷新功能实现
将刷新组件嵌入滑动组件中，因为聊天界面都是由下往上滑，所以ListView设置了reverse: true实现反转列表组件。组件itemCount的值设置消息数组长度+1，因为设置了reverse，所以需要将刷新加载组件放到当index == 消息长度的位置。
return index == _chatRecords.length ? LoadIndicator() : chatItemWidget(index);判断是否出发刷新的逻辑也很简单，当_scrollController.position.pixels大于等于_scrollController.position.maxScrollExtent的时候触发刷新操作就可以了。
if (_scrollController.position.pixels >= _scrollController.position.maxScrollExtent) {
if (_isLoading) return;
_isLoading = true;
onLoadMore();
}界面优化
·优化列表滑动弹性效果
列表的physics使用了自己实现的ChatScrollPhysics。目的是为了实现下滑加载带弹性效果，上滑屏蔽弹性效果。（BouncingScrollPhysics是上下都有弹性效果）
重写applyBoundaryConditions方法
///base on BouncingScrollPhysics
///
class ChatScrollPhysics extends ScrollPhysics {
...
@override
double applyBoundaryConditions(ScrollMetrics position, double value) {
if (value < position.pixels && position.pixels <= position.minScrollExtent) // underscroll
return value - position.pixels;
if (value < position.minScrollExtent && position.minScrollExtent < position.pixels) // hit top edge
return value - position.minScrollExtent;
return 0.0;
}
...
}同时修改 0.52的值可以实现这个系数从某个值开始，逐渐变得难以过度滚动。
double frictionFactor(double overscrollFraction) =>
0.52 * math.pow(1 - overscrollFraction, 2);·关闭过度滚动产生的光晕
使用ScrollConfiguration包裹滑动组件behavior设置成自己实现的behavior。
ScrollConfiguration(
behavior: ChatScrollBehavior(),
child: yourScrollViewWidget,
),class ChatScrollBehavior extends ScrollBehavior {
final bool showLeading;
final bool showTrailing;
ChatScrollBehavior({
this.showLeading: false,
this.showTrailing: false,
});
@override
Widget buildViewportChrome(BuildContext context, Widget child, AxisDirection axisDirection) {
return GlowingOverscrollIndicator(
showLeading: showLeading,
showTrailing: showTrailing,
child: child,
axisDirection: axisDirection,
color: Theme.of(context).primaryColor,
);
}
}本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
