技術標籤：Flutter 開發Flutter文字框輸入框背景樣式

Flutter 設定文字框背景

先來看最終效果：

普通文字框樣式的設定

以下設定一個普通的文字框樣式：

new TextField(
  controller: _titleTxt,
  keyboardType: TextInputType.text,//鍵盤型別
  decoration: InputDecoration(//文字框樣式設定
    contentPadding: EdgeInsets.all(10.0),//內容邊距
    labelText: '標題',//輸入框的描述文字
    border: OutlineInputBorder(//邊框
    ),
  ),
  style: TextStyle(fontSize: 14),//字型樣式
  autofocus: false,
  maxLines: 1,//單行文字框
),
 

設定具有背景色的輸入框

new TextField(
  controller: _titleTxt,
  keyboardType: TextInputType.text,
  decoration: InputDecoration(
    //是否填充背景色
    filled: true,
    //設定背景色，filled 為 true 時生效
    fillColor: Color(0xfff2f2f2),
    contentPadding: EdgeInsets.all(10.0),
    //邊框樣式設定
    border: _outlineInputBorder,
    focusedBorder: _outlineInputBorder,
    enabledBorder: _outlineInputBorder,
    disabledBorder: _outlineInputBorder,
    focusedErrorBorder: _outlineInputBorder,
    errorBorder: _outlineInputBorder,
  ),
  style: TextStyle(fontSize: 14),
  autofocus: false,
  maxLines: 1,
),
 

這裡最關鍵的是 filled 屬性，必須設定為 true，只有這樣，fillColor 設定的顏色才能生效。

**PS：更多精彩內容，請檢視 --> 《Flutter 開發》
**PS：更多精彩內容，請檢視 --> 《Flutter 開發》
**PS：更多精彩內容，請檢視 --> 《Flutter 開發》