本篇文章给大家谈谈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 仿抖音效果 (二) 界面布局的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。

点赞(282) 打赏
Tiktok咨询
TikTok卖家交流群
跨境卖家专属社群
专家咨询
跨境卖家资讯群
集结行业大咖卖家,助力品牌出海,赶紧加入!
入群福利:
领取最新跨境行业研报+跨境工具导航包