Android原生和Flutter使用過(guò)程的差異對(duì)比（二）

1、常用布局的對(duì)比

創(chuàng)新互聯(lián)堅(jiān)信：善待客戶，將會(huì)成為終身客戶。我們能堅(jiān)持多年，是因?yàn)槲覀円恢笨芍档眯刨?。我們從不忽悠初訪客戶，我們用心做好本職工作，不忘初心，方得始終。十載網(wǎng)站建設(shè)經(jīng)驗(yàn)創(chuàng)新互聯(lián)是成都老牌網(wǎng)站營(yíng)銷服務(wù)商,為您提供網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)、H5開(kāi)發(fā)、網(wǎng)站制作、成都品牌網(wǎng)站建設(shè)、微信小程序定制開(kāi)發(fā)服務(wù),給眾多知名企業(yè)提供過(guò)好品質(zhì)的建站服務(wù)。

使用下來(lái)其他組件大致還算方便，但是相對(duì)布局而言使用便利程度上Android原生完勝，ConstraintLayout內(nèi)部的所有子View可以設(shè)置互相之間的位置依賴關(guān)系。

而Flutter的Stack組件內(nèi)部的Children只能通過(guò)外層包裹 Align后 固定位置，比如 Alignment.topLeft、Alignment.bottomRight 等。遇到復(fù)雜的堆疊布局需要通過(guò)外層包裹 Positioned 組件后設(shè)置固定的 top 和 left 距離以達(dá)到效果，內(nèi)部子組件之間無(wú)法設(shè)置位置關(guān)聯(lián)關(guān)系。

2、一些常用屬性設(shè)置上的差異：

Margin外邊距

Android：直接在布局文件對(duì)View設(shè)置android:layout_marginStart、android:layout_marginTop

Flutter：需嵌套 Container 組件并在內(nèi)部設(shè)置具體的 margin 值

Padding內(nèi)邊距

Android：TextView、ImageView、各種Layout都可以直接在屬性上設(shè)置android:paddingStart

Flutter：需嵌套 Padding 組件并在內(nèi)部設(shè)置具體的值

組件的可見(jiàn)性

Android：每個(gè)view都可以通過(guò)setVisibility來(lái)設(shè)置可見(jiàn)、隱藏或者隱藏但占位

Flutter：沒(méi)有單獨(dú)設(shè)置組件是否顯示的api，只能通過(guò) bool 值控制是否添加該組件

事件監(jiān)聽(tīng)

Android：常規(guī)的setOnClickListener和setOnLongClickListener設(shè)置單擊和長(zhǎng)按事件

Flutter：在需要添加事件監(jiān)聽(tīng)的組件外層嵌套 InkWell 或 GestureDetector 并設(shè)置 onTap 等

3、生命周期

Android：

Activity和Fragment各自有完整的生命周期鏈路onCreate、onStart、onResume、onPause、onDestroy等

Flutter：

萬(wàn)物皆組件，組件繼承 WidgetsBindingObserver 并重寫 didChangeAppLifecycleState 函數(shù)進(jìn)行監(jiān)聽(tīng)

退回桌面依次執(zhí)行inactive 》= paused，此時(shí)界面不可見(jiàn)用戶不可操作，從桌面重新進(jìn)入app執(zhí)行resumed，狀態(tài)較少如需在某些條件下觸發(fā)特定操作可能要找別的方案，比如發(fā)通知之類的

Flutter初學(xué) —— 常用控件使用

在編寫幾個(gè) Flutter 項(xiàng)目后，發(fā)現(xiàn) Flutter 的強(qiáng)大之處在于業(yè)務(wù)中所有用到的控件以及場(chǎng)景都有對(duì)應(yīng)的處理方案；而 Dart 語(yǔ)言也與 Java 、 Kotlin 類似，所以對(duì) Android 開(kāi)發(fā)者來(lái)說(shuō)門檻非常低；特意記錄一下常用的控件及其使用：

StatelessWidget 不需要額外的創(chuàng)建 State

StatefulWidget 創(chuàng)建 State 類，并可以在其中保存一些狀態(tài)

only 可以單獨(dú)設(shè)置每個(gè)方向的內(nèi)邊距

類似于 LinearLayout 中的 orientation 設(shè)置為 vertical ， mainAxisAlignment 表示豎向的一個(gè)對(duì)齊方式， crossAxisAlignment 表示橫向的對(duì)齊方式

與 Column 相反，主軸是橫向，對(duì)齊方式類似， crossAxisAlignment 表示豎向的對(duì)齊方式

類似 SizedBox ，一個(gè)容器，但是主要功能是有一個(gè) decoration —— 裝飾器，作用是繪制背景，或者使用 item 中的陰影

棧，先入后出，類似于 Android 上的 FrameLayout

通常配合 Stack 使用，固定顯示在某一個(gè)位置

配合多 child 使用，會(huì)填充剩余的空間

Image 功能強(qiáng)大，使用不同的方法可以加載不同來(lái)源的圖片

看到這些方法，突然覺(jué)得 Flutter 太香了，而且 Image 可以配置 clip 等裁剪出不同形狀的圖片，無(wú)論是圓形還是五角星都不在話下，然而 Android 要實(shí)現(xiàn)不規(guī)則的形狀，可是要下不少功夫的。

名字和 Android 的一模一樣，但是用法卻比 Android 的簡(jiǎn)單很多：

主要就是 itemCount 與 itemBuilder ,其余就是配置樣式， itemBuilder 需要返回一個(gè) widget ，當(dāng)然了，每個(gè) ListView 都有其對(duì)應(yīng)的 item ，在里面的方法中編寫 widget 即可

與 ListView 類似，但是需要有一個(gè) delegate 類，作用是設(shè)置有多少列，每一列之間的間距是多少

GridView 沒(méi)有 build ， children 表示所有的子 view

最常用的控件之一，有非常多的樣式， Flutter 中通常是使用裝飾器來(lái)處理控件的，如背景使用 BoxDecoration , TextFiled 使用 InputDecoration ; 使用如下

Flutter初探--常用依賴包

國(guó)外地址：

國(guó)內(nèi)鏡像：

以 flutter_screenutil 為例

路由框架 annotation_route

狀態(tài)管理 provider

UI適配 flutter_screenutil

刷新控件 flutter_easyrefresh

網(wǎng)絡(luò)請(qǐng)求 dio

toast控件 fluttertoast

圖表庫(kù) charts_flutter

網(wǎng)絡(luò)監(jiān)聽(tīng) connectivity

事件總線 event_bus

日歷組件 table_calendar

官方webview webview_flutter

第三方webview flutter_webview_plugin

該篇文章為常用依賴包總結(jié)，用來(lái)記錄所需要的常用依賴包，后續(xù)會(huì)不斷擴(kuò)充內(nèi)容~

【Dart/Flutter】一些常用的基本數(shù)據(jù)格式轉(zhuǎn)換

十六進(jìn)制

有時(shí)，從16進(jìn)制轉(zhuǎn)換為字符串后，因?yàn)?6進(jìn)制數(shù)據(jù)源的原因，前后可能會(huì)有空格以及一些奇怪的字符

此時(shí)需要去掉，可以通過(guò)以下這個(gè)方法（參考源：JDK中String的trim方法實(shí)現(xiàn)）

十進(jìn)制

乘方/次方/次冪

UInt8List轉(zhuǎn)十六進(jìn)制，具體細(xì)則看注釋

Flutter常用正則

1.忽略特殊字符

2.只能輸入數(shù)字和小寫字母

3.只能輸入數(shù)字和字母

4.忽略表情

4.只能輸入數(shù)字

5.長(zhǎng)度限制(限制6位)

6.限制單行

7.輸入價(jià)錢

8.輸入最多兩位小數(shù)的價(jià)錢

正則校驗(yàn)篇

flutter 頁(yè)面的生命周期（轉(zhuǎn)）

轉(zhuǎn)自

在 Flutter 中，有兩類常用的 Widget：

在開(kāi)發(fā)過(guò)程中，我們經(jīng)常需要繼承它們兩來(lái)實(shí)現(xiàn)自己的 Widget。

一個(gè) StatelessWidget 是不能被改變的，比如： Icon 、 Text 等。

如果你的控件一旦顯示，就不需要再做任何的變更，那么你應(yīng)該使用 StatelessWidget 。

實(shí)現(xiàn)一個(gè)自己的 StatelessWidget 很簡(jiǎn)單。

當(dāng)你看到下面這個(gè)例子?時(shí)，你就知道它有多簡(jiǎn)單了。

看，只要在 build() 中返回你的視圖就可以了。

一個(gè) StatefulWidget 是有狀態(tài)的，可變的。

它可以改變自己的外觀，以響應(yīng)用戶的操作或者數(shù)據(jù)的變化。

比如： CheckBox 、 Switch ..

我們之所以能夠改變一個(gè) StatefulWidget ，是因?yàn)樗幸粋€(gè)設(shè)置狀態(tài)的函數(shù)：

調(diào)用這個(gè)函數(shù)后，就會(huì)觸發(fā) StatefulWidget 的視圖樹(shù)重建。

因此，當(dāng)我們需要一個(gè)可交互的，即能根據(jù)用戶操作或數(shù)據(jù)變化而改變視圖的 Widget 時(shí)，那就得用上 StatelessWidget 了。

現(xiàn)在，來(lái)創(chuàng)建一個(gè)自定義的 StatefulWidget：

從上面的例子中可以看到， StatefulWidget 會(huì)要求提供一個(gè)含有視圖樹(shù)的 State 。

既然 State 能夠控制一個(gè)視圖的狀態(tài)，那它肯定會(huì)有一系列的生命周期。

上圖就是 State 的生命周期圖。