Flutter初學 —— 常用控件使用

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

創(chuàng)新互聯(lián)長期為上1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為軹城企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)，軹城網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

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

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

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

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

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

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

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

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

配合多 child 使用，會填充剩余的空間

Image 功能強大，使用不同的方法可以加載不同來源的圖片

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

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

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

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

GridView 沒有 build ， children 表示所有的子 view

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

Flutter開發(fā)Windows 和 Linux 桌面應(yīng)用，設(shè)置默認窗口大小

在用Flutter 開發(fā)windows和linux跨平臺應(yīng)用的時候，如何設(shè)置默認窗口大小呢？

flutter沒有提供統(tǒng)一的api，所以默認的窗口大小是1280x720.

如果我們想要改成自己想要的默認窗口大小呢？比如我想要設(shè)置為：512像素寬, 926像素高

我該怎么做呢？

請看我的教程。

首先你確保你已經(jīng)為項目創(chuàng)建了windows和Linux的支持。

目前Flutter 為windows和linux提供的是托管式運行的主程序，可以理解為一個殼子，這個殼子就是用cpp寫的，平臺原生的window 窗口。

所以我們可以打開相應(yīng)的cpp源代碼，設(shè)置默認窗口大小。

這里先講windows和linux，因為mac 平臺跟windows和linux不一樣，后面單獨給大家講解。

我們看圖。

源代碼路徑位于：

windows/runner/main.cpp

找到

第一個參數(shù)是寬度，單位是px，第二個是高度，單位是px

修改后重新運行生效。

源代碼路徑位于：

linux/my_application.cc

找到

方法的第一個數(shù)字是寬度，第二個是高度，單位也是px像素。

修改后，重新運行生效。

現(xiàn)在，你已經(jīng)學會了如何設(shè)置初始窗口大小了。

Flutter MediaQuery獲取屏幕信息以及屏幕適配

Flutter中控件的高寬和字體大小時，使用的是邏輯像素，并非是實際的物理像素。

flutter中的屏幕適配

假設(shè)設(shè)計圖的大小為1080 1920，上面一個圖片的高度為 80 90，則它在設(shè)備上的高寬為

對于android手機，一般以寬度為基準計算UI的高寬，因為android手機的寬度一般就是750，1080等幾個尺寸，但是高的尺寸就有很多。

推薦一個別人封裝好的一個用于屏幕適配的庫

Flutter屏幕適配方案插件-完美解決屏幕適配