欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

flutter 輸入框組件TextField的實現(xiàn)代碼

 更新時間：2019年07月24日 10:20:08   作者：__卓原  
這篇文章主要介紹了flutter 輸入框組件TextField的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

TextField

顧名思義文本輸入框，類似于iOS中的UITextField和Android中的EditText和Web中的TextInput。主要是為用戶提供輸入文本提供方便。相信大家在原生客戶端上都用過這個功能，就不在做具體介紹了，接下來還是具體介紹下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)容時調(diào)用
  this.inputFormatters,
  this.enabled,
  this.cursorWidth = 2.0,
  this.cursorRadius,
  this.cursorColor,
  this.keyboardAppearance,
 })

先來試試最基本的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(),
  );
 }
}


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

然后我們試一下它的屬性

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


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

我們增加一個keyboardType屬性，把keyboardType設(shè)置為TextInputType.number

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

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

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

還可以看到 我加了一個onChanged。

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

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

接下來，我們實現(xiàn)一個簡單的登錄頁面:

/*
 * 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> {
 //手機號的控制器
 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: '請輸入你的用戶名)',
       helperText: '請輸入注冊的手機號',
      ),
      autofocus: false,
     ),
     TextField(
       controller: passController,
       keyboardType: TextInputType.number,
       decoration: InputDecoration(
        contentPadding: EdgeInsets.all(10.0),
        icon: Icon(Icons.lock),
        labelText: '請輸入密碼)',
       ),
       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('手機號碼格式不對'),
       ));
  } else if (passController.text.length == 0) {
   showDialog(
     context: context,
     builder: (context) => AlertDialog(
        title: Text('請?zhí)顚懨艽a'),
       ));
  } else {
   showDialog(
     context: context,
     builder: (context) => AlertDialog(
        title: Text('登錄成功'),
       ));
   phoneController.clear();
  }
 }

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

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

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

當(dāng)用戶輸入的手機號碼不是11位的時候提示手機號碼格式錯誤，

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

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

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

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

使用decoration美化輸入框

先看一下效果：

代碼：

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


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

decoration屬性介紹:

  • border：增加一個邊框，
  • hintText：未輸入文字時，輸入框中的提示文字，
  • prefixIcon：輸入框內(nèi)側(cè)左面的控件，
  • labelText：一個提示文字。輸入框獲取焦點/輸入框有內(nèi)容 會移動到左上角，否則在輸入框內(nèi)，labelTex的位置.
  • suffixIcon: 輸入框內(nèi)側(cè)右面的圖標(biāo).
  • icon : 輸入框左側(cè)添加個圖標(biāo)

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

介紹一下onEditingComplete這個方法:

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

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

  • 當(dāng)完成操作被按下時，例如“done”、“go”、“send”或“search”，用戶的內(nèi)容被提交給[controller]，然后焦點被放棄。
  • 當(dāng)按下一個未完成操作(如“next”或“previous”)時，用戶的內(nèi)容被提交給[controller]，但不會放棄焦點，因為開發(fā)人員可能希望立即將焦點轉(zhuǎn)移到[onsubmit]中的另一個輸入小部件。

我們有時候會需要這樣的情況, 比如一個登錄頁面, 需要輸入賬號和密碼 , 自然輸入完賬號就要輸入密碼了 , 我們在輸入賬號結(jié)束的時候 , 讓密碼輸入框獲取到焦點 .

看一下代碼:

...
 FocusNode secondTextFieldNode = FocusNode();
...
Column(
    children: <Widget>[
     TextField(
      /* onChanged: (text) {
     value = text;
     print(value);
    },*/
      autofocus: false, //是否自動獲取焦點
      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)建了一個交電接點并附加給第二個輸入框,

在第一個輸入框的onEditingComplete方法中是用

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

方法來讓第二個輸入框請求獲取焦點,

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

keyboardType

TextField成為焦點時顯示的鍵盤類型。

TextField(
 keyboardType: TextInputType.number,
),

類型是：

  • TextInputType.text（普通完整鍵盤）
  • TextInputType.number（數(shù)字鍵盤）
  • TextInputType.emailAddress（帶有“@”的普通鍵盤）
  • TextInputType.datetime（帶有“/”和“：”的數(shù)字鍵盤）
  • TextInputType.multiline（帶有選項以啟用有符號和十進制模式的數(shù)字鍵盤）

TextInputAction

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

TextField(
 textInputAction: TextInputAction.search,
),

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

TextCapitalization

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

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

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

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

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

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

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

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

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

控制TextField中的大小和最大長度

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

TextField(
 maxLength: 4,
),

通過設(shè)置maxLength屬性，將強制執(zhí)行最大長度，并且默認(rèn)情況下會將計數(shù)器添加到TextField。

github源碼

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論