Flutter TextField


简介

TextField 最常用的文本输入widget

  • 该 widget 作为文本输入框，可以接收用户以屏幕按键或者键盘输入的文本信息，该信息可以用于消息传递，搜索体验等
  • 用户修改文本信息时，Onchange会被调用，获取到最新的文本信息
  • 已知用户输入的字段文本输入完毕时（例如，通过按软键盘上的按钮确认输入完毕），该widget会调用onSubmitted回调

基本用法

参数控制默认的按钮和禁用按钮

  • 默认情况下，TextField 下方有一个下划线进行修饰。
  • 您可以使用decoration属性来控制该widget样式，例如通过添加标签或图标。如果将decoration属性设置为空，则将完全删除装饰，包括装饰引入的额外填充，以节省标签的空间。
  • 如果decoration属性是非null（这是默认的），文本字段需要它的父类是一个Material widget。当文本字段被点击时，会出发被点击的效果。
  • 若要将TextField和其他FormFild集成到Form中，请考虑使用TeTFrimeField。""";

进阶用法

实现稍微复杂点的效果，TextField 的输入以数字优先，为输入框做一些其他的效果，如提示文字，icon、标签文字等

  • 增加一个keyboardType属性，把keyboardType设置为 TextInputType.number ，让TextField获得焦点的时候弹出的键盘就变成了数字优先。
  • 新增decoration属性，设置相关属性，可以发现当我们的TextField获得焦点时，图标会自动变色，提示文字会自动上移。
  • onChanged是输入框内每次文字变更触发的回调方法，onSubmitted是用户提交而触发的回调方法。
  • 每当用户改变输入框内的文字，都会在控制台输出现在的字符串.与onSubmitted用法相同。

实例演示

import 'package:flutter/material.dart';

// 基本示例
class DefaultTextField extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  Container(
      padding: const EdgeInsets.all(30.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start, //文本是起始端对齐
        children: <Widget>[
          Text('下面是基本输入框：',
              style: TextStyle(fontSize: 15.5, height: 1.2, color: Colors.blue),
              textAlign: TextAlign.left),
          TextField()
        ],
      ),
    );
  }
}

/*
* 稍微复杂些的 TextField
* */
class CustomTextField extends StatelessWidget {
  void _textFieldChanged(String str) {
    print(str);
  }

  @override
  Widget build(BuildContext context) {
    return  Container(
        padding: const EdgeInsets.all(30.0),
        child: TextField(
          keyboardType: TextInputType.number,
          decoration: InputDecoration(
            contentPadding: EdgeInsets.all(10.0),
            icon: Icon(Icons.text_fields),
            labelText: '请输入你的姓名)',
            helperText: '请输入你的真实姓名',
          ),
          onChanged: _textFieldChanged,
          autofocus: false,
        ));
  }
}