flutter如何自定義一個(gè)controller

最近在寫(xiě)一個(gè)flutter-ui庫(kù)，類(lèi)似于antd一樣的ui庫(kù)，google了很久，都沒(méi)有發(fā)現(xiàn)一個(gè)類(lèi)似antd這種國(guó)人喜歡用的ui庫(kù)，大部分都是國(guó)外的那種material ui,因?yàn)楣径鄠€(gè)flutter項(xiàng)目都需要用，每次都是寫(xiě)好幾遍，而且還很難維護(hù)所以才有了這個(gè)打算，第一個(gè)要寫(xiě)的ui組件就是日歷組件，日歷的ui以及數(shù)據(jù)，都已經(jīng)寫(xiě)完了，目前正好需要給日歷寫(xiě)控制器，所以才有了這篇文章

專(zhuān)業(yè)領(lǐng)域包括做網(wǎng)站、網(wǎng)站制作、商城網(wǎng)站制作、微信營(yíng)銷(xiāo)、系統(tǒng)平臺(tái)開(kāi)發(fā)， 與其他網(wǎng)站設(shè)計(jì)及系統(tǒng)開(kāi)發(fā)公司不同，創(chuàng)新互聯(lián)的整合解決方案結(jié)合了幫做網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗(yàn)和互聯(lián)網(wǎng)整合營(yíng)銷(xiāo)的理念，并將策略和執(zhí)行緊密結(jié)合，為客戶提供全網(wǎng)互聯(lián)網(wǎng)整合方案。

在無(wú)狀態(tài)組件當(dāng)中，組件的ui由傳入它的參數(shù)決定的，組件本身的不需要管理狀態(tài)。而有狀態(tài)組件會(huì)有多種狀態(tài)，而它的狀態(tài)是可以通過(guò)外部控制器來(lái)控制的。比如TextField，創(chuàng)建一個(gè)controller可以給TextField賦值初始值，也可以通過(guò)controller來(lái)獲取到變化之后的value值，而這個(gè)控制器就是controller?？梢杂脕?lái)控制一個(gè)有狀態(tài)組件的行為以及狀態(tài)的一個(gè)類(lèi)

為什么要用controller呢，起初我也沒(méi)想明白為什么要用，因?yàn)閭鲄?shù)也可以解決類(lèi)似的問(wèn)題啊，就拿TextField來(lái)說(shuō)，

但后來(lái)我發(fā)現(xiàn)，很多組件內(nèi)部的行為是沒(méi)辦法通過(guò)傳參數(shù)來(lái)控制的，尤其是在特殊的組件生命周期中，沒(méi)辦法實(shí)現(xiàn)，而通過(guò)controller，可以很好的解決這個(gè)問(wèn)題，我自己感覺(jué)，controller的用處就是提供給外部操作當(dāng)前組件的能力，包括組件的各種狀態(tài)，以及組件的各種行為，這里舉個(gè)栗子????

綜上，個(gè)人理解controller的作用就是暴露組件內(nèi)部的行為，屬性給父元素，使父元素可以很方便使用子元素提供的參數(shù)，而不需要去實(shí)現(xiàn)監(jiān)聽(tīng)事件來(lái)獲取

回到正題，那么如何實(shí)現(xiàn)一個(gè)自己的controller呢，對(duì)我而言，不會(huì)就抄，抄誰(shuí)的呢，當(dāng)然是超官方的！讀官方的源碼，看它如何實(shí)現(xiàn)，然后我們加以模仿，不就是自己的了。竊書(shū)不能算偷……竊書(shū)！……讀書(shū)人的事，能算偷么？

這里借鑒了ScrollController的源碼，首先分析下源碼，以下是ScrollerController的源碼，我把看不懂的英文注釋刪掉了...本菜????看不懂就刪

看了看好像也沒(méi)多少東西，注意當(dāng)前類(lèi)的定義

是繼承了ChangeNotifier類(lèi)，看著這個(gè)類(lèi)頓時(shí)覺(jué)得好眼熟有沒(méi)有，對(duì)了，不就是我們平時(shí)寫(xiě)provider用的那個(gè)東東嘛，查閱了官方文檔，具體是這么解釋的

用我這渣渣英語(yǔ)翻譯大概的意思就是，一個(gè)類(lèi)，它可以被繼承，它可以被混合并且它提供了使用VoidCallback進(jìn)行通知的 notification Api

盲猜和provider用法差不多，都是觀察者模式模式，父組件可以訂閱該controller的更改，當(dāng)該controller通知其他監(jiān)聽(tīng)器的時(shí)候，監(jiān)聽(tīng)器的回調(diào)函數(shù)將被執(zhí)行，上面ScrollController中的attach中正好也使用了notification方法來(lái)通知監(jiān)聽(tīng)者，具體滾動(dòng)執(zhí)行的過(guò)程沒(méi)有看到，但是大致了解了controller的工作原理

好了，知道原理了，開(kāi)搞

首先得思考，這個(gè)controller會(huì)提供什么，按照我當(dāng)前給日歷組件的設(shè)計(jì)，目前會(huì)給外部提供當(dāng)前日歷所有的行為事件以及最終的值

目前我寫(xiě)的controller很簡(jiǎn)單，只需要給外部父容器提供上一個(gè)月，下一個(gè)月的方法可以使用就可以，所以我的控制器很簡(jiǎn)單，只有兩個(gè)方法，并且方法執(zhí)行完成之后進(jìn)行消息通知，通知到各個(gè)訂閱者，也就是這里的日期組件 在日期組件的 initState方法中，對(duì)controller進(jìn)行監(jiān)聽(tīng)，從而改變ui

最外層父容器是這樣的，當(dāng)前demo用setState臨時(shí)刷新ui

看起來(lái)還不錯(cuò)，還有一些ui上的交互需要后續(xù)去調(diào)整

未完待續(xù)...

最近入了flutter的坑，就想著做一行愛(ài)一行，也不能把自己的頭銜寫(xiě)死了就只做前端，只寫(xiě)頁(yè)面。flutter寫(xiě)起來(lái)也蠻舒服的，加油，打工人！

Flutter中 DateFormat的使用方式

首先，需要引用多語(yǔ)言庫(kù)

按如上文檔部署多語(yǔ)言后，就可以直接使用了

在日常開(kāi)發(fā)中，總是需要將字符串轉(zhuǎn)化成指定格式的日期，可以使用DateFormat。

可以顯示多語(yǔ)言

更多格式輸出

Flutter獲取當(dāng)前所在的時(shí)區(qū)

使用 DateTime 的 timeZoneName 直接獲取時(shí)區(qū)

得到的結(jié)果是當(dāng)前的時(shí)區(qū)的簡(jiǎn)寫(xiě)，結(jié)果太寬泛不是我們想要的結(jié)果

其使用簡(jiǎn)潔，只需要使用下面的方法就可以獲取到當(dāng)前時(shí)區(qū)

打印的結(jié)果：

flutter_native_timezone 有個(gè)缺點(diǎn)是，這個(gè)時(shí)區(qū)的結(jié)果只有英文結(jié)果，如果是要中文結(jié)果的小伙伴，需要自己手動(dòng)轉(zhuǎn)換為中文了。

flutter檢測(cè)當(dāng)前剩余的時(shí)間

我想你想要的是：target.difference(DateTime.now()).toString().split('.')[0])

使用.split('.')[0]持續(xù)時(shí)間來(lái)去掉秒的分?jǐn)?shù)。

其中target是DateTime對(duì)象。flutter計(jì)算給定小時(shí)的剩余時(shí)間,以秒為單位更新flutter，因此,時(shí)間以h:m:s為單位,例如,如果給定的時(shí)間是(6:27pm),我希望得到此結(jié)果（剩余時(shí)間02:21:02）。

打印結(jié)果:Text('Timeuntil${DateFormat.Hms().format(target)}');Text(target.difference(DateTime.now()).toString().split('.')[0])

Flutter 獲取App的版本號(hào)等信息

通過(guò)使用插件 package_info 可以獲取到當(dāng)前APP的包名，版本名，版本號(hào)等信息。

修改+號(hào)后的構(gòu)建號(hào)，+號(hào)前的版本號(hào)。

在android和ios原生(ios必須打包)中能發(fā)現(xiàn)version變化

要使用這個(gè)插件，首先在工程的pubspec.yaml文件中加入對(duì)這個(gè)插件的依賴：