Flutter中，有几种方式实现使一个TextFiled在无文本输入时，右侧的清空按钮隐藏，有文本输入时，右侧的清空按钮显示。...

最新推荐文章于 2023-10-20 16:00:40 发布
最新推荐文章于 2023-10-20 16:00:40 发布
阅读量219 收藏
点赞数
文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42604188/article/details/129502559
版权

在Flutter中可以使用TextField的suffixIcon属性实现。在TextField中监听文本变化，根据文本长度是否为0来判断是否显示清空按钮。还可以使用TextEditingController来控制suffixIcon的显示。

古斯塔夫歼星炮
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【个人笔记】Flutter很好用，but……
梅花寺
08-26 526
前言 为什么有这篇文章？ 这篇文章可以说是个人Flutter问题随笔吧，虽然Flutter可以方便的做到跨平台，但是毕竟是新项目，功能没那么全面也是意料之中，所以在此记录跟踪一下目前在使用Flutter过程中遇到的问题，目前的解决方案，并跟踪记录一下。 问题列表(持续更新)： Flutter 中不支持异步测绘大量文字。 ~Flutter IOS 后台音频播放~(已经有了第三方)。 Flutter 中 NestedScrollView 中存在折叠头、子列表等情况下的滑动等异常。 ~Hero 跳转之后的图片如
flutter应用程序开发中文本输入框TextField中输入文本 textAlign 对齐分析篇
01-08
Flutter 从入门实践到开发一个APP之UI基础篇 视频 flutter从入门 到精通 系列文章 TextField 系列文章 TextField的基本使用以及TextField常用属性精讲《点击查看详情》 TextField 焦点获取控制篇《点击查看详情》 ...
Flutter中TextField设置了controller: TextEditingController 导致弹框或隐藏键盘的时候内容自动清空的解决办法
misterdongjing的专栏
10-29 7169
在自定义带删除按钮的搜索框的时候，给输入框增加了内容控制器后，导致键盘隐藏或者展示loading框的时候内容自动被清空了，并且监听onChange没有变化，内容如下： ... TextEditingController _textEditingController = TextEditingController(); ...... new Row( ... ...
Flutter 清除TextField的值 TextField值为空时隐藏清除按钮 不为空时显示清除按钮
ulddfhv的专栏
12-12 1万+
先上效果图: 如图，上下两个输入框都是 左边图标+中间输入框+右边清除按钮的布局 现在要实现输入框值为空时隐藏清除按钮 输入框值不为空时显示清除按钮 并且 点击清除按钮能清除对应的输入框的值 废话不多 直接上代码: String text3=''; TextEditingController mControll3= TextEditingController(); //...
flutter-TextField/TextFromField---suffixIcon点击时不弹出键盘
weixin_43841938的博客
12-16 3513
FocusNode _focusNode=FocusNode(); TextFormField( controller: _pwdController, focusNode: _focusNode, decoration: InputDecoration( icon: Icon(Icons.lock), labelText: I18n.of(context).password, hintText.
Flutter——最详细(TextField)使用教程
人生在世
05-04 7350
文本输入框，拥有复杂的属性。可指定控制器、文字样式、装饰线、行数限制、游标样式等。监听输入框变动事件。
Flutter实现文本组件、图标及按钮组件的代码
08-25
主要介绍了Flutter实现文本组件、图标及按钮组件的代码，本文给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
Flutter中如何实现无Context跳转详解
08-25
在 Flutter 中， Navigator 是一个非常重要的组件，它允许我们在不同的路由之间进行跳转。通常情况下，我们使用 Navigator.of(context).push() 方法来推送一个新的路由，但是这个方法需要传入 context 参数，这可能...
highlight_text:一个Flutter插件来突出显示文本中的单词
05-18
一种颤振包，用于突出显示文本中的单词。 用法 要使用此软件包，请中将highlight_text添加为。 入门 使用此程序包，您可以突出显示单词并为每个突出显示的单词创建特定的操作，可以分别自定义每个单词的样式或为所有...
一个演示渐变的Flutter项目可应用于按钮文本和背景的渐变
08-10
一个演示渐变的Flutter项目可应用于按钮文本和背景的渐变
flutter中TextField关于decoration的前后Icon一些适用小功能
最新发布
weixin_64482155的博客
10-20 405
这个麦克风样式的图标就是我想要实现的功能，在decoration有关于后置图标的功能，如属性suffix、suffixIcon。最近公司在开发flutter项目，从没学过flutter到慢慢上手还是有点难度的（毕竟换了语言和编写风格），在编写过程中也遇到很多问题，关于标题这个问题是我自己想到的解决方法，仅供参考。但此时还有最后一个问题，图标距离右侧太近了，整体不够美观，但是调试时发现加padding的方法不太尽人意（可以自行测试看看），所以最后，经过多种方法的试验下，发现可以调节。设置完后问题也就解决了。
Flutter文本输入框TextField属性（InputDecoration、textInputAction、inputFormatters等等）详解
热门推荐
喻志强的博客
03-06 11万+
TextField 构造方法：
Flutter输入框TextField属性介绍及相关问题
weixin_47401153的博客
04-27 1893
Flutter输入框TextField属性介绍及相关问题
Flutter 项目实战 编辑框(TextField) 自定义 七
我很好
01-03 4215
/ 应用编辑框你体验过吗? / 从各大应用市场下载的应用安装完成后触发打开应用的那一刻, 我们可能直接进入app进行查看app的功能模块或者一开始就需要我们进行登录操作才能进入app . 当进入app查看功能模块时我们需要通过app快速查找对应的信息 , 这时我们需要通过编辑框进行搜索 . 对编辑框进行编辑的时候可能是通过手机软键盘一个字符一个字符的输入到编辑框, 或者是直接从其它地方复制的文本到编辑框进行粘贴 ,搜索完成后切换成其它需要搜索的信息时又需...
TextField suffixIcon点击时TextField 选中弹出键盘＜Flutter Bug篇＞
星宇大前端
09-05 2287
项目场景： 登录页面有输入密码，常规隐藏显示。但是点击后面小眼睛的时候，TextField会被选中，弹出键盘。   问题描述： 点击prefix 或者 suffix 的时候，键盘弹出，输入框选中。   原因分析： 没有阻止点击事件冒泡，这个事情应该是谷歌Flutter 去解决，也看了一些issue 很多提到了这些问题。 https://github.com/flutter/flutter/issues/36324 https://github.com/flutter/flutter/i
Flutter 开发遇到的坑以及解决方方法汇总
清风明月的博客
02-04 777
问题一：TextField的hintText不显示，光标不显示 原因：TextField的suffixIcon图标不能用Container()占位 问题二：使用TextField键盘弹起会顶起页面的内容 原因：在页面开始Scaffold里面加： resizeToAvoidBottomInset: false 问题三：使用GestureDetector的点击范围很小 原因：在GestureDetector里面加： behavior: HitTestBehavior.opaque 问题四：使用r_calen
Flutter TextField常见属性设置
发孖的博客
06-18 1万+
这边只是把 TextField 中一些 常用到 的属性拉出来讲。 一、监听 1、不关联控制器 TextField( onSubmitted: (value){ print("onSubmitted 点击了键盘的确定按钮，输出的信息是：${value}"); }, onEditingComplete: (){ print("onEditingComplete 点击了键盘的确定按钮");...
Flutter中，有几种方式实现使一个TextFiled在无文本输入时，右侧的清空按钮隐藏，有文本输入时，右侧的清空按钮显示。
02-07
可以在TextField的"onChanged"回调中监听文本输入变化，根据文本长度是否大于0来判断是否显示清空按钮。可以使用"IconButton"组件来实现清空按钮。 示例代码如下： ``` TextField( onChanged: (text) { setState...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值