如需转载，请注明出处：Flutter学习笔记（21）--TextField文本框组件和Card卡片组件

今天来学习下TextField文本框组件和Card卡片组件。

只要是应用程序就少不了交互，基本上所有的应用程序都会有用户名、密码输入框，搜索框等等，前面我们有写过一篇基于Form表单的输入功能，今天来看一下TextField文本框组件，文本输入是最常见的一种交互方式，TextField组件就是用来做文本输入的组件。注意这个要和Text组件区分开来，Text组件主要用于显示文本，并不能接受输入文本。

• TextField文本框组件

TextField组件构造方法：

const TextField({
Key key,
// controller是TextField的控制器，当TextField在编辑时回调，
// 如果不设置则TextField默认创建自己的controller，重点是如果两个TextField使用一个controller，那么在一个中输入内容，另一个会同步
this.controller,
this.focusNode,//焦点控制
this.decoration = const InputDecoration(),//TextField装饰器，主要用于控制TextField的外观及提示等
TextInputType keyboardType,//键盘类型，有number、phone、emailAddress、text等
this.textInputAction,//键盘事件类型，有send、search等
this.textCapitalization = TextCapitalization.none,//
this.style,//输入文本的样式
this.strutStyle,
this.textAlign = TextAlign.start,//对齐方式，默认开始位置对齐
this.textDirection,//文本方向，默认从左到右
this.autofocus = false,//是否自动获得焦点，默认false
this.obscureText = false,//文本内容是否加密，默认false
this.autocorrect = true,//是否自动更正
this.maxLines = 1,//最大行数
this.minLines,//最小行数
this.expands = false,
this.maxLength,//最大长度
this.maxLengthEnforced = true,//超过最大长度输入，是否提示错误，默认true，如果设置了false，可以继续输入但是会提示错误
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),
this.dragStartBehavior = DragStartBehavior.start,
this.enableInteractiveSelection,
this.onTap,//点击控件时调用
this.buildCounter,
this.scrollPhysics,
})

简单实现一个登陆的功能，限制用户名输入框输入的内容长度为10位，不到10位长度，给toast提示，Demo示例：

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget{
  final TextEditingController _useController = new TextEditingController();
  final TextEditingController _pwdController = new TextEditingController();
  @override
  Widget build(BuildContext context) {
    _useController.addListener((){
      Fluttertoast.showToast(msg: '您输入的内容为：${_useController.text}');
    });
    return new MaterialApp(
      title: 'TextField And Card Demo',
      debugShowCheckedModeBanner: false,
      home: new Scaffold(
        appBar: AppBar(
          title: new Text('TextField And Card Demo'),
        ),
        body: new Column(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(left: 20,top: 0,right: 20,bottom: 0),
              child: TextField(
                  controller: _useController,//绑定controller
                  maxLines: 1,//最多一行
                  maxLength: 10,//最多输入10个字符
                  autofocus: true,//自动获取焦点
                  textAlign: TextAlign.left,//从左到右对齐
                  style: new TextStyle(color: Colors.white,fontSize: 20.0),//输入内容颜色和字体大小
                  cursorColor: Colors.deepPurple,//光标颜色
                  keyboardType: TextInputType.phone,
                  decoration: InputDecoration(
                    //添加装饰效果
                    filled: true,//背景是否填充
                    fillColor: Colors.redAccent,//添加黄色填充色（filled: true必须设置，否则单独设置填充色不会生效）
                    helperText: '用户名',
                    prefixIcon: Icon(Icons.person_add),//左侧图标
                    suffixText: '用户名',//右侧文本提示
                    suffixStyle: new TextStyle(fontSize: 20),//右侧提示文案字体大小
                    hintText: 'input user name',//hint提示文案
                    hintSty