Flutter 中TextField详解
在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详解相关推荐
- flutter中state详解
State 在说到StatefulWidget之前,先说下State.State的作用有两点: 在widget构建的时候可以被同步读取: 在widget的生命周期中可能会被改变. State生命周期 ...
- 导出jar插件_Fluttify输出的Flutter插件工程详解
系列文章: yohom:Fluttify输出的Flutter插件工程详解zhuanlan.zhihu.com yohom:开发Flutter插件必备原生SDK->Dart接口生成引擎`Flut ...
- flutter 生命周期详解
flutter 生命周期详解 简介 一.widget 生命周期 二.APP 生命周期 总结 简介 众所周知,程序是有生命周期的,那么flutter 的生命周期是什么呢? flutter 的生命周期大体 ...
- 函数中{}输出格式详解(C#)
Console.WriteLine()函数中{}输出格式详解(C#) Console.WriteLine()函数的格式一直没怎么注意.今天同事问起Console.WriteLine({0:D3},a) ...
- Java中CAS详解
转载自 Java中CAS详解 在JDK 5之前Java语言是靠synchronized关键字保证同步的,这会导致有锁 锁机制存在以下问题: (1)在多线程竞争下,加锁.释放锁会导致比较多的上下文切换 ...
- 【转】图形流水线中坐标变换详解:模型矩阵、视角矩阵、投影矩阵
转自:图形流水线中坐标变换详解:模型矩阵.视角矩阵.投影矩阵_sherlockreal的博客-CSDN博客_视角矩阵 图形流水线中坐标变换详解:模型矩阵.视角矩阵.投影矩阵 图形流水线中坐标变换过程 ...
- oracle itl解析,oracle数据块dump文件中ITL详解
oracle数据块dump文件中ITL详解 dump出Oracle block后,可以看到事物槽,包含有事物槽号(ITL),XID,UBA,FLAG,LCK,SCN. 本文主要讨论FLAG标记的规则, ...
- android中getSystemService详解
原文地址:android中getSystemService详解作者:邹斌 http://blog.sina.com.cn/s/blog_71d1e4fc0100o8qr.html http://blo ...
- Oracle中CONCAT详解
Oracle中CONCAT详解 1.什么是CONCAT 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写 ...
最新文章
- 【Netty】 异步任务调度 ( TaskQueue | ScheduleTaskQueue | SocketChannel 管理 )
- springboot 解决跨域问题
- Heartbeat+ipvsadm+ldirectord组建linux高可用集群
- VS2017创建Linux项目实现远程GDB调试
- 机器学习入门10 - 正则化:简单性(Regularization for Simplicity)
- 『软件工程13』浅谈面向对象方法,统一建模语言UML
- linux 怎么添加path环境变量,Linux下怎么添加和查看PATH环境变量
- 软件质量管理之困境与对策思考
- 设计模式之单例模式——Singleton
- 用java语言编写石头剪刀布获胜法_石头剪刀布Java实现
- Jumpserver代码规范
- windows上通过vnc连接虚拟机中linux系统
- mysql中用来取余数的函数是_MySQL 常用函数总结
- 【KSZ8863】KSZ8863交换机芯片的信息汇总与打板验证结果
- 希尔伯特变换产生负频率解决方法
- 神经网络与深度学习pdf下载
- 微信小程序图片上传功能(PHP后端)
- 面试题10:青蛙跳台阶
- 使用do文件进行仿真时出现“failed tofind ‘glbl’in hierarchical name ‘/glbl/GSR‘“的解决办法
- 浙江大学副教授杨洋——《Time2Graph:从图视角出发的时间序列建模》