Flutter 異步加載數(shù)據(jù)，UI卡頓

記錄下坑

創(chuàng)新互聯(lián)服務(wù)項目包括新野網(wǎng)站建設(shè)、新野網(wǎng)站制作、新野網(wǎng)頁制作以及新野網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，新野網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到新野省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

一開始我就使用Future、async、await去做異步操作，以為這樣能解決問題，經(jīng)過一天研究發(fā)現(xiàn)他們都還在同一個線程里面，也就是UI線程，導(dǎo)致卡頓，這明顯不是我們想要的異步加載數(shù)據(jù)。

Dart真正的線程叫隔離（Isolate）

難受香菇

有點心累，記錄下吧。

flutter 藍牙ble(blue tooth),同時連接多臺/多個設(shè)備

于是就有了寫作本文的動力，--------解決同時連接多臺藍牙設(shè)備!!!

flutter_blue 適合于單臺的藍牙設(shè)備，使用起來簡單

flutter_reactive_ble 適合于單臺的藍牙設(shè)備，多臺藍牙設(shè)備也可以用

flutter_ble_lib 適合于單臺的藍牙設(shè)備，多臺藍牙設(shè)備也可以用，可以在模擬器上進行調(diào)試藍牙

感覺后2個第三方庫都可以使用，本人先入為主使用了flutter_reactive_ble，所以本文以flutter_reactive_ble為基礎(chǔ)進行介紹

先聲明4個全局變量，后面會用到

開始掃描

如果掃描過程，不使用過濾條件，withServices這個參數(shù)可以給個空數(shù)組

停止掃描如下

連接設(shè)備

斷開設(shè)備,

每連接成功一個設(shè)備后，就會產(chǎn)生一個_connectionStreamSubscription，對應(yīng)設(shè)備的斷開，就用對應(yīng)的StreamSubscription去斷開， 可以用一個HashMap，去記錄 連接成功的設(shè)備 與 StreamSubscription 的對應(yīng)關(guān)系

去掃描服務(wù)，并過濾服務(wù)，掃描結(jié)果服務(wù)里面是包含有特征的數(shù)組,如： serviceId:[fff0,fff1,fff2,fff3,...]

去監(jiān)聽上報來的數(shù)據(jù),參數(shù)來自前面掃描到的結(jié)果serviceId--服務(wù)ID, characteristicId--特征ID，deviceId--設(shè)備ID

后面就是各位看官根據(jù)自己的需求去做邏輯處理啦。

對設(shè)備設(shè)置命令，發(fā)送請求(寫操作),list為整形數(shù)據(jù)，要寫的數(shù)據(jù)

讀取設(shè)備的信息（讀操作）

flutter 多臺藍牙設(shè)備同時連接的分享就到這里嘍，小伴們,覺得有點用的話，或者已經(jīng)看到這里面來的請點個贊吧~~ 后續(xù)分享更多有關(guān)flutter的文章。如果有疑問的話，請在下方留言~

過一段時間后,我在項目把這個藍牙庫用起來了,基本能滿足日常需求.效果如下:

關(guān)于flutter NestedScrollView導(dǎo)致其body的tabbarview的多個list同步滾動的解決方案

講道理我起的好長的名字啊，不過文如上題，搜索到這里的兄弟應(yīng)該都知道我說的是啥情況，正好

～～

我這個方案可能有點笨拙TT，不過自測有效，有其它想法的老哥希望可以幫忙指點一下～

下面進入正題

點進源碼里面看，可以發(fā)現(xiàn)他直接繼承了StatelessWidget，那我們就直接看看build方法

可以看到，這里直接返回一個scrollable或者一個子節(jié)點是scrollable的InheritedWidget

scrollable是一個StatefulWidget，那我們就看看它的state

首先scrollable持有一個scrollposition對象，是通過其scrollcontroller構(gòu)建的

在其state的setCanDrag方法中，對其拖動設(shè)置了一系列的監(jiān)聽

這里就可以看出來，當拖動觸發(fā)時，就會通過當前scrollable的position生成一個Drag/Hold對象，并調(diào)用相應(yīng)的方法 這個position有幾個子類，我們先隨便看一個實現(xiàn)

可以看到生成了一個ScrollDragController對象，當手勢拖動而調(diào)用這個對象的update方法時

可以看到直接調(diào)用其委托對象的applyUserOffset方法進行偏移，而這個委托對象根據(jù)剛才的drag方法可以得知正是我們scrollable中的position

最后，由position通知其scrollcontext，也就是之前的scrollable進行滑動

具體的滑動流程這里就不細說了，我們只是要知道這個事件是怎么傳遞的就好了，有興趣的老哥可以自行分析

NestedScrollView是一個statefulwidget，那我們就先看看它的build方法

先忽略其他奇奇怪怪的方法，我們發(fā)現(xiàn)在我們body的外面，包裹了一層PrimaryScrollController，同時它還持有innerController，這個innerController暫時先不管它是啥

還記不記得在最開始ScrollView的build方法中，生成Scrollable的時候，我們已經(jīng)見過這個PrimaryScrollController了，再回顧一下

再看看PrimaryScrollController.of(context)

可以看到，在生成scrollable的時候，在primary = true的情況下是會向上查找的，看看有沒有PrimaryScrollController，如果有的話，scrollable使用的controller實際就是nestedscrollview中的innerController了

而之前看過了，scrollable中的position就是scrollcontroller來生成的，那么在這種情況下：

實際上是生成了_NestedScrollPosition并返回給了body中的scrollable

構(gòu)造方法中有一個參數(shù)coordinator 暫時先不管

好了，下面我們在回頭看剛才NestedScrollView的build方法，實際上是生成了一個_NestedScrollViewCustomScrollView，繼承自大名鼎鼎的CustomScrollView，它當然也是scrollview啦，而我們傳給它的controller也是一個_NestedScrollController，不過叫做_outerController，和body中的不是同一個罷了，那么自然這個父scrollview的position也是_NestedScrollPosition。

下面我們按照之前的邏輯，當拖動開始時，就會調(diào)用position.drag方法

可以看到，實際上吧方法交給了我們之前多次見到的coordinator來完成，那我們就簡單看一下吧

這里可以看到，他把返回的ScrollDragController的委托者設(shè)成了自己

那么自然在拖動的時候，調(diào)用的就是coordinator的applyUseroffset方法了 我們分析一下

可以看到，在需要子列表滾動時，是對innerPositions中的所有position調(diào)用滑動方法的

而這innerPositions中的position是怎么來的呢？跟蹤一下可以發(fā)現(xiàn)是在調(diào)用NestedScrollController的attach時添加進來的，如下

因為之前我們看到過，子scrollable中的controller就是這個NestedScrollController，所以在updateopsition時會把舊的detach調(diào)，把新生成的position attach進來

另外，在dispose中也會detach

由此我們就知道啦，因為開啟了緩存后就不會調(diào)用劃出屏幕的頁面的dispose，自然所有子scrollable的position都存在nestedScrollController里面了，當發(fā)生滑動時，遍歷調(diào)用positions數(shù)組，就導(dǎo)致屏幕外的列表也跟著滑動了～

既然開啟了緩存，手動dispose肯定是沒啥意義的，實際上我們只要在頁面切換過后把未顯示的position 給detach掉就好了。

然鵝，因為flutter不支持反射，子布局傳遞的position我們拿不到，nestedScrollController我們也不能直接拿到=。=

不過有一個對象我們之前見到過，scrollable就是通過他獲取controller的，而position則是傳給了獲取到的controller 就是PrimaryScrollController了，所以我打算在中間第三者插足，對傳遞Position的PrimaryScrollController進行Hook

在使用的時候把子列表添加進去，并設(shè)置對應(yīng)的GlobalKey。

然后監(jiān)聽Tab切換

以上是我的方案，有問題的話還希望老哥幫忙指正，也希望有其他思路的老哥指點一下～～

上一下Github項目地址 用Flutter寫的WanAndroid 其中用到了這個方案

= =

3

Flutter Boost 接入實踐（iOS 篇）

本文將簡單梳理一下 iOS 工程接入的 Flutter Boost 的流程，以作為前文的補充。

flutter_application_path = '../flutter_module'

load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

target 'FlutterHybridiOS' do

install_all_flutter_pods(flutter_application_path)

end

接著在工程根目錄下運行 pod install ，即可集成上 Flutter Module?？吹轿覀兊?Pods 中多了以下幾個模塊，即說明集成成功。

接著在工程根目錄下運行 pod install ，即可集成上 Flutter Module。看到我們的 Pods 中多了以下幾個模塊，即說明集成成功。

這一塊直接參照 Flutter Boost 官方提供的 example 就好了：

PlatformRouterImp.h：

PlatformRouterImp.m：

可以看到，F(xiàn)lutter Boost 支持常規(guī) push，也支持打開模態(tài)彈窗，也支持手動 pop。

AppDelegate.h：

AppDelegate.m：

同樣的，這里可在 Native 端用兩種不同的方式去打開我們在 Flutter Module 中注冊好的路由名。

至此，我們成功在 iOS 工程中接入了 Flutter Boost，那就開啟我們的混編之旅吧~

小程序開發(fā)和App開發(fā)有什么區(qū)別，哪個好學(xué)一些？

小程序有很多種，微信小程序、釘釘小程序 等等。而App也分分了好幾個陣營。

我們現(xiàn)在說的小程序一般都是基于H5的，或者說語法非常的類似，配合js和css樣式達到相應(yīng)的顯示效果。開發(fā)時涉及的技術(shù)棧主要是h5、css、js 相關(guān)的。

App 來說也分原生App 和 H5 App 還有就是混合開發(fā)的。原生App來說體驗好，Android app主要的開發(fā)語言是java和Kotlin，iOS 的app開發(fā)語言是Objective-C 和 swift。原生App需要了解平臺語言和相關(guān)的UI框架。

混合App 也有很多框架類似ionic 等等，這部分需要了解相關(guān)的js，例如Angularjs reactjs vue.js 等等，體系也很多。

谷歌的flutter 號稱跨平臺開發(fā)，使用的是dart語言。這也是近幾年推出的。

總的來說難易程度上小程序應(yīng)該會更容易一些吧。當然這也是因人而異。