Flutter中TextField使用详情

1.TextField常用的属性

2.decoration设置输入框

3.style

void main() {
  runApp( MyApp());
}
 
class MyApp extends StatelessWidget {
 
   MyApp({Key? key}) : super(key: key);
 
    //当文本框需要使用到初始值的话需要使用到TextEditingController.否则的话可以直接声明一个变量用来接收onChanged: (value) {}里面的value值.
     TextEditingController controller =new TextEditingController();
 
void dispose() {
  //需要进行释放
  controller.dispose();
  super.dispose();
}
 
@override
void initState() {
 
controller.text="原始值";
//文本框的值有变化的时候,就会执行该监听器方法
controller.addListener(
  (){
 
  }
);
 
//控制 初始化的时候鼠标保持在文字最后面
    controller=TextEditingController.fromValue(
      //用来初始化显示
      TextEditingValue(
        //用来设置文本内容
        text:"preText",
        //设置光标的位置
        selection: TextSelection.fromPosition(
          //用来设置文本的位置
          TextPosition(
            affinity: TextAffinity.downstream,
            //光标向后移动的长度
            offset: 3,
          ),
        ),
      )
 
     );
 
}
   
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter App"),
          actions: [
            ElevatedButton(
                onPressed: () {
                  print(controller.text);//输入框里面的内容
 
                },
                child: Text("保存")),
          ],
        ),
        /**
         * TextField使用详情
         * 1.TextField组件基本使用以及常用属性配置;
         * 2.TextField边框decoration详细综述;
         * 3.TextField的帮助提示文本配置;
         * 4.TextField的TextEditingController;
         * 5.TextField的焦点相关配置;
         * 6.TextField的输入光标的相关配置.
         */
        body: Center(
          child: TextField(
            maxLength: 30, //文本的输入长度
            maxLines: 1, //文本输入的行数
            textAlign: TextAlign.left, //输入框内内容剧中对齐
            textDirection: TextDirection.ltr, //文字从左向右
            autofocus: false, //自动获取焦点
            obscureText: false, //密文输入(如果是密文输入的话,maxLines只能是1).
            enabled: true, //输入框是否可以输入
            onChanged: (value) {}, //当文本发生改变的时候,回调的函数
            inputFormatters: [], //限制输入的方式(文本/数字)
            keyboardType: TextInputType.phone, //设置键盘格式
            decoration: const InputDecoration(
              hintText: "请输入用户名", //占位符
              labelText: "输入中...", //输入框没有焦点的时候显示在输入框里面,如果输入框获取焦点后就显示在输入框边框线上面
              helperText: "帮助提示语", //显示在输入框下面
              errorText: "错误文本提示", //和helperText显示的文字位置一致,两者相互重叠
              prefixText: "用户名:", //输入框获取焦点的时候才会显示出来,在输入框的最前面,光标在该文字后面
              prefixIcon: Icon(Icons.call), //前面的小图标
              suffixText: "后面", //输入框获取焦点的时候才会显示出来,在输入框的最后面
              counterText: "计数", //输入框右下角显示的文字,默认和最大字数是相重叠的
              //配置可编辑状态时候的样式
              enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(10)),
                  borderSide: BorderSide(
                    color: Colors.black, //设置边框颜色
                    width: 2, //设置边框宽度
                  )), //设置边框的样式
              //focusedBorder: (),//获取焦点时候的配置
              //disabledBorder: (),//配置不可编辑状态的样式
            ),
 
            style: const TextStyle(
              color: Colors.purple, //设置文字颜色
              fontSize: 16, //设置文字大小
              /**
               * none:没有
               * underline:下划线
               * overline:上划线
               * lineThrough:删除线
               */
              decoration: TextDecoration.none,
              decorationColor: Colors.red, //设置下划线的颜色
              /**
               * decorationStyle设置下划线的样式
               * solid:实线
               * double:两条实线
               * dotted:
               * dashed:虚线
               * wavy:波浪线
               */
              decorationStyle: TextDecorationStyle.wavy,
              fontWeight: FontWeight.w600, //设置文字为粗体,
              fontStyle: FontStyle.italic, //设置为斜体
              letterSpacing: 3, //设置文字之间间距
              wordSpacing: 2, //设置单词之间的间距
              height: 1, //控制行高倍数
              backgroundColor: Colors.yellow, //设置输入框背景颜色
            ),
          ),
        ),
      ),
    );
  }
}