iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
1
Mobile Development

iOS Developer Learning Flutter系列 第 7

iOS Developer Learning Flutter. Lesson6 文字顯示與輸入

去年滿無聊的
做了一張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 Flutter
TextView UILabel Text
EditText UITextField TextField

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

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

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


上一篇
iOS Developer Learning Flutter. Lesson5 容器元件
下一篇
iOS Developer Learning Flutter. Lesson7 按鈕與對話方塊
系列文
iOS Developer Learning Flutter30

1 則留言

0
tw_hsu
iT邦新手 5 級 ‧ 2020-09-22 11:20:19

OMG
這是我看過最實用的元件介紹

感謝

OMG 過獎了過獎了
受寵若驚XD

我要留言

立即登入留言