Flutter 控件 TextField、EditableText、TextInput

TextInput

TextField是文本输入组件，即输入框，常用组件之一。基本用法：

TextField()

 decoration 是TextField组件的装饰（外观）参数，类型是InputDecoration。

icon 显示在输入框的前面，用法如下：

TextField(
  decoration: InputDecoration(
    icon: Icon(Icons.person),
  ),
)

如果这个圆角不喜欢的话，也可以改一下的，比如：

              TextField(
                decoration: InputDecoration(
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(30)),
                  ),
                ),
              ),

 

 

labelText labelStyle hasFloatingPlaceholder

当输入框是空而且没有焦点时，labelText显示在输入框上边，当获取焦点或者不为空时labelText往上移动一点，

TextField(
  decoration: InputDecoration(
    labelText: '姓名：',
    labelStyle: TextStyle(color:Colors.red)
  ),
)

 helperText helperStyle helperMaxLines

helperText显示在输入框的左下部，用于提示用户，

TextField(
  decoration: InputDecoration(
    hintText: '请输入用户名',
    hintStyle: TextStyle(color: Colors.grey),
    hintMaxLines: 1
  ),
)

 errorText显示在输入框的左下部，默认字体为红色，用法如下：

TextField(
  decoration: InputDecoration(
    errorText: '用户名输入错误',
    errorStyle: TextStyle(fontSize: 12),
    errorMaxLines: 1,
    errorBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.red)),
  ),
)

 输入框TextField输入验证代码示例如下：

class MyHomePage extends StatefulWidget {
  @override  
  MyHomePageState createState() {
    return new MyHomePageState();
  }
}
   
class MyHomePageState extends State<MyHomePage> {
  final _text = TextEditingController();
  bool _validate = false;
 
  @override  
  void dispose() {
    _text.dispose();
    super.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TextField演示'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('错误提示信息'),
            TextField(
              controller: _text,
              decoration: InputDecoration(
                labelText: '输入信息',
                errorText: _validate ? '输入不能为空' : null,
              ),
            ),
            RaisedButton(
              onPressed: () {
                setState(() {
                  _text.text.isEmpty ? _validate = true : _validate = false;
                });
              },
              child: Text('提交'),
              textColor: Colors.white,
              color: Colors.blueAccent,
            )
          ],
        ),
      ),
    );
  }
}

prefix系列的组件是输入框前面的部分，用法如下：

TextField(
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.person)
  ),
)

注意prefix和icon的区别，icon是在输入框边框的外部，而prefix在里面，效果如下：

 suffix和prefix相反，suffix在输入框的尾部，用法如下：

TextField(
  decoration: InputDecoration(
      suffixIcon: Icon(Icons.person)
  ),
)

counter组件统计输入框文字的个数，counter仅仅是展示效果，不具备自动统计字数的功能， 自动统计字数代码如下：

 

var _textFieldValue = '';
TextField(
  onChanged: (value){
    setState(() {
      _textFieldValue = value;
    });
  },
  decoration: InputDecoration(
    counterText: '${_textFieldValue.length}/32'
  ),
)

 filled 为true时，输入框将会被fillColor填充，仿QQ登录输入框代码如下：

Container(
  height: 60,
  width: 250,
  child: TextField(
    decoration: InputDecoration(
      fillColor: Color(0x30cccccc),
      filled: true,
      enabledBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Color(0x00FF0000)),
          borderRadius: BorderRadius.all(Radius.circular(100))),
      hintText: 'QQ号/手机号/邮箱',
      focusedBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Color(0x00000000)),
          borderRadius: BorderRadius.all(Radius.circular(100))),
    ),
  ),
)

 controller是输入框文本编辑的控制器，可以获取TextField的内容、设置TextField的内容，下面将输入的英文变为大写：

TextEditingController _controller;

@override
void initState() {
  super.initState();
  _controller = TextEditingController()
    ..addListener(() {
      //获取输入框的内容，变为大写
      _controller.text = _controller.text.toUpperCase();

    });
}

@override
Widget build(BuildContext context) {
  return TextField(
    controller: _controller,
  );
}

@override
dispose() {
  super.dispose();
  _controller.dispose();
}

有时输入框后面带有“清除”功能，需要controller来实现。如果需要2个TextField的内容进行同步，只需要给2个TextField设置同一个controller即可实现。

keyboardType

text：通用键盘。

multiline：当TextField为多行时（maxLines设置大于1），右下角的为“换行” 按键。

number：数字键盘。

phone：手机键盘，比数字键盘多"*"和 “#”。

datetime：在ios上和text一样，在android上出现数字键盘、":"和 “-”。

emailAddress：邮箱键盘，有"@" 和 "."按键。

url：url键盘，有"/" 和 "."按键。

visiblePassword：既有字幕又有数字的键盘。

cursor表示光标，用法如下：

TextField(
  showCursor: true,
  cursorWidth: 3,
  cursorRadius: Radius.circular(10),
  cursorColor: Colors.red,
)

 将输入框设置为密码框，只需obscureText属性设置true即可，用法如下：

TextField(
  obscureText: true,
)

通过inputFormatters可以限制用户输入的内容，比如只想让用户输入字符，设置如下：

TextField(
  inputFormatters: [
    WhitelistingTextInputFormatter(RegExp("[a-zA-Z]")),
  ],
)

onChanged是当内容发生变化时回调，onSubmitted是点击回车或者点击软键盘上的完成回调，onTap 点击输入框时回调，用法如下：

TextField(
  onChanged: (value){
    print('onChanged:$value');
  },
  onEditingComplete: (){
    print('onEditingComplete');
  },
  
  onTap: (){
    print('onTap');
  },
)

异常

软键盘弹出之后遮盖

软键盘弹出之后高度溢出

解决办法 ：用滑动组件包裹起来（ListView等），这样软键盘弹出的时候，输入框也会自动向上滑。