Flutter 如何使用TextField

這是一個預設的TextField

TextField()

修改TextField內部的文字style

TextField(
  style: TextStyle(
    color: Color(0xff176A6E),
    fontWeight: FontWeight.bold,
  ),
),

修改游標

TextField(
  cursorColor: Color(0xff176A6E),
  cursorWidth: 20,
  cursorRadius: Radius.circular(10.0),
),

限制字數

child: TextField(
  maxLength: 5,
),

設定最大行數

如果將最大行數設為null的話，當文字內容超過TextField，會自動換行，且TextField的高度也會自動增加

TextField(
  maxLines: null,
),

如果給固定行數的話，TextField的高度一開始就會計算好

TextField(
  maxLines: 4,
),

隱藏輸入的資訊

TextField(
  obscureText: true,
),

加入Label及Hint

TextField(
  decoration: InputDecoration(
    hintText: 'Hint',
    labelText: 'Label',
  ),
),

加入Prefix或Suffix

icon

TextField(
  decoration: InputDecoration(
    icon: Icon(Icons.shop),
  ),
),

prefix icon

TextField(
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.shop),
  ),
),

suffix icon

TextField(
  decoration: InputDecoration(
    suffixIcon: Icon(Icons.shop),
  ),
),

Prefix

TextField(
  decoration: InputDecoration(
    prefix: CircularProgressIndicator(),
  ),
),

Suffix

TextField(
  decoration: InputDecoration(
    suffix: CircularProgressIndicator(),
  ),
),

Helper text

TextField(
  decoration: InputDecoration(
    helperText: 'Please input your content',
  ),
),

消除底線

TextField(
  decoration: InputDecoration.collapsed(hintText: null),
),
TextField(
  decoration: InputDecoration(
    border: InputBorder.none,
  ),
),
TextField(
  decoration: null,
),

設定Border

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
  ),
),

文字內容的padding

TextField(
  decoration: InputDecoration(
    contentPadding: EdgeInsets.all(20)
  ),
),

各種Callback

TextField(
  onChanged: (text) {},
  onEditingComplete: () {},
  onSubmitted: (text) {},
),
onChanged: 文字內容改變的時候觸發
onEditingComplete: 文字編輯完成時觸發
onSubmitted: 點擊鍵盤的完成或送出時觸發

各種鍵盤

有好多個，大家自己試XD

各種InputAction

指的就是鍵盤右下角的按鈕，截圖是done，也是好多個，大家自己試

常用的大概是這些，稍微做個紀錄！