TextField

简介

一句话来讲，TextField是在flutter应用开发中用于 用户输入文本框。

简单使用

首先看下TextField常用属性

TextField(
    ///是否可编辑
    enabled: isEnable,
    ///焦点获取
    focusNode: focusNode,
    ///用来配置 TextField 的样式风格
    decoration: InputDecoration(
        ///设置输入文本框的提示文字
        ///输入框获取焦点时 并且没有输入文字时
        hintText: "请输入用户名",
        ///设置输入文本框的提示文字的样式
        hintStyle: const TextStyle(color: Colors.grey,textBaseline: TextBaseline.ideographic,),
        ///输入框内的提示 输入框没有获取焦点时显示
        labelText: "用户名",
        labelStyle: const TextStyle(color: Colors.blue),
        ///显示在输入框下面的文字
        helperText: "这里是帮助提示语",
        helperStyle: const TextStyle(color: Colors.green),
        ///显示在输入框下面的文字
        ///会覆盖了 helperText 内容
        errorText: "这里是错误文本提示",
        errorStyle: const TextStyle(color: Colors.red),
        ///输入框获取焦点时才会显示出来 输入文本的前面
        prefixText: "prefix",
        prefixStyle: const TextStyle(color: Colors.deepPurple),
        ///输入框获取焦点时才会显示出来 输入文本的后面
        suffixText: "suf ",
        suffixStyle: const TextStyle(color: Colors.black),
        ///文本输入框右下角显示的文本
        ///文字计数器默认使用
        counterText: "count",
        counterStyle:TextStyle(color: Colors.deepPurple[800]),
        ///输入文字前的小图标
        prefixIcon: const Icon(Icons.phone),
        ///输入文字后面的小图标
        suffixIcon: const Icon(Icons.close),
        ///与 prefixText 不能同时设置
        //                prefix: Text("A") ,
        /// 与 suffixText 不能同时设置
        //                suffix:  Text("B") ,
        ///设置边框
        ///   InputBorder.none 无下划线
        ///   OutlineInputBorder 上下左右 都有边框
        ///   UnderlineInputBorder 只有下边框  默认使用的就是下边框
        border: const OutlineInputBorder(
            ///设置边框四个角的弧度
            borderRadius: BorderRadius.all(Radius.circular(10)),
            ///用来配置边框的样式
            borderSide: BorderSide(
                ///设置边框的颜色
                color: Colors.red,
                ///设置边框的粗细
                width: 2.0,
            ),
        ),
        ///设置输入框可编辑时的边框样式
        enabledBorder: const OutlineInputBorder(
            ///设置边框四个角的弧度
            borderRadius: BorderRadius.all(Radius.circular(10)),
            ///用来配置边框的样式
            borderSide: BorderSide(
                ///设置边框的颜色
                color: Colors.blue,
                ///设置边框的粗细
                width: 2.0,
            ),
        ),
        disabledBorder: const OutlineInputBorder(
            ///设置边框四个角的弧度
            borderRadius: BorderRadius.all(Radius.circular(10)),
            ///用来配置边框的样式
            borderSide: BorderSide(
                ///设置边框的颜色
                color: Colors.red,
                ///设置边框的粗细
                width: 2.0,
            ),
        ),
        ///用来配置输入框获取焦点时的颜色
        focusedBorder: const OutlineInputBorder(
            ///设置边框四个角的弧度
            borderRadius: BorderRadius.all(Radius.circular(20)),
            ///用来配置边框的样式
            borderSide: BorderSide(
                ///设置边框的颜色
                color: Colors.green,
                ///设置边框的粗细
                width: 2.0,
            ),
        ),
    ),
  )