本篇文章给大家谈谈flutter_tiktok,以及Flutter 仿抖音效果 (二) 界面布局对应的知识点,文章可能有点长,但是希望大家可以阅读完,增长自己的知识,最重要的是希望对各位有所帮助,可以解决了您的问题,不要忘了收藏本站喔。

Flutter项目插件整理
#弹窗
oktoast:^3.1.5
#路由
get:^4.5.1
#百度地图定位
flutter_bmflocation:^2.0.0-nullsafety.1
#百度地图-基础地图
flutter_baidu_mapapi_map:^3.0.0+2
#百度地图-检索
flutter_baidu_mapapi_search:^3.0.0
#百度地图-计算工具
flutter_baidu_mapapi_utils:^3.0.0
#屏幕自动适应
flutter_screenutil:^5.2.0
#Banner图切换
flutter_swiper_plus:^2.0.4
#网络请求
dio:^4.0.4
dio_cache_interceptor:^3.2.2
pretty_dio_logger:^1.2.0-beta-1
#城市选择器
azlistview:^2.0.0
#本地存储
get_storage:^2.0.3
#权限
permission_handler:^8.3.0
#保存图片
image_gallery_saver:^1.7.1
#image_save:^5.0.0
#常用工具类
common_utils:
path:plugin/common_utils-2.0.2
#选择器
flutter_picker:^2.0.2
#生成二维码
qr_flutter:^4.0.0
#验证码输入框
pin_input_text_field:^4.1.1
#汉字转拼音
lpinyin:^2.0.3
#多张图片上传
wechat_assets_picker:^6.3.1
wechat_camera_picker:^2.6.3
#裁剪图片
image_cropper:^1.5.0
#图片压缩
flutter_luban:^0.1.13
#家谱树
graphview:^1.1.1
vector_math:^2.1.0
#行为验证码
steel_crypt:^3.0.0+1
encrypt:^5.0.0
#二维码识别
flutter_qr_reader:^1.0.5
#右上角小图标
badges:^2.0.2
#唤醒系统应用
url_launcher:^6.0.17
flutter_sms:^2.3.2
#QQ分享
tencent_kit:^2.1.0
flutter_cache_manager:^3.3.0
#微信SDK
fluwx:^3.6.1+4
#支付宝SDK
tobias:
path:plugin/tobias-2.2.0
#个推
getuiflut:^0.2.11
#极光推送
#jpush_flutter:
#path:plugin/jpush_flutter-2.2.2
#极光魔链
jmlink_flutter_plugin:
path:plugin/jmlink_flutter_plugin-2.1.2
#极光认证
jverify:
path:plugin/jverify-2.2.4
#极光统计
janalytics:
path:plugin/janalytics-2.1.5
#倒计时
circular_countdown_timer:^0.2.0
#加载中效果
flutter_spinkit:^5.1.0
#APP更新
r_upgrade:
path:plugin/r_upgrade-0.3.7+2
#刷新-加载更多
flutter_easyrefresh:^2.2.1
#右上角弹出式菜单
custom_pop_up_menu:^1.2.2
#时间轴
timeline_tile:^2.0.0
#虚线边框
dotted_border:^2.0.0
like_button:^2.0.4
#图片
extended_image:^6.0.1
#图片九宫格
nine_grid_view:^2.0.0
#时间模糊插件
timeago:
path:plugin/timeago-3.1.0
#屏幕截图
screenshot:^1.2.3
#图片压缩
flutter_image_compress:^1.1.0
#List左滑右滑
flutter_slidable:^1.2.0
#底部伸缩抽屉-针对地图
sliding_up_panel:^2.0.0+1
#键盘高度
flutter_keyboard_size:^1.0.0+4
#JSON动图
lottie:^1.2.2
#城市选择器
city_pickers:
path:plugin/city_pickers-1.0.1
#调试工具
path_provider:^2.0.7
#打开HTML
webview_flutter:^2.3.1
#表情
emoji_picker_flutter:^1.0.8
#扇形进度
ai_progress:^2.0.0
#喜欢按钮
tiktok_favorite_gesture:^1.0.0
#获取手机信息
device_info:^2.0.3
#包信息
package_info:^2.0.2
device_apps:^2.1.1
#倒计时
stop_watch_timer:^1.3.1
#发现Android和iOS上的网络(WiFi和移动/蜂窝)连接状态
connectivity_plus:^2.2.0
#从应用程序打开iOS和Android手机设置。
app_settings:^4.1.1
#日志上报
sentry_flutter:^6.1.2
#后退拦截
back_button_interceptor:^5.0.2
#视频播放器
better_player:^0.0.81
#APP启动图
flutter_native_splash:^2.0.4
#JSON-TO-MAPPER
dart_json_mapper:^2.1.17
#HTML展示
flutter_html:^3.0.0-alpha.2
#XDtoFlutter
adobe_xd:^2.0.1
flutter_svg:^1.0.3
#APPBAR背景色渐变
new_gradient_app_bar:^0.2.0
#音频播放
flame_audio:^1.0.0
#入门介绍页
intro_slider:^3.0.3
#键盘
keyboard_actions:^3.4.5
emoji_keyboard_flutter:^1.2.7
#单选选择框
flutter_pickers:^2.1.9
Flutter 仿抖音效果 (二) 界面布局
Flutter仿抖音效果(一)全屏点爱星
Flutter仿抖音效果(二)界面布局
[Flutter仿抖音效果(三)视频播放列表](https://www.jianshu.com/p/d0f44241d80f)
项目地址:https://github.com/CZXBigBrother/flutter_TikTok持续效果更新
1.基本的布局是简单的,外层通过Stack作为根
2.左边点赞的控件组通过Align进行统一布局
3.顶部控件组通过Positioned进行布局,设置顶部距离,其实也可以用align,我们多使用几种来习惯flutter的布局
4.底部同样使用Positioned,设置底部距离
5.子页面的左右滑动使用PageView,一开始我们要从推荐开始左滑到关注,可以使用reverse属性,不需要更多额外的操作
1.pageController监听
刷新顶部的下划线时,我们一样使用StreamController刷新,这样效率比setstate高很多
2.歌曲名走马灯效果
这个效果看起来挺麻烦的其实实现起来超级的简单用最普通的ListView就能快速的实现
首页listview里面套入的是最简单的container+text
listview添加一个ScrollController做为滑动的控制
使用一个定时器,把listview滑到最大的位置之后,在滑回去
先通过scroController.position.maxScrollExtent获取最大位置,
然后通过scroController.animateTo进行滑动,因为我设置一次循环的时间是3000毫秒,所以滑过去和滑回来的时间各占一般newDuration(milliseconds:(time*0.5).toInt()),还有就是歌名没有大于最大宽度时候其实我们不需要进行滑动,所以判断maxScrollExtent是否大于0来确定是否进行滑动动画
关于flutter_tiktok和Flutter 仿抖音效果 (二) 界面布局的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。
