Flutter初學 —— 常用控件使用

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

網站建設哪家好，找創新互聯公司！專注于網頁設計、網站建設、微信開發、微信平臺小程序開發、集團企業網站建設等服務項目。為回饋新老客戶創新互聯還提供了新羅免費建站歡迎大家使用！

StatelessWidget 不需要額外的創建 State

StatefulWidget 創建 State 類，并可以在其中保存一些狀態

only 可以單獨設置每個方向的內邊距

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

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

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

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

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

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

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

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

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

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

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

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

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

詳解flutter中本地資源圖片的使用

一. flutter中我們想加載本地圖片，需要兩步：

二. flutter項目中本地圖片加載的原理

在加載圖片時，系統自動會根據屏幕分辨率優先選擇到符合自己分配率的文件夾（2.0x或者3.0x或者4.0x）下去取相對應的圖片，如果當前文件夾下沒有，則會到低一倍的文件夾下去，如果還沒有，則繼續向更低一倍去取。(比如：iOS 5.5英寸及以上屏幕會優先選擇去3.0x下去取圖片，如果3.0x不存在或者3.0x文件夾下沒有，則去2.0x下取；如果2.0x不存在或者2.0x下沒有，則去1.0x下取；1.0x下再沒有，則在images文件下取)。

使用Flutter + V8/JsCore開發小程序引擎（一）

眾所周知，小程序是由HTML標簽來開發原生組件，那么首先需要將HTML做解析，這里我們將HTML通過node腳本解析成JSON字符串，再用Dart來解析JSON，映射對應的標簽到flutter的組件。這里先簡單介紹實現的功能以及展示效果，后續再詳細介紹。

為了高效解析，直接用flutter的組件名在HTML文件上開發

直接使用flutter的組件

模仿微信小程序的Api，cc對應是微信小程序的wx

以上HTML中的例子

《使用Flutter + V8/JsCore開發小程序引擎（二）》

《使用Flutter + V8/JsCore開發小程序引擎（三）》