flutter仿qq音乐 flutter 仿抖音

Flutter开源app---开眼短视频

在玩安卓上有款组件化开源app的项目，一款模仿 Eyepetizer | 开眼视频的 开源app,这款app设计风格特别喜欢的，比较简洁，美观，然后最近又在学flutter的知识，于是就写了一款flutter版本的开源短视频，效果也是听不错的，废话不多说，先上效果图。

先附上项目地址：

项目api会在后面的参考链接里，或者直接项目内查看。

项目地址：

更新：6/30 项目新增下拉刷新，上拉加载功能

kotlin版本开眼短视频开发中，敬请期待...

总结：在此感谢参考的伙伴的文章，写的也很好，然后我将这个项目改写成了flutter，当中也学习到了很多flutter相关的知识，后续还有继续巩固，不断学习。

参考链接（包含本项目的api）

相关问答

Q1: Flutter 仿企业微信多选-listview可见item位置

有一个需求，是仿企业照微信的多选（效果大家自己去看）。我想到了两种方案：

思路：我们直接通过listview.builder是没办法自定义SliverChildBuilderDelegate，我们可以通过listview.custom来自定义SliverChildBuilderDelegate，通过自定义我们可以重写didFinishLayout方法，拿到里面缓存的第一个item和最后一个item。可见item的跟缓存item是差5个的，可以间接算出来，后面发现其实不太行，上下滑动之后会显示之前滑动时候的可见位置。 正解是：这个里面还有个estimateMaxScrollOffset方法，正常来说通过它可以获取到可见的第一个和最后一个item位置。但是我一开始使用这个方法，不会被回调，后面不知道修改了什么，就会回调，然后这个位置是准确的。

看下listview.builder的源码

我们可以看到childrenDelegate是直接定义好了的。

在看看listview.custom 的源码

childrenDelegate这个是一个必传参数。

Q2: Flutter 仿抖音效果 (二) 界面布局

Flutter 仿抖音效果 (一) 全屏点爱星

Flutter 仿抖音效果 (二) 界面布局

[Flutter 仿抖音效果 (三) 视频播放列表] ( )

项目地址: 持续效果更新

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毫秒,所以滑过去和滑回来的时间各占一般 new Duration(milliseconds: (time * 0.5).toInt()),还有就是歌名没有大于最大宽度时候其实我们不需要进行滑动,所以判断maxScrollExtent是否大于0来确定是否进行滑动动画

Q3: 有什么好听的动漫音乐

小列表，全女声，全ACG范畴，快歌慢歌都有。自己扫一下看看。

（歌名-歌手（出处））

adore-Kalafina（黑执事2ED2 Single『辉く空の静寂には』 M2）

After All～缀る想い～-上原れな（Gal-白相薄2ED）

Answer-片雾烈火（Gal-G弦OP）

Aria-Kalafina（空境4迦蓝之洞）

Being-KOTOKO（夏娜1OP2）

BLAZE-KOTOKO（夏娜2OP2）

Brave Song-Aoi Tada（Angel Beats! ED）

Causal Chain-游女（Gal-うたてめぐりOP）

Close your eyes-彩音（Gal-G弦IN）

Disillusion-タイナカ サチ（F/SN OP1）

Don't Say "Lazy"-桜高軽音部（Kon!ED）

emotional flutter-原田ひとみ（Gal-EF ED）

eternal feather-原田ひとみ（Gal-EF OP）

ever forever-原田ひとみ（Gal-EF ED）

Energy-Ceui（传说中的勇者传说OP2 Single『Last Inferno』 M2）

fairytale-Kalafina（空境6忘却录音）

Find the blue-いとうかなこ（Gal-CHAOS；HEAD OP）

罪过に契约の血を-FES（cv:榊原ゆい）（Gal-CHAOS；HEAD IN）

fortissimo-the ultimate crisis- -fripSide（电磁炮OVA OP Single『Future gazer』 M2）

For フルーッバスケット-冈崎律子（水果篮子OP1）

future gazer-fripSide（电磁炮OVA OP）

Get my way!-川田まみ（旋风管家 ED2）

Gloria-Kalafina（单曲Lacrimosa M2）

God knows-平野绫（凉宫 IN1）

I miss you(Lia solo)-Lia（FA赤约 ED）

I Say yes-ICHIKO（零使2 OP）

JOINT-川田まみ（夏娜2 OP1）

Lacrimosa-Kalafina（黑执事ED2）

LAMENT～やがて喜び-结城アイラ（传勇传 OP1）

Last Inferno-Ceui（传勇传 OP2）

late in autumn-fripSide（电磁炮OP Single『only my RAILGUN』 M2）

LEVEL5 -judgelight- -fripSide（电磁炮 OP2）

Light Colors-Lia（Gal-智代After OPli）

Lilium-小黑久美子（妖精的旋律OP）

Lirica-Kalafina（单曲Storia M2）

Listen!!-桜高軽音部（Kon!! ED）

Lost my music-平野绫（凉宫 IN2）

Magnet-ミク＋ルカ（V曲）

memory of snow-fripSide（电磁炮OP2 Single『LEVEL5 -judgelight-』 M2）

oblivious-Kalafina（空境1俯瞰风景）

Only My RAILGUN-fripSide（电磁炮 OP1）

progressive-Kalafina（单曲progressive）

Reine (du) Lace-结城アイラ（传勇传OP1 Single『LAMENT ～やがて喜びを～』 M2）

Sapphire-Kalafina（ソラノヲトOP Single『光の旋律』 M2）

Sense-川田まみ（夏娜 ED3）

serenato-Kalafina（专辑Seventh Heaven）

seventh heaven-Kalafina（空境7杀人考察「后」）

SIROSUNA-Ceui（传勇传ED1 Single『Truth Of My Destiny』 M2）

skip your step-分岛花音（吸血鬼骑士罪EDSingle 『砂のお城』M2）

Sociometry-KOTOKO（夏娜2 ED2）

SOMEONE ELSE（working!! OP）

sprinter-Kalafina（空境5矛盾螺旋）

Still Doll-分岛花音（吸血鬼骑士 ED）

storm-小清水亜美（舞姬 ED）

Storia-Kalafina（单曲Storia）

Thank you for your love-CANDY・ぴよんも（Gal-My FAIR Angel OP）

Triangle-川田まみ（夏娜2 ED1）

Truth Of My Destiny-Ceui（传勇传ED1）

Twinkle Snow-津田朱里（白相簿2ED）

Wahrheit-妖精帝国（专辑metanoia）

あなたがいた森-树海（F/SN ED）

きらめく涙は星に-タイナカサチ（F/SN OP2）

そばにいられるだけで (Main Vocal Hitomi Ver)-Blue Drops（天降1 ED）

ツキアカリのミチシルベ-ステレオポニー（黑之契约者 OP）

ナツかしき记忆-桥本みゆき（Gal-夏に奏でる仆らの诗 OP）

ヒカリ-树海（F/SN IN）

ひぐらしのなく顷に-岛みやえい子（寒蝉 OP）

ふれふれっぽんぽん！月村真由+北条丽华（二之宫君 ED）

メグメル-riya（Clannadg OST）

メグメル -cockool mix 2007ver-eufonius（Clannad OP）

ラベンダーの纯然-片雾烈火（光轮の街、ラベンダーの少女OP）

ワールドイズマイン-ミク（V曲）

わが﨟たし悪の华-ALI PROJECT（鲁鲁修R2 ED2）

绊-kizunairo-色-Lia（FA赤约 OP）

超妻贤母宣言（狂乱家族日记 OP）

绯色の空-川田まみ（夏娜 OP1）

光のフィルメント-高垣彩阳（传勇传 ED2）

光の旋律-Kalafina（ソラノヲト(空之音) OP）

红の静寂-石田曜子（夏娜 ED2）

辉く空の静寂には-Kalafina（黑执事2 ED2）

夏の林檎-Kalafina（Seventh Heaven）

禁じられた游び-ALI PROJECT（蔷薇少女 OP）

君が光に変えて行く-Kalafina（空境2杀人考察「前」）

君との明日-タイナカサチ（F/SN 最终ED）

君の知らない物语-supercell（化物语 ED）

梦みることり-ミク（V曲）

明日の景色-Kalafina（专辑Seventh Heaven）

奈落の花-岛みやえい子（寒蝉解OP）

七転八起☆至上主义！-KOTOKO（旋风管家 OP2）

砂のお城-分岛花音（吸血鬼骑士罪ED）

伤迹-Kalafina（空境3痛觉残留）

圣少女领域-ALI PROJECT（蔷薇少女2 OP）

未来はきっ-ShinyDays 奏音軽音部（Gal-ボクラはピアチェーレ OP）

夏の林檎-Kalafna（专辑 Seventh Heaven）

雪の羽 时の风-茶太（Gal-G弦 ED）

影二つ-riya（Gal-Clannad ED）

悠久の翼07mix-中岛裕美子（EF2 ED）

远い梦-川澄绫子（F/SN Saber角色歌）

==【==】==

th同人曲：

Bad Apple!!-nomico

绯色月下、狂咲の绝-叶月なの

フラグメンツ-narco+capo

YU-Mu-岸田教团The明星ロケッツ

No Life Queen-高桥なな

Magus Light-仲村芽衣子

河心童话-坂上なち

FAntAsIc ImpROmptE-紫咲ほたる

遥か、远く、君へ-ほたる

まるばつ小径-nayuta

It looks like scarlet devil ～ ct style-中恵光城

トラジック・セイント-ゆーな

keep your word-佳织みちる

廃狱ララバイ ～ Subfusc mix-中恵光城

フラッターガール-中恵光城

儚く散り逝く夜桜-星野奏子

ハルノヒ (ボッチ Remix)-Tsubaki

Cloudy Days-あき

虚空の如く、月の如く、梦の如く-nao

In My Heart ～美しく响くセレナーデ～-小田ユウ

Bamboo Dance-shihori

Friskies-朱花

优しい嘘-GUMI

Playback more-小峠 舞

姉想辿-仲村芽衣子

静寂の境界线と幻の诱い-仲村芽衣子

月が満ちる夜に-仲村芽衣子

恋染めの桜 (Album ver.)-アールグレイ

Wonderful Looking For Your World-苍衣

カレイドスコープ-紫月菜乃

ヒメゴトクラブ-めらみぽっぷ／紫月菜乃

Opposite World-Senya

色は匂へど散りぬるを-Senya

加速する恋は谁にも止められない-Senya

零れ桜-Senya

孤独月-Senya

Twinkle snow-アキ

月影プリズム-ヤヤネ

白夜の梦-ヤヤネ

おみなえし-ヤヤネ

I hate you-ヤヤネ

マリサ☆クエスト ～お宝探し大冒険～-アキ

パノラマ蓝色写真-高桥なな

しゃん・だら・りん♪-nayuta

虚空のクロニクル-梨本悠里

Q4: 使用Flutter + V8/JsCore开发小程序引擎（一）

众所周知，小程序是由HTML标签来开发原生组件，那么首先需要将HTML做解析，这里我们将HTML通过node脚本解析成JSON字符串，再用Dart来解析JSON，映射对应的标签到flutter的组件。这里先简单介绍实现的功能以及展示效果，后续再详细介绍。

为了高效解析，直接用flutter的组件名在HTML文件上开发

直接使用flutter的组件

模仿微信小程序的Api，cc对应是微信小程序的wx

以上HTML中的例子

《使用Flutter + V8/JsCore开发小程序引擎（二）》

《使用Flutter + V8/JsCore开发小程序引擎（三）》

Q5: 求flutter的教学视频！！！！

Flutter教程全套 （全网独家)百度网盘免费资源在线学习  

链接:

提取码: m9z8  

Flutter教程全套 （全网独家)

第一套：Flutter 携程17章全-整理好

第五套：Flutter高仿谷歌翻译项目课程

第四套：两小时掌握Flutter移动App开发视频

第三套：flutter入门到精通全套

第七套：Flutter小实战20个

第六套：仿直聘boss的flutter完整教程

第九套：Flutter跨平台开发

第二套：flutter移动电商实战-技术胖

第八套：Flutter基础教程（基础不好的优先看）

24Flutter的打包.mp4

23静态资源和项目图片的处理.mp4

22页面跳转并返回数据_.mp4

21导航的参数传递和接受-2_.mp4

20导航的参数传递和接受-1.mp4

flutter仿qq音乐的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于flutter 仿抖音、flutter仿qq音乐的信息别忘了在本站进行查找喔。