Flutter学习第⼆课-基础组件TextFormField和From
/*
TextFormField({
Key key,
controller,//常⽤于赋值和取值操作
String initialValue,
FocusNode focusNode,//⽤于监听焦点状态
InputDecoration decoration = const InputDecoration(), //输⼊框的装饰器，⽤来修改外观
TextInputType keyboardType,//设置输⼊类型，不同的输⼊类型键盘不⼀样
TextCapitalization textCapitalization = ,//开启键盘选择⼤写或⼩写
enum TextCapitalization {
words,//默认为每个单词的第⼀个字母使⽤⼤写键盘。
luyouqi
ntences,//默认为每个句⼦的第⼀个字母使⽤⼤写键盘。
characters,//每个字符默认使⽤⼤写键盘。
none,// 默认为⼩写键盘。
}
TextInputAction textInputAction, //⽤于控制键盘动作（⼀般位于右下⾓，默认是完成）
TextStyle style,//输⼊的⽂本样式
StrutStyle strutStyle,
TextDirection textDirection,//输⼊的⽂字排列⽅向，⼀般不会修改这个属性
TextAlign textAlign = TextAlign.start, //输⼊的⽂本位置
TextAlignVertical textAlignVertical,
bool autofocus = fal,//是否⾃动获取焦点
bool readOnly = fal,//⽂本是否可以更改。当设置为true时，⽂本不能通过任何快捷键或键盘操作进⾏修改。⽂本仍然是可选择的。
ToolbarOptions toolbarOptions,//默认⼯具栏选项，当⽤户右键单击或长按EditableText时将显⽰该菜单。它包括⼏个选项：剪切，复制，粘贴和全选。 bool showCursor,//是否显⽰光标
bool obscureText = fal,//是否隐藏正在编辑的⽂本（密码）
bool autocorrect = true,//是否启⽤⾃动效验
bool enableSuggestions = true,//是否在输⼊时给出建议
bool autovalidate = fal,
bool maxLengthEnforced = true,//配合maxLength⼀起使⽤，在达到最⼤长度时是否阻⽌输⼊
int maxLines = 1,//输⼊⽂本最⼤显⽰⾏数
int minLines,//输⼊⽂本最⼩显⽰⾏数
bool expands = fal,
int maxLength,//输⼊⽂本可输⼊最长字符长度
ValueChanged<String> onChanged,//输⼊⽂本发⽣变化时的回调
GestureTapCallback onTap,//单击输⼊⽂本框时回调
VoidCallback onEditingComplete,//点击键盘完成按钮时触发的回调，该回调没有参数，(){}
ValueChanged<String> onFieldSubmitted,//当⽤户指⽰他们已完成字段中⽂本的编辑时调⽤。
FormFieldSetter<String> onSaved,//配合Form使⽤由_formKey.currentState.save()；触发保存数据，赋值操作。
FormFieldValidator<String> validator,//配合Form使⽤由_formKey.currentState.validate()；触发，常⽤检查否错误，并返回提⽰⽤户，返回内容赋值给 error Text
List<TextInputFormatter> inputFormatters,//输⼊⽂本规则限制
[
WhitelistingTextInputFormatter(RegExp("[a-z]")),//只允许输⼊⼩写的a-z
BlacklistingTextInputFormatter(RegExp("[a-z]"))，除了⼩写的a-z都可以输⼊
LengthLimitingTextInputFormatter(5)一抹色彩
]//限制输⼊字符长度
bool enabled = true,
double cursorWidth = 2.0,//光标的宽度
憨八龟的故事Radius cursorRadius,//光标的圆⾓
Color cursorColor, //光标的颜⾊
Brightness keyboardAppearance,//键盘外观
EdgeInts scrollPadding = const EdgeInts.all(20.0),
bool enableInteractiveSelection = true,//如果为真，则长按此⽂本字段将选择⽂本并显⽰剪切/复制/粘贴菜单，⽽轻击将移动⽂本插⼊符号。[…]
InputCounterWidgetBuilder buildCounter,
})
InputDecoration({
this.icon, //位于装饰器外部和输⼊框前⾯的图⽚
this.labelText, //⽤于描述输⼊框，例如这个输⼊框是⽤来输⼊⽤户名还是密码的，当输⼊框获取焦点时默认会浮动到上⽅，
this.labelStyle, // 控制labelText的样式，接收⼀个TextStyle类型的值
this.helperText, //辅助⽂本，位于输⼊框下⽅，如果errorText不为空的话，则helperText不会显⽰
this.helperStyle, //helperText的样式
this.hintText, //提⽰⽂本，位于输⼊框内部
this.hintStyle, //hintText的样式
this.hintMaxLines, //提⽰信息最⼤⾏数
this.hasFloatingPlaceholder = true, //labelText是否浮动，默认为true，修改为fal则labelText在输⼊框获取焦点时不会浮动且不显⽰
this.isDen, //改变输⼊框是否为密集型，默认为fal，修改为true时，图标及间距会变⼩
this.prefixIcon, //位于输⼊框内部起始位置的图标。
this.prefix, //预先填充的Widget，跟prefixText同时只能出现⼀个
this.prefixText, //预填充的⽂本，例如⼿机号前⾯预先加上区号等
this.prefixStyle, //prefixText的样式
this.suffixIcon, //位于输⼊框后⾯的图⽚，例如⼀般输⼊框后⾯会有个眼睛，控制输⼊内容是否明⽂
this.suffix, //位于输⼊框尾部的控件，同样的不能和suffixText同时使⽤
this.suffixText,//位于尾部的填充⽂字
this.suffixStyle, //suffixText的样式
马伊琍发型图片
this.filled, //如果为true，则输⼊使⽤fillColor指定的颜⾊填充
this.fillColor, //相当于输⼊框的背景颜⾊
this.focudBorder, //输⼊框有焦点时的边框，如果errorText不为空的话，该属性⽆效
this.focudErrorBorder, //errorText不为空时，输⼊框有焦点时的边框
this.disabledBorder, //输⼊框禁⽤时显⽰的边框，如果errorText不为空的话，该属性⽆效
雾灯图标this.border, //正常情况下的border
this.manticCounterText,
this.alignLabelWithHint,
})
*/折指
import'package:flutter/material.dart';
import'package:flutter/rvices.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
static const String _title ='TextFormField Sample';
Widget build(BuildContext context){
return MaterialApp(
title: _title,
home:Scaffold(
appBar:AppBar(title:const Text(_title)),
body:MyStatefulWidget(),
),
);
}
}
class MyStatefulWidget extends StatefulWidget { MyStatefulWidget({Key key}):super(key: key);
@override
_MyStatefulWidgetState createState()=>_MyStatefulWidgetState(); }
class _MyStatefulWidgetState extends State<MyStatefulWidget>{
final _formKey = GlobalKey<FormState>();
TextEditingController _unameController =new TextEditingController(); TextEditingController _pwdController =new TextEditingController();
@override
Widget build(BuildContext context){
return Form(
key: _formKey,
child:Column(
crossAxisAlignment: CrossAxisAlignment.start,
children:<Widget>[
TextFormField(
textCapitalization: ,
decoration:const InputDecoration(
icon:Icon(Icons.person),
labelText:"labelText",
helperText:"helperText",
hintText:"hintTextt",
errorText:"errorText",
suffixIcon:ve_red_eye),
suffixText:"suffixText",
counterText:"counterText",
),
onTap:(){
print("onTap：我被点击了");
},
onChanged:(value){
print("onChanged：⽂本更改为${value}");
},
onEditingComplete:(){
print("onEditingComplete：键盘点击了发送按键");
},
onSaved:(value){
if(!value.isEmpty){
print("onSaved：赋值数据");
_ = value;
}
_ ="";
},
validator:(value){
if(value.isEmpty){
return'validator：Plea enter some text';
}
print("validator：检查⽂本");
return null;
inputFormatters:[
WhitelistingTextInputFormatter(RegExp("[a-z]")),
LengthLimitingTextInputFormatter(12),
],
),
Container(
child:TextFormField(
obscureText:true,
向日葵作用textCapitalization: ,
decoration:const InputDecoration(
icon:Icon(Icons.lock),
labelText:"labelText",
helperText:"helperText",
hintText:"hintTextt",
suffixIcon:ve_red_eye),
suffixText:"suffixText",
counterText:"counterText",
border: //隐藏下划线，并⾃定义下划线
),
onTap:(){
print("onTap：我被点击了");
},
onChanged:(value){
print("onChanged：⽂本更改为${value}");
},
onEditingComplete:(){
print("onEditingComplete：键盘点击了发送按键");
},
小鸭子的简笔画
onSaved:(value){
if(!value.isEmpty){
print("onSaved：赋值数据");
_ = value;
}
_ ="";
},
validator:(value){
im().length !=6){
return'请输⼊6位有效数字为密码';
}
print("validator：检查⽂本");
return null;
},
inputFormatters:[
WhitelistingTextInputFormatter(RegExp("[0-9]")),
LengthLimitingTextInputFormatter(6),
],
),
),
Row(
children:<Widget>[
Padding(
padding:const EdgeInts.symmetric(vertical:5.0,horizontal:5.0), child:RaidButton(
onPresd:(){
if(_formKey.currentState.validate()){
print("数据有效");
}
_formKey.currentState.save();
},
child:Text('Submit'),
),
),
Padding(
padding:const EdgeInts.symmetric(vertical:5.0,horizontal:5.0),
child:RaidButton(
onPresd:(){
_();
},
child:Text('Ret'),
),
),
Padding(
padding:const EdgeInts.symmetric(vertical:5.0,horizontal:5.0),
child:RaidButton(
onPresd:(){
print("⽤户名为：${_}，密码为：${_}");
tState((){});
},
child:Text('输出'),
),
),
],
),
Text("⽤户名为：${_}，密码为：${_}"),
],
),
)
;
}
}
