去年滿無聊的
做了一張iOS與Android元件比較圖
不過今年我知道錯了
聽說Flutter的元件有330個以上
我可列不完XD
不過Flutter不愧是UI框架
很多以前要自己刻的View幾乎都有了
對開發者也是很便利的

Today Preview

1. Text

文字顯示一定是大家學的第一個元件
不過也是比較簡單的一個元件
下面就介紹一下跟以前比較不一樣的地方⚠️⚠️⚠️

1. 第一個就是這個Widget本身的名字XDDD
   在以前text聽起來很像一個String
   現在其實它是UILable
2. 以前行數預設1行(不能換行), Flutter是預設會自動折行, 我覺得這是比較符合直覺的
3. 多了一個TextStyle屬性, 透過它才能指定前後顏色跟字體等等

  final specialText = Text("我是一個置中/粗體/20 size/紅字的text",
      textAlign: TextAlign.center,
      style: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.bold,
          color: Colors.red
      )
  );

另外
如果要做到像以前的NSAttributedString效果
在Flutter是透過Text.rich + TextSpan 來完成☘️☘️☘️

  final richText = Text.rich(
    TextSpan(
      children: [
        TextSpan(text: "請您同意："),
        TextSpan(text: "隱私權條款",
          recognizer: _tapRecognizer, //也可以直接在上面加手勢
          style: TextStyle(
            color: Colors.blueAccent,
            decoration: TextDecoration.underline
          )
        )
      ]
    )
  );

對了
Flutter也支援像Swift一樣的多行字串
一樣是用"""

2. TextField

既然講到文字顯示, 也一定會提到文字輸入
這次的類別名稱跟用途都跟iOS一樣耶～港動QQ
接下來一樣說明異同

2.1 不同的地方⚠️⚠️⚠️

1. 跟Android一樣, 沒有另外的多行輸入Class
   而是用maxLines去控制
   但maxLines不是最多輸入幾行, 是一次最多顯示幾行, 超過的部分要scroll才能看到
2. 不使用delegate method, 而是使用onXXX等call back
   例如onChanged/onEditingComplete/onSubmitted
3. 有一個controller屬性
   在Flutter裡, 很多時候我們不直接跟這個widget互動
   而是透過controller去改變它或取值(例如.text)
4. 要透過decoration屬性才能設定textField的外觀或hint
5. 可以用autofocus設定為自動彈出鍵盤
6. 可以設定maxLength(設定後右下角還會字數統計, 太貼心了吧)
   並且可以設定maxLengthEnforced(true不能繼續打字; false可以繼續打, 但會輸入框變紅)

2.2 類似的地方☘️☘️☘️

1. 有keyboardType
2. 有textInputAction(returnKeyType)
3. 有obscureText(isSecureTextEntry)
4. 有enable

3. 對照表

本集內容Android版請見：iOS Developer Learning Android. Lesson 10

下集預告：按鈕與對話方塊

最後提供一下github.com/mark33699/IDLF