Flutter - 微信朋友圈、十字滑动效果(微博/抖音个人中心效果)

demo 地址: https://github.com/iotjin/jh_flutter_demo
代码不定时更新,请前往github查看最新代码

前言

一般APP都有类似微博/抖音个人中心的效果,支持上下拉刷新,并且顶部有个图片可以下拉放大,图片底部是几个tab,可以切换不同的页面,手指往下滑动时图片和标题(整个header)就变成导航条方便展示更多的信息。

这里基本是通过 NestedScrollView + SliverAppBar + TabBar + TabBarView + EasyRefresh 实现的,不过在项目中对其进行了封装,代码比较多,具体代码可以demo

使用的两个三方库

# NestedScrollView https://pub.flutter-io.cn/packages/extended_nested_scroll_view
extended_nested_scroll_view: ^6.1.0
# 下拉刷新(flutter_easyrefresh 3.0版本) https://pub.flutter-io.cn/packages/easy_refresh
easy_refresh: ^3.3.2+1

实现效果

  • appbar滚动颜色渐变,状态栏颜色切换
  • 背景图下拉放大
  • 上下拉刷新得功能
  • 左右切换页面状态保持
  • header + footer
  • 自定义loading状态位置
  • 暗黑模式切换
  • 空数据处理

效果一

效果一对应的具体页面代码
Flutter - 微信朋友圈、十字滑动效果(微博/抖音个人中心效果)_第1张图片

效果二

效果二对应的具体页面代码

Flutter - 微信朋友圈、十字滑动效果(微博/抖音个人中心效果)_第2张图片

效果三

效果三对应的具体页面代码

Flutter - 微信朋友圈、十字滑动效果(微博/抖音个人中心效果)_第3张图片

你可能感兴趣的:(Flutter,flutter,微信)