前言

話說代碼武林中出了一套絕世神功，名為Flutter，Android，iOS，Web等各路大俠紛紛前往，一探究竟，臨前一覽才發(fā)覺這套神功和Android，iOS這兩派功法有著相輔相成的無盡妙處，習得Flutter神功，便可以雙手出招，一拳一掌干掉Android和iOS，立于不敗之地。

今有習得Web神功的一名江湖小生，想要學(xué)會Flutter神功，干掉Android和iOS這兩個亦敵亦友的門派，一番勤學(xué)苦練，摸索探尋后，總結(jié)了一套適合Web門派子弟學(xué)習的套路，現(xiàn)公布天下。

正文

小生在學(xué)習Flutter這門神功時，又是購買書籍，又是觀看教學(xué)視頻，又是加各種Flutter交流群，一番折騰下來，小生懵了，就學(xué)會了配置環(huán)境，安裝運行起來Demo，看著模擬器上那似模似樣的界面，滿意的點點頭，看著Flutter中文網(wǎng)上那些組件介紹，愣是不知道該如何往下走，一時躊躇萬分。

忽然靈機一動，有了思路，各路朋友們，尤其是Web門派的朋友們，請看好。

兄弟們，咱們先不看文檔了，咱們直入正題，直接開擼應(yīng)用，邊擼邊學(xué)，豈不爽哉！

咱們要做一個應(yīng)用，首先要先做什么頁面？首頁，登錄注冊？我想大部分道友都是先做登錄注冊，頁面內(nèi)容少啊，簡單啊，容易入手啊。

好，既然確定了第一個目標，那咱們就先整個注冊頁，這時，小生想到，現(xiàn)在一般的注冊頁只有個手機號，密碼，驗證碼輸入就完事了，咱既然是探索學(xué)習，那就整全一些，把一些Form相關(guān)的組件盡量能用都用上，直接學(xué)會相關(guān)聯(lián)的組件使用。

工欲善其事，必先利其器。小生在Web開發(fā)中主要使用VS Code來開發(fā)，插件多，很方便，于是嘗試使用此工具來開發(fā)Flutter，而且網(wǎng)上各路朋友大部分都是用的此工具，用著用著發(fā)現(xiàn)總是要手打命令，而且還要用Android Studio打開模擬器，甚是不便，于是轉(zhuǎn)頭來使用Android Studio。

VS Code和Android Studio關(guān)于Flutter的配置和創(chuàng)建項目，這里不做講解，網(wǎng)上遍地都是Flutter從入門到一臉懵逼的教程。

Web門派的朋友們使用Android Studio可能會有些不適應(yīng)，VS Code還能用個中文插件，看著一個個中文漢字就倍覺親切，Android Studio全是國外字母，哪有漢字高大上，沒辦法，兄弟們，外國鳥字多少有點用處，湊乎著看吧。

小技巧

在Android Studio中，點擊左上角File，然后點擊setting，然后再點擊Plugins，如果你已經(jīng)配置好了Flutter，這里就會看到Dart和Flutter，兄弟們開發(fā)過程中都喜歡有關(guān)鍵字或者語法提示，所以兄弟們需要在這個Plugins里搜索Flutter Snippets這個插件，然后安裝，安裝完成后，咱們開發(fā)中輸入簡單的幾個字母，就可以直接打出來一些組件基礎(chǔ)模板，比如輸入import、sta等都有意想不到的效果。

在開發(fā)工具左下角有這么一塊內(nèi)容：

在這里插入圖片描述

兄弟們?nèi)羰怯龅介_發(fā)過程中熱重載不及時的情況，點擊重啟就行。
兄弟們點開右邊那個Dart圖表，就會打開Dart DevTools頁面：

在這里插入圖片描述

一些基礎(chǔ)的小技巧咱們介紹到這里，開始正式的構(gòu)思學(xué)習中。

學(xué)習思路

先放demo示例圖：

在這里插入圖片描述

不少朋友這時候肯定有疑問了，我文檔看了好幾遍，大概意思也明白了，但是我不知道該怎么用啊？究竟該怎么用呢？

兄弟們，作為初學(xué)者，這里你需要明白一個概念：組件，就如上圖所示，你能看到的，你用到的，基本都是組件，而這些組件和VUE中你所理解的組件是差不多的。

在web中，咱們寫個輸入框直接寫input標簽就可以，然后再給這個標簽添加css樣式就可以，相當簡單，如果咱們把這個input單獨寫進一個Input.vue組件文件里，并且加上了一點基本的設(shè)定樣式，那么這個Input.vue組件就可以理解成Flutter中的TextField組件。

我們在使用TextField或者其他Flutter組件時，這個組件的樣式，控制邏輯都在這個組件內(nèi)控制實現(xiàn)，并不是像web中html結(jié)構(gòu)，css樣式和js邏輯分離開的，這一點，Web門派的道友們要盡快理解過來。

這里小生先假裝你不懂Flutter路由，不知道該怎么創(chuàng)建一個新的頁面，咱們直接在main.dart中找到body，然后將body后面的Center()組件替換成如下代碼：

TextField(
  decoration: InputDecoration(
    labelText: "密碼",
      hintText: "您的登錄密碼",
      prefixIcon: Icon(Icons.lock)
  )
)

在頁面中就會出現(xiàn)這么一個輸入框：

在這里插入圖片描述

基本的一個輸入框已經(jīng)出來了，剩下的就是調(diào)整樣式，按住鍵盤Ctrl鍵點擊TextField，就可以查看源碼，源碼中列出了這個組件的所有參數(shù)，用什么就塞對應(yīng)的參數(shù)就可以。

  const TextField({
    Key key,
    this.controller,    //編輯框的控制器，跟文本框的交互一般都通過該屬性完成，如果不創(chuàng)建的話默認會自動創(chuàng)建
    this.focusNode,  //用于管理焦點
    this.decoration = const InputDecoration(),   //輸入框的裝飾器，用來修改外觀
    TextInputType keyboardType,   //設(shè)置輸入類型，不同的輸入類型鍵盤不一樣
    this.textInputAction,   //用于控制鍵盤動作（一般位于右下角，默認是完成）
    this.textCapitalization = TextCapitalization.none,
    this.style,    //輸入的文本樣式
    this.textAlign = TextAlign.start,   //輸入的文本位置
    this.textDirection,    //輸入的文字排列方向，一般不會修改這個屬性
    this.autofocus = false,   //是否自動獲取焦點
    this.obscureText = false,   //是否隱藏輸入的文字，一般用在密碼輸入框中
    this.autocorrect = true,   //是否自動校驗
    this.maxLines = 1,   //最大行
    this.maxLength,   //能輸入的最大字符個數(shù)
    this.maxLengthEnforced = true,  //配合maxLength一起使用，在達到最大長度時是否阻止輸入
    this.onChanged,  //輸入文本發(fā)生變化時的回調(diào)
    this.onEditingComplete,   //點擊鍵盤完成按鈕時觸發(fā)的回調(diào)，該回調(diào)沒有參數(shù)，(){}
    this.onSubmitted,  //同樣是點擊鍵盤完成按鈕時觸發(fā)的回調(diào)，該回調(diào)有參數(shù)，參數(shù)即為當前輸入框中的值。(String){}
    this.inputFormatters,   //對輸入文本的校驗
    this.enabled,    //輸入框是否可用
    this.cursorWidth = 2.0,  //光標的寬度
    this.cursorRadius,  //光標的圓角
    this.cursorColor,  //光標的顏色
    this.keyboardAppearance,
    this.scrollPadding = const EdgeInsets.all(20.0),
    this.dragStartBehavior = DragStartBehavior.down,
    this.enableInteractiveSelection,
    this.onTap,    //點擊輸入框時的回調(diào)(){}
    this.buildCounter,
  })

這里介紹下decoration，接收一個InputDecoration類型的值，修改外觀樣式和提示內(nèi)容，都需要在這里進行操作。

InputDecoration({
    this.icon,    //位于裝飾器外部和輸入框前面的圖片
    this.labelText,  //用于描述輸入框，例如這個輸入框是用來輸入用戶名還是密碼的，當輸入框獲取焦點時默認會浮動到上方，
    this.labelStyle,  // 控制labelText的樣式,接收一個TextStyle類型的值
    this.helperText, //輔助文本，位于輸入框下方，如果errorText不為空的話，則helperText不會顯示
    this.helperStyle, //helperText的樣式
    this.hintText,  //提示文本，位于輸入框內(nèi)部
    this.hintStyle, //hintText的樣式
    this.hintMaxLines, //提示信息最大行數(shù)
    this.errorText,  //錯誤信息提示
    this.errorStyle, //errorText的樣式
    this.errorMaxLines,   //errorText最大行數(shù)
    this.hasFloatingPlaceholder = true,  //labelText是否浮動，默認為true，修改為false則labelText在輸入框獲取焦點時不會浮動且不顯示
    this.isDense,   //改變輸入框是否為密集型，默認為false，修改為true時，圖標及間距會變小
    this.contentPadding, //內(nèi)間距
    this.prefixIcon,  //位于輸入框內(nèi)部起始位置的圖標。
    this.prefix,   //預(yù)先填充的Widget,跟prefixText同時只能出現(xiàn)一個
    this.prefixText,  //預(yù)填充的文本，例如手機號前面預(yù)先加上區(qū)號等
    this.prefixStyle,  //prefixText的樣式
    this.suffixIcon, //位于輸入框后面的圖片,例如一般輸入框后面會有個眼睛，控制輸入內(nèi)容是否明文
    this.suffix,  //位于輸入框尾部的控件，同樣的不能和suffixText同時使用
    this.suffixText,//位于尾部的填充文字
    this.suffixStyle,  //suffixText的樣式
    this.counter,//位于輸入框右下方的小控件，不能和counterText同時使用
    this.counterText,//位于右下方顯示的文本，常用于顯示輸入的字符數(shù)量
    this.counterStyle, //counterText的樣式
    this.filled,  //如果為true，則輸入使用fillColor指定的顏色填充
    this.fillColor,  //相當于輸入框的背景顏色
    this.errorBorder,   //errorText不為空，輸入框沒有焦點時要顯示的邊框
    this.focusedBorder,  //輸入框有焦點時的邊框,如果errorText不為空的話，該屬性無效
    this.focusedErrorBorder,  //errorText不為空時，輸入框有焦點時的邊框
    this.disabledBorder,  //輸入框禁用時顯示的邊框，如果errorText不為空的話，該屬性無效
    this.enabledBorder,  //輸入框可用時顯示的邊框，如果errorText不為空的話，該屬性無效
    this.border, //正常情況下的border
    this.enabled = true,  //輸入框是否可用
    this.semanticCounterText,  
    this.alignLabelWithHint,
  })

其他參數(shù)先不講解，講的太多，兄弟們就懵了，這時候肯定有朋友會想：我想要個帶邊框的輸入框，該怎么實現(xiàn)呢？請看示例：

TextField(
  obscureText: true, // 是否隱藏正在編輯的文本，如用于輸入密碼的場景等，文本內(nèi)容會用“?”替換
  focusNode: focusPassword, // 關(guān)聯(lián)focusPassword
  decoration: InputDecoration(
    hasFloatingPlaceholder: false, // labelText是否浮動，默認true，修改為false則LabelText在聚焦時不會上浮且不顯示
    labelText: "請?zhí)顚懨艽a",
    hintText: "請?zhí)顚懨艽a",
    enabledBorder: OutlineInputBorder( // 輸入框可用時顯示的邊框
        borderRadius: BorderRadius.all(Radius.circular(10)), // 直接在TextField上設(shè)置圓角邊框
        borderSide: BorderSide(color: Colors.black12, width: 1)
    ),
    focusedBorder: OutlineInputBorder( // 聚焦時顯示的邊框
        borderRadius: BorderRadius.all(Radius.circular(10)),
        borderSide: BorderSide(color: Colors.lightBlueAccent, width: 1)
    ),
  ),
  onChanged: (val){
    // 輸入內(nèi)容發(fā)生變化時觸發(fā)此方法，可獲取到輸入的內(nèi)容
    print("密碼輸入：$val");
  },
  onSubmitted: (val) {
    // 點擊鍵盤完成按鈕時，可以觸發(fā)此方法，能夠獲取當前輸入值
    print("當前輸入內(nèi)容為：$val");
  },
),

兄弟們，俗話說的好：囫圇吞棗，越學(xué)越好。這話對于廣大程序員來講再合適不過了，很多朋友都不是天才或者極其聰明的人士，咱們要想快速掌握一門技術(shù)，就要先求入門，差不多，似懂非懂就可以，千萬別抓著一個技術(shù)點往死里專研，非得弄個各種屬性，各種原理都清晰明了再去學(xué)習其他內(nèi)容。

這里就說到了最重要的一點：似懂非懂，動手便懂。兄弟們，一定要動手寫起來，代碼擼的多了就明白了。

輸入框咱們知道的差不多了，那么就來看看單選框，復(fù)選框和開關(guān)。
示例代碼如下：

Radio(
    value: 2, // 當前組件的值
    groupValue: sex,  // 當前組件所屬組的值，即操作的最終結(jié)果值
    activeColor: Colors.red, // 激活狀態(tài)下顯示的顏色
    onChanged: (e){
      // 組件本身并不會保存當前狀態(tài)，選中狀態(tài)由父組件來管理，當被點擊時，會觸發(fā)此事件。
      // 通過此事件獲取當前值后更新父組件變量，借此更新頁面顯示狀態(tài)
      setState(() {
        sex = e;
      });
    }
 ),

Checkbox(
   value: hobby[1],
   activeColor: Colors.yellow, // 設(shè)置激活狀態(tài)下的顏色
   onChanged: (e){
     setState(() {
       hobby[1] = e;
     });
   }
),

Switch(
   value: rich,
   activeColor: Colors.green, // 激活時圓點的顏色
   activeTrackColor: Colors.pink, // 激活時橫條的顏色
   onChanged: (e){
     setState(() {
       rich = e;
     });
   }
),

兄弟們，到現(xiàn)在你應(yīng)該知道了上述基本組件該如何使用，但是想要實現(xiàn)上面demo示例圖中的內(nèi)容，這些內(nèi)容遠遠不夠，還需要用到布局的內(nèi)容，關(guān)于布局的知識點，此篇文章先不做講解，期待小生后續(xù)更新吧~

學(xué)習步驟：
1.確定一個你想要實現(xiàn)的簡單頁面。
2.根據(jù)頁面內(nèi)的元素去查看學(xué)習對應(yīng)的組件
3.敲代碼嘗試實現(xiàn)

點這里查看上圖示例詳情代碼，有詳細注釋說明。

好的，兄弟們，這第一節(jié)就先到這里，作者也是個學(xué)習Flutter的新人，覺得本文講的還可以的，給個關(guān)注吧，給個打賞那是再好不過了，哈哈哈哈……

青山不改，綠水長流，咱們下一篇文章見。