Flutter版仿火幣k線與深度線

flutter_k_chart基本實(shí)現(xiàn)了火幣里面各項(xiàng)指標(biāo)線以及深度線，F(xiàn)lutter目前沒有比較好的開源組件，就自己寫了一個(gè)，聲明式ui自定義起來有點(diǎn)怪怪的，但大致與android差不多，先上效果圖

創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)公司，提供網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)，網(wǎng)頁設(shè)計(jì)，建網(wǎng)站，PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);可快速的進(jìn)行網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展；專業(yè)做搜索引擎喜愛的網(wǎng)站，是專業(yè)的做網(wǎng)站團(tuán)隊(duì)，希望更多企業(yè)前來合作!

使用方式

GitHub地址：

后期會(huì)持續(xù)完善，歡迎指出問題以及star

Flutter 仿京東商品詳情頁嵌套滾動(dòng)組件

這是領(lǐng)苗確認(rèn)記錄詳情頁需要展示給用戶的內(nèi)容，大家可以看到這個(gè)頁面要承載很多的信息，要向下滾動(dòng)一段很長的距離才能展示完，想要實(shí)現(xiàn)的效果是在頁面的頂部有一個(gè)TabBar，用戶可以通過點(diǎn)擊TabBar進(jìn)行錨點(diǎn)(jumpTo到指定位置)，AppBar下的整個(gè)頁面是可以自由滾動(dòng)的，在滾動(dòng)過程中AppBar始終固定在頂部，TabBar在第一次進(jìn)入詳情頁的時(shí)候不顯示，只有在向下滑動(dòng)的時(shí)候會(huì)由透明漸變?yōu)椴煌该鞑⒐潭ㄔ陧敳?，同時(shí)當(dāng)頁面滑動(dòng)到TabBar錨點(diǎn)位置的時(shí)候TabBar會(huì)切換到對(duì)應(yīng)的下標(biāo)，也就是要實(shí)現(xiàn)TabBar和ScrollView聯(lián)動(dòng)的雙向控制，Tabbar的切換可以控制頁面的跳轉(zhuǎn)，頁面的滑動(dòng)又可以反過來控制TabBar的切換，類似與京東、淘寶的商品詳情頁效果。

SliverAppBar基本已經(jīng)達(dá)到了我們想要的效果，但在界面頂部會(huì)有塊空白區(qū)域試了很多方法怎么都去不掉，最后看了SliverAppBar這個(gè)控件的源碼發(fā)現(xiàn)是它自帶的初始高度。

這個(gè)沒法設(shè)置或消除，不可能直接去改源碼，所以后來換了一種實(shí)現(xiàn)思路，舍棄了SliverAppBar這個(gè)控件，以Stack的形式將TabBar置于ScrollView之上也能達(dá)到我們想要的效果，那么問題來了，如何實(shí)現(xiàn)TabBar的滾動(dòng)漸變？很容易想到Opacity透明度控件，通過滾動(dòng)監(jiān)聽來控制TabBar透明度的改變，借助Notificaion可以完美實(shí)現(xiàn)我們的需求。

Notification是Flutter中一個(gè)重要的機(jī)制，在Widget樹中，每一個(gè)節(jié)點(diǎn)都可以分發(fā)通知（Notification）與父(包括祖先)Widget通信，通知會(huì)沿著當(dāng)前節(jié)點(diǎn)（context）向上傳遞，所有父節(jié)點(diǎn)都可以通過NotificationListener來監(jiān)聽自己關(guān)注的通知，F(xiàn)lutter中稱這種通知由子向父的傳遞為“通知冒泡”（Notification Bubbling）。

　 Flutter中很多地方使用了通知，如可滾動(dòng)(Scrollable) Widget中滑動(dòng)時(shí)就會(huì)分發(fā)ScrollNotification，而Scrollbar正是通過監(jiān)聽ScrollNotification來確定滾動(dòng)條位置的。除了ScrollNotification，F(xiàn)lutter中還有SizeChangedLayoutNotification、KeepAliveNotification 、LayoutChangedNotification等。

通過NotificationListener監(jiān)聽滾動(dòng)事件和通過ScrollController有兩個(gè)主要的不同：

通過改造后，目前這個(gè)組件的原型已經(jīng)實(shí)現(xiàn)并且可以滿足我們的需求，最后就是對(duì)該demo進(jìn)行完善使其能夠完美接入我們的業(yè)務(wù)，做到技術(shù)賦能業(yè)務(wù)。

在一個(gè)頁面滾動(dòng)區(qū)域不是很長的情況下不建議使用，只有當(dāng)頁面足夠長的情況下使用這個(gè)組件效果會(huì)比較好，因?yàn)槿绻粋€(gè)頁面過短，點(diǎn)擊TabBar最后一欄進(jìn)行錨點(diǎn)時(shí)，頁面最后一個(gè)子模塊內(nèi)容無法置頂，只會(huì)將頁面最后的內(nèi)容推到屏幕范圍內(nèi)，并且由于TabBar監(jiān)聽到的是滾動(dòng)的位置，會(huì)導(dǎo)致TabBar無法切換到對(duì)應(yīng)的下標(biāo)，看上去會(huì)像個(gè)bug，其實(shí)是因?yàn)榈撞恳呀?jīng)沒有內(nèi)容了。

這個(gè)組件本身并沒有太大的技術(shù)難度，但是有一些比較細(xì)節(jié)的小邏輯得處理好，并且從中衍生出來的很多瑣碎的小的知識(shí)點(diǎn)都可以進(jìn)行拓展。 在組件開發(fā)的過程中遇到問題時(shí)不局限于控件本身的設(shè)計(jì)模式，轉(zhuǎn)變開發(fā)思維去找尋一些比較新穎的解決方案可能會(huì)有意外的收獲。同時(shí)技術(shù)不能脫離于業(yè)務(wù)，技術(shù)賦能業(yè)務(wù)才能創(chuàng)造價(jià)值。

Flutter 仿企業(yè)微信多選-listview可見item位置

有一個(gè)需求，是仿企業(yè)照微信的多選（效果大家自己去看）。我想到了兩種方案：

思路：我們直接通過listview.builder是沒辦法自定義SliverChildBuilderDelegate，我們可以通過listview.custom來自定義SliverChildBuilderDelegate，通過自定義我們可以重寫didFinishLayout方法，拿到里面緩存的第一個(gè)item和最后一個(gè)item?？梢奿tem的跟緩存item是差5個(gè)的，可以間接算出來，后面發(fā)現(xiàn)其實(shí)不太行，上下滑動(dòng)之后會(huì)顯示之前滑動(dòng)時(shí)候的可見位置。 正解是：這個(gè)里面還有個(gè)estimateMaxScrollOffset方法，正常來說通過它可以獲取到可見的第一個(gè)和最后一個(gè)item位置。但是我一開始使用這個(gè)方法，不會(huì)被回調(diào)，后面不知道修改了什么，就會(huì)回調(diào)，然后這個(gè)位置是準(zhǔn)確的。

看下listview.builder的源碼

我們可以看到childrenDelegate是直接定義好了的。

在看看listview.custom 的源碼

childrenDelegate這個(gè)是一個(gè)必傳參數(shù)。

Flutter 仿抖音效果 (一) 全屏點(diǎn)愛星

項(xiàng)目地址: 持續(xù)效果更新

flutter 有個(gè)onTapUp 事件,字面意思就是 點(diǎn)擊抬起的,會(huì)返回 TapUpDetails details ,通過 localPosition 屬性就能獲取到x,y坐標(biāo)

計(jì)算double 并不復(fù)雜,每次點(diǎn)擊的時(shí)候記錄下當(dāng)前的事件戳,只要兩個(gè)點(diǎn)擊的時(shí)間戳和坐標(biāo)距離小于自己設(shè)定的閾值,就可以視為雙擊事件

實(shí)現(xiàn)雙擊

我們使用OverlayEntry 控件,控件詳細(xì)介紹

效果一共有 縮小 → 上移 → 放大 → 消失

第一組動(dòng)畫(縮小 上移) → 第二組動(dòng)畫(放大 消失)

flutter 動(dòng)畫需要兩個(gè)類

AnimationController 負(fù)責(zé)管理動(dòng)畫

Animation 負(fù)責(zé)具體值操作

然后通過 Transform.scale 函數(shù)的,對(duì)scale值進(jìn)行改變

補(bǔ)全第一組動(dòng)畫

現(xiàn)實(shí)

項(xiàng)目地址: 持續(xù)效果更新

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

Flutter 仿抖音效果 (一) 全屏點(diǎn)愛星

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

[Flutter 仿抖音效果 (三) 視頻播放列表] ( )

項(xiàng)目地址: 持續(xù)效果更新

1.基本的布局是簡(jiǎn)單的,外層通過Stack作為根

2.左邊點(diǎn)贊的控件組通過Align進(jìn)行統(tǒng)一布局

3.頂部控件組通過Positioned進(jìn)行布局,設(shè)置頂部距離,其實(shí)也可以用align,我們多使用幾種來習(xí)慣flutter的布局

4.底部同樣使用Positioned,設(shè)置底部距離

5.子頁面的左右滑動(dòng)使用PageView,一開始我們要從推薦開始左滑到關(guān)注,可以使用reverse屬性,不需要更多額外的操作

1.pageController監(jiān)聽

刷新頂部的下劃線時(shí),我們一樣使用StreamController刷新,這樣效率比setstate高很多

2.歌曲名走馬燈效果

這個(gè)效果看起來挺麻煩的其實(shí)實(shí)現(xiàn)起來超級(jí)的簡(jiǎn)單用最普通的ListView就能快速的實(shí)現(xiàn)

首頁listview里面套入的是最簡(jiǎn)單的container+text

listview添加一個(gè)ScrollController做為滑動(dòng)的控制

使用一個(gè)定時(shí)器,把listview滑到最大的位置之后,在滑回去

先通過scroController.position.maxScrollExtent獲取最大位置,

然后通過scroController.animateTo進(jìn)行滑動(dòng),因?yàn)槲以O(shè)置一次循環(huán)的時(shí)間是3000毫秒,所以滑過去和滑回來的時(shí)間各占一般 new Duration(milliseconds: (time * 0.5).toInt()),還有就是歌名沒有大于最大寬度時(shí)候其實(shí)我們不需要進(jìn)行滑動(dòng),所以判斷maxScrollExtent是否大于0來確定是否進(jìn)行滑動(dòng)動(dòng)畫

Flutter #04 一款仿微信的 Flutter 版 app

學(xué)習(xí) Flutter 也有一段時(shí)間了，做一款 Flutter 版的微信練練所學(xué)的知識(shí)。

3.1 BLOC 模式 + Flutter + Test

STREAMS or REACTIVE approach. In general terms, data will be flowing from the BLOC to the UI or from UI to the BLOC in the form of streams.

-- BLOC 模式的核心

3.2 項(xiàng)目結(jié)構(gòu)

3.3 消息模塊設(shè)計(jì)

源碼地址： wechat

路遙知馬力，一切未完待續(xù)～