18720358503 在线客服 人才招聘 返回顶部
企业动态 技术分享 行业动态

Flutter控制之TextField详细说明

2021-02-11分享 "> 对不起,没有下一图集了!">
它是我喜欢模版网摘抄自简书的一篇对flutter TextFiled文字键入框十分详尽的一一篇文章:
结构方式
const TextField({
 Key key,
 this.controller, ////操纵器,操纵TextField文本
 this.focusNode,
 this.decoration = const InputDecoration(), //键入器装饰设计
 TextInputType keyboardType, ////键入的种类
 this.textInputAction,
 this.textCapitalization = TextCapitalization.none,
 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, //文本更改开启
 this.onEditingComplete,
 this.onSubmitted, ////文本递交开启(电脑键盘功能键)
 this.inputFormatters,
 this.enabled,
 this.cursorWidth = 2.0,
 this.cursorRadius,
 this.cursorColor,
 this.keyboardAppearance,
 this.scrollPadding = const EdgeInsets.all(20.0),
})
1.decoration
键入器装饰设计
const InputDecoration({
 this.icon,
 this.labelText,
 this.labelStyle,
 this.helperText,
 this.helperStyle,
 this.hintText,
 this.hintStyle,
 this.errorText,
 this.errorStyle,
 this.errorMaxLines,
 this.isDense,
 this.contentPadding,
 this.prefixIcon,
 this.prefix,
 this.prefixText,
 this.prefixStyle,
 this.suffixIcon,
 this.suffix,
 this.suffixText,
 this.suffixStyle,
 this.counterText,
 this.counterStyle,
 this.filled,
 this.fillColor,
 this.errorBorder,
 this.focusedBorder,
 this.focusedErrorBorder,
 this.disabledBorder,
 this.enabledBorder,
 this.border,
 this.enabled = true,
 this.semanticCounterText,
})
①labelText
labelText: '你要键入名字',
labelStyle: new TextStyle( fontSize: 13.0, color: ent),
实际效果如图所示:
无聚焦点

有聚焦点

②hintText
 和android一切正常hint一样
hintText: '请键入名字',
hintStyle: new TextStyle(fontSize: 13.0, color: Colors.pink),
如图所示

③errorText和helperText
 提醒性的文字
labelText: '你要键入名字',
labelStyle: new TextStyle( fontSize: 13.0, color: ent),
helperText: '嘻嘻嘻',

④icon
 icon能够是内置的Icon还可以是自身的照片
// icon: new Image.asset('images/goods_image.png', width: 30.0, height: 30.0,),
 icon: new Icon(Icons.person),
 labelText: '你要键入名字',
 labelStyle: new TextStyle(fontSize: 13.0, color: ent),
 helperText: '嘻嘻嘻',

⑤contentPadding
 內容的行高,默认设置是有一个行高的
// icon: new Image.asset('images/goods_image.png', width: 30.0, height: 30.0,),
 icon: new Icon(Icons.person),
 labelText: '你要键入名字',
 labelStyle: new TextStyle(fontSize: 13.0, color: ent),
 helperText: '嘻嘻嘻',
 contentPadding: new EdgeInsets.all(0.0)

⑥prefixIcon
在上边的编码基本以上加下边的编码
prefixIcon: new Icon(Icons.people)

⑦prefixText(跟上面一样---icon换为文字)
 prifix(跟上面一样一样,他的主要参数是widget,能够是文字,照片,照片文字的组成container,自身随意组成)
⑧suffixText,suffixIcon,suffix (后缀名,使用方法同prefix一样)
⑨border
 InputBorder.none--------------无border,下横线也没有了
 UnderlineInputBorder--------下横线
 OutlineInputBorder-----------周边都是有border,一个框

2. TextInputType keyboardType
 电脑键盘键入种类(数据,文字等各种各样种类)
3. controller
 文字操纵器
import 'package:flutter/material.dart';
class FourPage extends StatelessWidget {
 //手机上号的操纵器
 TextEditingController phoneController = TextEditingController();
 //登陆密码的操纵器
 TextEditingController passController = TextEditingController();
 @override
 Widget build(BuildContext context) {
 return new Scaffold(
 appBar: new AppBar(title: new Text('第四个页面'),),
 body: new Container(
// color: Colors.pink,
 margin: new EdgeInsets.all(10.0),
 child: new 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({'手机上号': phoneController.text, '登陆密码': passController.text});
 phoneController.clear();
 }


另外,Row包括Textfield时不正确的处理方法

Flutter TextField焦点问题 Flutter TextField聚焦点难题 网页页面模版 大家在应用TextField的情况下,有时候候是根据按键给它改动值的,例如 这时候候便会有一个很坑的难题,你点完按键键入框的值更改后,聚焦点会全自动移动到最前端开发,这时候候再去键入得话,键入


本站內容假如沒有标明出處,全部权均归本网站,出示完全免费免费下载使用,但不可用以商业服务赢利。假如标明出處,则来源于于互连网,本网站不做商业服务主要用途。假如本网站有內容侵害到您的利益,请致函网站站长电子邮箱,本网站当马上删掉。

联络大家
"> 对不起,没有下一图集了!">
在线咨询