在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. 深入探究Java中equals()和==的区别是什么
  2. 29 个你必须知道的 Linux 命令
  3. 数据结构-树与二叉树
  4. 计算机的英语句子,唯美英语短句
  5. .NET 设计规范--.NET约定、惯用法与模式--附录:C#编程风格约定
  6. ABP框架 配置权限、本地语言文件、左侧菜单项
  7. 插件前奏-android黑科技 hook介绍
  8. Mysql表的过滤查询
  9. 【转】推荐一款Java反编译器,比较好用
  10. 【深入理解JS核心技术】1.在 JavaScript 中创建对象的可能方式有哪些?
  11. CefSharp入门-winform
  12. 突然发现一款优化神器
  13. gulp-sass 使用报错Error:gulp-sass no longer has a default Sass compiler; please set one yourself
  14. 双击word文档提示向程序发送命令出现问题(There was a problem sending the command to the program)
  15. 一句话讲清种子轮、天使轮、ABC轮的区别
  16. 一个开源「知乎日报」Android 客户端
  17. 学习进度2012-6-26(动态规划算法、Prim算法、Dijkstra算法)
  18. 优雅的落地个人所得税的计算
  19. 旭凤锦覓虐心 恋只愿共赴鸿蒙,香蜜:锦觅与旭凤4次同床,1次酒醉灵修,1次再续前缘,1次虐心!...
  20. 解决office,word奔溃的问题

热门文章

  1. 聚力远航·共创辉煌|沃丰科技受邀参加华为中国生态大会2021
  2. java 外部排序_完整java实现外部排序
  3. 用 Python 实现 LDA
  4. 培训服务器协议书,培训服务期协议签订时的注意事项
  5. word2vec关键词提取 python_【不可思议的Word2Vec】 3.提取关键词
  6. 退出项目组时,退出所有群,删除所有联系方式
  7. 电商秒杀网站之API文档
  8. C++20之Concpet(概念部分,之二)
  9. 阿里财报:阿里云首次盈利,最大的压力是监管
  10. 【AI创新者】第四范式首席架构师胡时伟:机器学习应用要坚持价值和结果导向...