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

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

創(chuàng)新互聯(lián)建站是一家專注于成都做網(wǎng)站、網(wǎng)站設(shè)計與策劃設(shè)計,婁煩網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:婁煩等地區(qū)。婁煩做網(wǎng)站價格咨詢:13518219792

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 ，當(dāng)然了，每個 ListView 都有其對應(yīng)的 item ，在里面的方法中編寫 widget 即可

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

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

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

Flutter 零基礎(chǔ)入門實戰(zhàn)視頻教程（28 個視頻）

Flutter 零基礎(chǔ)入門實戰(zhàn)視頻教程 #01 環(huán)境搭建 「14:03」

Flutter 零基礎(chǔ)入門實戰(zhàn)視頻教程 #02 Dart 語言 「17:49」

Flutter 零基礎(chǔ)入門實戰(zhàn)視頻教程 #03 建立 Android studio 虛擬設(shè)備 「04:12」

Flutter 零基礎(chǔ)入門實戰(zhàn)視頻教程 #04 建立第一個項目 「08:23」

Flutter 零基礎(chǔ)入門實戰(zhàn)視頻教程 #05 安裝配置過程中可能遇到的問題（沒遇到者可以跳過） 「05:07」

Flutter 零基礎(chǔ)入門實戰(zhàn)視頻教程 #06 運行 iOS 模擬器 「04:07」

Flutter 零基礎(chǔ)入門實戰(zhàn)視頻教程 #07 Flutter 概述 「06:15」

Flutter 零基礎(chǔ)入門實戰(zhàn)視頻教程 #08 Scaffold AppBar 「Pro」「06:50」

Flutter 零基礎(chǔ)入門實戰(zhàn)視頻教程 #09 文檔和快捷鍵 「Pro」「02:36」

Flutter 零基礎(chǔ)入門實戰(zhàn)視頻教程 #10 顏色 Colors 「Pro」「05:47」

Flutter 零基礎(chǔ)入門實戰(zhàn)視頻教程 #11 自定義字體 fonts 「Pro」「05:09」

Flutter 零基礎(chǔ)入門實戰(zhàn)視頻教程 #12 hot reload StatelessWidget 「Pro」「04:56」

Flutter 零基礎(chǔ)入門實戰(zhàn)視頻教程 #13 使用圖片 「Pro」「04:59」

Flutter 零基礎(chǔ)入門實戰(zhàn)視頻教程 #14 使用圖標(biāo) - Icon 「Pro」「01:27」

Flutter 零基礎(chǔ)入門實戰(zhàn)視頻教程 #15 Button 按鈕使用指南 「Pro」「04:35」

Flutter 零基礎(chǔ)入門實戰(zhàn)視頻教程 #16 Container 和 Padding 「Pro」「04: 52」

Flutter 零基礎(chǔ)入門實戰(zhàn)視頻教程 #17 Row 「Pro」「05:24」

Flutter 零基礎(chǔ)入門實戰(zhàn)視頻教程 #18 Column 「Pro」「05:36」

Flutter 零基礎(chǔ)入門實戰(zhàn)視頻教程 #19 Flutter Outline Shortcuts 「Pro」「03:18」

Flutter 零基礎(chǔ)入門實戰(zhàn)視頻教程 #20 Expanded Widgets 「Pro」「06:06」

Flutter 零基礎(chǔ)入門實戰(zhàn)視頻教程 #21 實戰(zhàn)開始 「Pro」「11:42」

Flutter 零基礎(chǔ)入門實戰(zhàn)視頻教程 #22 換個編輯器 - Visual Studio Code 「Pro」「04:50」

Flutter 零基礎(chǔ)入門實戰(zhàn)視頻教程 #23 Stateful vs Stateless Widget 「Pro」「09:45」

Flutter 零基礎(chǔ)入門實戰(zhàn)視頻教程 #24 列表處理 「Pro」「04:54」

Flutter 零基礎(chǔ)入門實戰(zhàn)視頻教程 #25 自定義 class 「Pro」「05:37」

Flutter 零基礎(chǔ)入門實戰(zhàn)視頻教程 #26 card widget 「Pro」「04:26」

Flutter 零基礎(chǔ)入門實戰(zhàn)視頻教程 #27 Extracting Widgets 「Pro」「06:59」

Flutter 零基礎(chǔ)入門實戰(zhàn)視頻教程 #28 刪除 - Functions as Parameters - 完結(jié) - 進入實戰(zhàn)課 「Pro」「04:35」

新建一個flutter項目，可以在ios上運行，四步搞定！

1. 建立一個flutter項目的命令

2. 在ios文件夾下，生成pods文件夾

3. Xcode環(huán)境簽名設(shè)置；

把錯誤的版本刪除再添加，可解決簽名錯誤問題；必須先刪除再添加，直接修改可能不起作用。團隊開發(fā)，必須使用團隊的簽名。

4.運行創(chuàng)建的flutter項目；

選擇真機、模擬機，點擊運行按鈕，或使用命令運行：

下面兩步是贈送的：

5.新加一款插件，所涉及的命令；

ios 端所涉及的命令

6. 剛更新的插件和已有的插件有沖突怎么辦？

可以試一試以下步驟：