在Flutter中TextField是一个文本输入组件

它可以直接使用

class MyApp1 extends StatefulWidget {const MyApp1({Key? key}) : super(key: key);@overrideState<MyApp1> createState() => _MyApp1State();
}class _MyApp1State extends State<MyApp1> {@overrideWidget build(BuildContext context) {return Column(children: [TextField()],);}
}

也可以配合属性使用完成改变点击前和点击后的下划线变化

class MyApp1 extends StatefulWidget {const MyApp1({Key? key}) : super(key: key);@overrideState<MyApp1> createState() => _MyApp1State();
}class _MyApp1State extends State<MyApp1> {@overrideWidget build(BuildContext context) {return Column(mainAxisAlignment: MainAxisAlignment.center,children: [TextField(decoration: InputDecoration(hintText: "文本",hintStyle: TextStyle(color: Colors.black.withOpacity(.2)),enabledBorder: UnderlineInputBorder(//文本输入前的状态borderSide: BorderSide(color: Colors.red.withOpacity(.2),//设置为红色)),focusedBorder: UnderlineInputBorder(//文本输入后的状态borderSide: BorderSide(color: Colors.blue.withOpacity(.2)//设置为蓝色
))),)],);}
}

点击前:

点击后:

 如果您需要它有一个初始的文字,

您可以这样做

获取TextField文本输入组件中文本输入的文本:

class MyApp1 extends StatefulWidget {const MyApp1({Key? key}) : super(key: key);@overrideState<MyApp1> createState() => _MyApp1State();
}var title = TextEditingController();//创建TextEditingController类型的值class _MyApp1State extends State<MyApp1> {@overrideWidget build(BuildContext context) {return Column(mainAxisAlignment: MainAxisAlignment.center,children: [TextField(controller: title,//获取值用于存放数据decoration: InputDecoration(hintText: "文本",hintStyle: TextStyle(color: Colors.black.withOpacity(.2)),enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.red.withOpacity(.2),)),focusedBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.blue.withOpacity(.2)))),),FlatButton(onPressed: () {print(title.text);//点击按钮将获取文本的值输出到控制台//这里注意,我们输出的时候需要在后面加上.text否则获取到的就不止是文本了},child: Text("点击获取文本输入值"))],);}
}

Flutter 中TextField详解相关推荐

  1. flutter中state详解

    State 在说到StatefulWidget之前,先说下State.State的作用有两点: 在widget构建的时候可以被同步读取: 在widget的生命周期中可能会被改变. State生命周期 ...

  2. 导出jar插件_Fluttify输出的Flutter插件工程详解

    系列文章: yohom:Fluttify输出的Flutter插件工程详解​zhuanlan.zhihu.com yohom:开发Flutter插件必备原生SDK->Dart接口生成引擎`Flut ...

  3. flutter 生命周期详解

    flutter 生命周期详解 简介 一.widget 生命周期 二.APP 生命周期 总结 简介 众所周知,程序是有生命周期的,那么flutter 的生命周期是什么呢? flutter 的生命周期大体 ...

  4. 函数中{}输出格式详解(C#)

    Console.WriteLine()函数中{}输出格式详解(C#) Console.WriteLine()函数的格式一直没怎么注意.今天同事问起Console.WriteLine({0:D3},a) ...

  5. Java中CAS详解

    转载自  Java中CAS详解 在JDK 5之前Java语言是靠synchronized关键字保证同步的,这会导致有锁 锁机制存在以下问题: (1)在多线程竞争下,加锁.释放锁会导致比较多的上下文切换 ...

  6. 【转】图形流水线中坐标变换详解:模型矩阵、视角矩阵、投影矩阵

    转自:图形流水线中坐标变换详解:模型矩阵.视角矩阵.投影矩阵_sherlockreal的博客-CSDN博客_视角矩阵 图形流水线中坐标变换详解:模型矩阵.视角矩阵.投影矩阵 图形流水线中坐标变换过程 ...

  7. oracle itl解析,oracle数据块dump文件中ITL详解

    oracle数据块dump文件中ITL详解 dump出Oracle block后,可以看到事物槽,包含有事物槽号(ITL),XID,UBA,FLAG,LCK,SCN. 本文主要讨论FLAG标记的规则, ...

  8. android中getSystemService详解

    原文地址:android中getSystemService详解作者:邹斌 http://blog.sina.com.cn/s/blog_71d1e4fc0100o8qr.html http://blo ...

  9. Oracle中CONCAT详解

    Oracle中CONCAT详解 1.什么是CONCAT 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写 ...

最新文章

  1. 【Netty】 异步任务调度 ( TaskQueue | ScheduleTaskQueue | SocketChannel 管理 )
  2. springboot 解决跨域问题
  3. Heartbeat+ipvsadm+ldirectord组建linux高可用集群
  4. VS2017创建Linux项目实现远程GDB调试
  5. 机器学习入门10 - 正则化:简单性(Regularization for Simplicity)
  6. 『软件工程13』浅谈面向对象方法,统一建模语言UML
  7. linux 怎么添加path环境变量,Linux下怎么添加和查看PATH环境变量
  8. 软件质量管理之困境与对策思考
  9. 设计模式之单例模式——Singleton
  10. 用java语言编写石头剪刀布获胜法_石头剪刀布Java实现
  11. Jumpserver代码规范
  12. windows上通过vnc连接虚拟机中linux系统
  13. mysql中用来取余数的函数是_MySQL 常用函数总结
  14. 【KSZ8863】KSZ8863交换机芯片的信息汇总与打板验证结果
  15. 希尔伯特变换产生负频率解决方法
  16. 神经网络与深度学习pdf下载
  17. 微信小程序图片上传功能(PHP后端)
  18. 面试题10:青蛙跳台阶
  19. 使用do文件进行仿真时出现“failed tofind ‘glbl’in hierarchical name ‘/glbl/GSR‘“的解决办法
  20. 浙江大学副教授杨洋——《Time2Graph:从图视角出发的时间序列建模》

热门文章

  1. 马云怒怼阿尔法狗,称搞阿尔法狗没意义,人工智能的意义在哪?
  2. 去港汇msn部门开会,混了顿午饭
  3. RabbitMQ——TTL队列/消息与死性队列
  4. 【VScode】 --- 代码片段
  5. NAT-T:IPsec穿越NAT之道
  6. 【AI风向标】LeCun、周志华、吴恩达、李开复等众神展望AI的2020年
  7. python中sleep的用法_python中sleep函数用法实例分析
  8. 循环神经网络 简易使用
  9. CodeIgniter开发实际案例-新闻网站
  10. c语言空中升级协议,BLE的空中升级(OTA)