flutter 輸入框組件TextField的實現代碼
TextField
顧名思義文本輸入框，類似于iOS中的UITextField和Android中的EditText和Web中的TextInput。主要是為用戶提供輸入文本提供方便。相信大家在原生客戶端上都用過這個功能，就不在做具體介紹了，接下來還是具體介紹下Flutter中TextField的用法。
以下內容已更新到 github
TextField的構造方法：
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, //當用戶提交可編輯內容時調用
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(),
);
}
}
這是一個默認的輸入框,我們什么都沒有做的時候的樣子.
然后我們試一下它的屬性
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設置為TextInputType.number
可以看到每次我們讓TextField獲得焦點的時候彈出的鍵盤就變成了數字優(yōu)先了。
然后我們?yōu)檩斎肟蜃鲆恍┢渌男Ч?，如提示文字，icon、標簽文字等。
我們給上面的代碼新增decoration屬性，設置相關屬性，可以發(fā)現當我們的TextField獲得焦點時，圖標會自動變色，提示文字會自動上移。
還可以看到 我加了一個onChanged。
onChanged是每次輸入框內每次文字變更觸發(fā)的回調，onSubmitted是用戶提交而觸發(fā)的回調。
每當用戶改變輸入框內的文字，都會在控制臺輸出現在的字符串.與onSubmitted用法相同.
接下來，我們實現一個簡單的登錄頁面:
/*
* 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。
在邏輯上，每當我們點擊下面的按鈕都會判斷用戶名密碼是否符合要求，并且使用控制器清空已經輸入的用戶名和密碼。
當用戶輸入的手機號碼不是11位的時候提示手機號碼格式錯誤，
當用戶沒有輸入密碼時，提示填寫密碼，
用戶名和密碼符合要求時提示登錄成功。
我這里登錄成功之后還調了一個方法：phoneController.clear() 清空了用戶名輸入框中的內容。
代碼的邏輯很簡單。關于TextField的其他用法就不在一一介紹了，有興趣的小伙伴可以自己嘗試下.
使用decoration美化輸入框
先看一下效果：
代碼：
TextField(
controller: accountController,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: '請輸入賬號',
labelText: '左上角',
prefixIcon: Icon(Icons.person),
),
)
可以看到，我先添加了一個decoration屬性.
decoration屬性介紹:
- border：增加一個邊框，
- hintText：未輸入文字時，輸入框中的提示文字，
- prefixIcon：輸入框內側左面的控件，
- labelText：一個提示文字。輸入框獲取焦點/輸入框有內容 會移動到左上角，否則在輸入框內，labelTex的位置.
- suffixIcon: 輸入框內側右面的圖標.
- icon : 輸入框左側添加個圖標
在多個輸入框內切換焦點
介紹一下onEditingComplete這個方法:
當用戶提交可編輯內容時調用(例如，用戶按下鍵盤上的“done”按鈕)。
onEditingComplete的默認實現根據情況執(zhí)行2種不同的行為:
- 當完成操作被按下時，例如“done”、“go”、“send”或“search”，用戶的內容被提交給[controller]，然后焦點被放棄。
- 當按下一個未完成操作(如“next”或“previous”)時，用戶的內容被提交給[controller]，但不會放棄焦點，因為開發(fā)人員可能希望立即將焦點轉移到[onsubmit]中的另一個輸入小部件。
我們有時候會需要這樣的情況, 比如一個登錄頁面, 需要輸入賬號和密碼 , 自然輸入完賬號就要輸入密碼了 , 我們在輸入賬號結束的時候 , 讓密碼輸入框獲取到焦點 .
看一下代碼:
...
FocusNode secondTextFieldNode = FocusNode();
...
Column(
children: <Widget>[
TextField(
/* onChanged: (text) {
value = text;
print(value);
},*/
autofocus: false, //是否自動獲取焦點
controller: _textController,
decoration: InputDecoration(
suffixIcon: Icon(Icons.chevron_right), //輸入框內右側圖標
icon: Icon(Icons.person), //輸入框左側圖標
prefixIcon: Icon(Icons.skip_previous), //輸入框內左側圖標
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),
方法來讓第二個輸入框請求獲取焦點,
當然你也可以添加個按鈕 , 點擊按鈕執(zhí)行這個方法來實現切換焦點的功能.
keyboardType
TextField成為焦點時顯示的鍵盤類型。
TextField( keyboardType: TextInputType.number, ),
類型是：
- TextInputType.text（普通完整鍵盤）
- TextInputType.number（數字鍵盤）
- TextInputType.emailAddress（帶有“@”的普通鍵盤）
- TextInputType.datetime（帶有“/”和“：”的數字鍵盤）
- TextInputType.multiline（帶有選項以啟用有符號和十進制模式的數字鍵盤）
TextInputAction
更改TextField的textInputAction可以更改鍵盤本身的操作按鈕。
TextField( textInputAction: TextInputAction.search, ),
這會導致“完成”按鈕被“搜索”按鈕替換：
TextCapitalization
TextField提供了一些有關如何使用戶輸入中的字母大寫的選項。
TextCapitalization.sentences : 這是我們期望的正常類型的大寫，每個句子的首字母大寫。
TextCapitalization.characters:大寫句子中的所有字符。
TextCapitalization.words : 將每個單詞的首字母大寫。
更改TextField中的光標
可以直接從TextField小部件自定義游標。
可以更改角落的光標顏色，寬度和半徑。
例如，這里我沒有明顯的原因制作一個圓形的紅色光標。
TextField( cursorColor: Colors.red, cursorRadius: Radius.circular(16.0), cursorWidth: 16.0, ),
控制TextField中的大小和最大長度
TextFields可以控制在其中寫入的最大字符數，最大行數并在鍵入文本時展開。
TextField( maxLength: 4, ),
通過設置maxLength屬性，將強制執(zhí)行最大長度，并且默認情況下會將計數器添加到TextField。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了深入了解Android?IO的底層原理，IO有緩沖與非緩沖?IO、直接與非直接?IO、阻塞與非阻塞?IO、同步與異步?IO等分類，具體詳情感興趣的小伙伴可以參考下面文章內容2022-06-06
反射，簡單來說，是一種在運行時動態(tài)地訪問對象屬性和方法的方式，而不需要事先確定這些屬性是什么。下面這篇文章主要給大家介紹了關于Kotlin中反射機制的相關資料，需要的朋友可以參考下2018-11-11
本文將詳細介紹android上的MD5和RSA的加解密實現代碼分享,需要了解更多的朋友可以參考下2012-12-12
Android自定義View實現簡單的圓形Progress效果
這篇文章主要介紹了Android自定義View實現簡單的圓形Progress效果的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
這篇文章主要為大家詳細介紹了RecyclerView上拉加載封裝代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
TextView顯示文本控件兩種方法 TextView顯示link的方法
這篇文章主要為大家詳細介紹了TextView顯示文本控件兩種方法，TextView顯示link的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
android中SwipeRefresh實現各種上拉，下拉刷新示例
這篇文章主要介紹了android中SwipeRefresh實現各種上拉，下拉刷新示例，非常具有實用價值，需要的朋友可以參考下。2017-03-03
這篇文章主要介紹了萬能RecyclerView分割線的相關代碼，告訴大家如何準確調用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
Flutter使用Provider進行狀態(tài)管理的實現
Provider是Flutter中一個非常流行的狀態(tài)管理工具,它可以幫助開發(fā)者更有效地管理Widget樹中的數據,本文主要介紹了Flutter使用Provider進行狀態(tài)管理的實現,感興趣的可以了解一下2024-04-04
這篇文章主要介紹了flutter 實現彈出窗點擊下拉欄微信右上角彈出窗功能,這段代碼使用的是PopupRoute這個路由類進行實現 的，分步驟通過實例代碼講解的非常詳細，需要的朋友可以參考下2021-05-05