如何在flutter 中使用TextField輸入框組件

今天就跟大家聊聊有關(guān)如何在flutter 中使用TextField輸入框組件，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

TextField

顧名思義文本輸入框，類似于iOS中的UITextField和Android中的EditText和Web中的TextInput。主要是為用戶提供輸入文本提供方便。相信大家在原生客戶端上都用過(guò)這個(gè)功能，就不在做具體介紹了，接下來(lái)還是具體介紹下Flutter中TextField的用法。

以下內(nèi)容已更新到 github

TextField的構(gòu)造方法：

const TextField({
  Key key,
  this.controller,      //控制器，控制TextField文字
  this.focusNode,
  this.decoration: const InputDecoration(),   //輸入器裝飾
  TextInputType keyboardType: TextInputType.text, //輸入的類型
  this.style,
  this.textAlign: TextAlign.start,
  this.autofocus: false,
  this.obscureText: false, //是否隱藏輸入
  this.autocorrect: true,
  this.maxLines: 1,
  this.maxLength,
  this.maxLengthEnforced: true,
  this.onChanged,      //文字改變觸發(fā)
  this.onSubmitted,     //文字提交觸發(fā)（鍵盤按鍵）
  this.onEditingComplete, //當(dāng)用戶提交可編輯內(nèi)容時(shí)調(diào)用
  this.inputFormatters,
  this.enabled,
  this.cursorWidth = 2.0,
  this.cursorRadius,
  this.cursorColor,
  this.keyboardAppearance,
 })

先來(lái)試試最基本的TextField:

/*
 * Created by 李卓原 on 2018/9/7.
 * email: zhuoyuan93@gmail.com
 *
 */
 
import 'package:flutter/material.dart';

class TextFieldAndCheckPage extends StatefulWidget {
 @override
 State<StatefulWidget> createState() => TextFieldAndCheckPageState();
}

class TextFieldAndCheckPageState extends State<TextFieldAndCheckPage> {
 @override
 Widget build(BuildContext context) {
  return Scaffold(appBar: AppBar(
   title: Text('輸入和選擇'),
  ),body:TextField(),
  );
 }
}

這是一個(gè)默認(rèn)的輸入框,我們什么都沒(méi)有做的時(shí)候的樣子.

然后我們?cè)囈幌滤膶傩?/p>

TextField(
    keyboardType: TextInputType.number,
    decoration: InputDecoration(
     contentPadding: EdgeInsets.all(10.0),
     icon: Icon(Icons.text_fields),
     labelText: '請(qǐng)輸入你的姓名)',
     helperText: '請(qǐng)輸入你的真實(shí)姓名',
    ),
    onChanged: _textFieldChanged,
    autofocus: false,
   ),


 void _textFieldChanged(String str) {
  print(str);
 }

我們?cè)黾右粋€(gè)keyboardType屬性，把keyboardType設(shè)置為TextInputType.number

可以看到每次我們讓TextField獲得焦點(diǎn)的時(shí)候彈出的鍵盤就變成了數(shù)字優(yōu)先了。

然后我們?yōu)檩斎肟蜃鲆恍┢渌男Ч?，如提示文字，icon、標(biāo)簽文字等。

我們給上面的代碼新增decoration屬性，設(shè)置相關(guān)屬性，可以發(fā)現(xiàn)當(dāng)我們的TextField獲得焦點(diǎn)時(shí)，圖標(biāo)會(huì)自動(dòng)變色，提示文字會(huì)自動(dòng)上移。

還可以看到 我加了一個(gè)onChanged。

onChanged是每次輸入框內(nèi)每次文字變更觸發(fā)的回調(diào)，onSubmitted是用戶提交而觸發(fā)的回調(diào)。

每當(dāng)用戶改變輸入框內(nèi)的文字，都會(huì)在控制臺(tái)輸出現(xiàn)在的字符串.與onSubmitted用法相同.

接下來(lái)，我們實(shí)現(xiàn)一個(gè)簡(jiǎn)單的登錄頁(yè)面:

/*
 * Created by 李卓原 on 2018/9/7.
 * email: zhuoyuan93@gmail.com
 *
 */

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class TextFieldAndCheckPage extends StatefulWidget {
 @override
 State<StatefulWidget> createState() => TextFieldAndCheckPageState();
}

class TextFieldAndCheckPageState extends State<TextFieldAndCheckPage> {
 //手機(jī)號(hào)的控制器
 TextEditingController phoneController = TextEditingController();

 //密碼的控制器
 TextEditingController passController = TextEditingController();

 @override
 Widget build(BuildContext context) {
  return Scaffold(
   appBar: AppBar(
    title: Text('輸入和選擇'),
   ),
   body: Column(
    children: <Widget>[
     TextField(
      controller: phoneController,
      keyboardType: TextInputType.number,
      decoration: InputDecoration(
       contentPadding: EdgeInsets.all(10.0),
       icon: Icon(Icons.phone),
       labelText: '請(qǐng)輸入你的用戶名)',
       helperText: '請(qǐng)輸入注冊(cè)的手機(jī)號(hào)',
      ),
      autofocus: false,
     ),
     TextField(
       controller: passController,
       keyboardType: TextInputType.number,
       decoration: InputDecoration(
        contentPadding: EdgeInsets.all(10.0),
        icon: Icon(Icons.lock),
        labelText: '請(qǐng)輸入密碼)',
       ),
       obscureText: true),
     RaisedButton(
      onPressed: _login,
      child: Text('登錄'),
     ),
    ],
   ),
  );
 }

 void _login() {
  print({'phone': phoneController.text, 'password': passController.text});
  if (phoneController.text.length != 11) {
   showDialog(
     context: context,
     builder: (context) => AlertDialog(
        title: Text('手機(jī)號(hào)碼格式不對(duì)'),
       ));
  } else if (passController.text.length == 0) {
   showDialog(
     context: context,
     builder: (context) => AlertDialog(
        title: Text('請(qǐng)?zhí)顚懨艽a'),
       ));
  } else {
   showDialog(
     context: context,
     builder: (context) => AlertDialog(
        title: Text('登錄成功'),
       ));
   phoneController.clear();
  }
 }

 void onTextClear() {
  setState(() {
   phoneController.clear();
   passController.clear();
  });
 }
}

在布局上，我們使用一個(gè)Column包含了兩個(gè)TextField和一個(gè)RaisedButton。

在邏輯上，每當(dāng)我們點(diǎn)擊下面的按鈕都會(huì)判斷用戶名密碼是否符合要求，并且使用控制器清空已經(jīng)輸入的用戶名和密碼。

當(dāng)用戶輸入的手機(jī)號(hào)碼不是11位的時(shí)候提示手機(jī)號(hào)碼格式錯(cuò)誤，

當(dāng)用戶沒(méi)有輸入密碼時(shí)，提示填寫密碼，

用戶名和密碼符合要求時(shí)提示登錄成功。

我這里登錄成功之后還調(diào)了一個(gè)方法：phoneController.clear() 清空了用戶名輸入框中的內(nèi)容。

代碼的邏輯很簡(jiǎn)單。關(guān)于TextField的其他用法就不在一一介紹了，有興趣的小伙伴可以自己嘗試下.

使用decoration美化輸入框

先看一下效果：

代碼：

TextField(
      controller: accountController,
      decoration: InputDecoration(
       border: OutlineInputBorder(),
       hintText: '請(qǐng)輸入賬號(hào)',
       labelText: '左上角',
       prefixIcon: Icon(Icons.person),
      ),
     )

可以看到，我先添加了一個(gè)decoration屬性.

decoration屬性介紹:

• border：增加一個(gè)邊框，

• hintText：未輸入文字時(shí)，輸入框中的提示文字，

• prefixIcon：輸入框內(nèi)側(cè)左面的控件，

• labelText：一個(gè)提示文字。輸入框獲取焦點(diǎn)/輸入框有內(nèi)容 會(huì)移動(dòng)到左上角，否則在輸入框內(nèi)，labelTex的位置.

• suffixIcon: 輸入框內(nèi)側(cè)右面的圖標(biāo).

• icon : 輸入框左側(cè)添加個(gè)圖標(biāo)

在多個(gè)輸入框內(nèi)切換焦點(diǎn)

介紹一下onEditingComplete這個(gè)方法:

當(dāng)用戶提交可編輯內(nèi)容時(shí)調(diào)用(例如，用戶按下鍵盤上的“done”按鈕)。

onEditingComplete的默認(rèn)實(shí)現(xiàn)根據(jù)情況執(zhí)行2種不同的行為:

• 當(dāng)完成操作被按下時(shí)，例如“done”、“go”、“send”或“search”，用戶的內(nèi)容被提交給[controller]，然后焦點(diǎn)被放棄。

• 當(dāng)按下一個(gè)未完成操作(如“next”或“previous”)時(shí)，用戶的內(nèi)容被提交給[controller]，但不會(huì)放棄焦點(diǎn)，因?yàn)殚_(kāi)發(fā)人員可能希望立即將焦點(diǎn)轉(zhuǎn)移到[onsubmit]中的另一個(gè)輸入小部件。

我們有時(shí)候會(huì)需要這樣的情況, 比如一個(gè)登錄頁(yè)面, 需要輸入賬號(hào)和密碼 , 自然輸入完賬號(hào)就要輸入密碼了 , 我們?cè)谳斎胭~號(hào)結(jié)束的時(shí)候 , 讓密碼輸入框獲取到焦點(diǎn) .

看一下代碼:

...
 FocusNode secondTextFieldNode = FocusNode();
...
Column(
    children: <Widget>[
     TextField(
      /* onChanged: (text) {
     value = text;
     print(value);
    },*/
      autofocus: false, //是否自動(dòng)獲取焦點(diǎn)
      controller: _textController,
      decoration: InputDecoration(
       suffixIcon: Icon(Icons.chevron_right), //輸入框內(nèi)右側(cè)圖標(biāo)
       icon: Icon(Icons.person), //輸入框左側(cè)圖標(biāo)
       prefixIcon: Icon(Icons.skip_previous), //輸入框內(nèi)左側(cè)圖標(biāo)
       labelText: 'labelText',
       hintText: 'hintText',
       helperText: 'helperText',
      ),
      onEditingComplete: () =>
        FocusScope.of(context).requestFocus(secondTextFieldNode),
     ),
     TextField(
      focusNode: secondTextFieldNode,
      decoration: InputDecoration(
        contentPadding: EdgeInsets.symmetric(horizontal: 15.0)),
     ),
    ],
   ),

我在頂層創(chuàng)建了一個(gè)交電接點(diǎn)并附加給第二個(gè)輸入框,

在第一個(gè)輸入框的onEditingComplete方法中是用

FocusScope.of(context).requestFocus(secondTextFieldNode),

方法來(lái)讓第二個(gè)輸入框請(qǐng)求獲取焦點(diǎn),

當(dāng)然你也可以添加個(gè)按鈕 , 點(diǎn)擊按鈕執(zhí)行這個(gè)方法來(lái)實(shí)現(xiàn)切換焦點(diǎn)的功能.

keyboardType

TextField成為焦點(diǎn)時(shí)顯示的鍵盤類型。

TextField(
 keyboardType: TextInputType.number,
),

類型是：

• TextInputType.text（普通完整鍵盤）

• TextInputType.number（數(shù)字鍵盤）

• TextInputType.emailAddress（帶有“@”的普通鍵盤）

• TextInputType.datetime（帶有“/”和“：”的數(shù)字鍵盤）

• TextInputType.multiline（帶有選項(xiàng)以啟用有符號(hào)和十進(jìn)制模式的數(shù)字鍵盤）

TextInputAction

更改TextField的textInputAction可以更改鍵盤本身的操作按鈕。

TextField(
 textInputAction: TextInputAction.search,
),

這會(huì)導(dǎo)致“完成”按鈕被“搜索”按鈕替換：

TextCapitalization

TextField提供了一些有關(guān)如何使用戶輸入中的字母大寫的選項(xiàng)。

TextCapitalization.sentences : 這是我們期望的正常類型的大寫，每個(gè)句子的首字母大寫。

TextCapitalization.characters:大寫句子中的所有字符。

TextCapitalization.words : 將每個(gè)單詞的首字母大寫。

更改TextField中的光標(biāo)

可以直接從TextField小部件自定義游標(biāo)。

可以更改角落的光標(biāo)顏色，寬度和半徑。

例如，這里我沒(méi)有明顯的原因制作一個(gè)圓形的紅色光標(biāo)。

TextField(
 cursorColor: Colors.red,
 cursorRadius: Radius.circular(16.0),
 cursorWidth: 16.0,
),

控制TextField中的大小和最大長(zhǎng)度

TextFields可以控制在其中寫入的最大字符數(shù)，最大行數(shù)并在鍵入文本時(shí)展開(kāi)。

TextField(
 maxLength: 4,
),

看完上述內(nèi)容，你們對(duì)如何在flutter 中使用TextField輸入框組件有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。