首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在onPressed中添加setState将清除我的TextField (颤动)

在Flutter中,可以使用setState方法来更新UI。当我们在onPressed回调函数中添加setState方法时,可以清除TextField中的文本内容。

具体实现步骤如下:

  1. 在StatefulWidget的build方法中创建一个TextField组件,并将其保存在一个变量中,例如textEditingController
代码语言:txt
复制
TextEditingController textEditingController = TextEditingController();
  1. 在onPressed回调函数中添加setState方法,并在setState方法中调用textEditingController.clear()来清除TextField中的文本内容。
代码语言:txt
复制
onPressed: () {
  setState(() {
    textEditingController.clear();
  });
},

完整的示例代码如下:

代码语言:txt
复制
import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  TextEditingController textEditingController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: textEditingController,
            ),
            RaisedButton(
              onPressed: () {
                setState(() {
                  textEditingController.clear();
                });
              },
              child: Text('清除文本'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中,当点击"清除文本"按钮时,会触发onPressed回调函数,该函数会调用setState方法来更新UI,并通过textEditingController.clear()方法清除TextField中的文本内容。

推荐的腾讯云相关产品:腾讯云云服务器(CVM),产品介绍链接地址:https://cloud.tencent.com/product/cvm

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

setState

虽然比较糙,但是并不代表不重要 后面两篇是基于此篇的优化,所以这篇一定要看懂,才能跟上我的思维。 效果如下,单从界面上来看,我还是比较满意的。...我感觉这样挺好看的,不枉我精心调试一番。喜欢的话,可以自己抽个组件。...这里状态有点乱,我画了幅图说明一下: 状态量有三个:text 输入框的文字,todo列表数据,showType展现类型 1.输入框通过监听,改变text的值 2.在添加按钮点击时,将加入到状态值...todo中 3.todo用来渲染Todo列表,根据key和value展现数据和复选框状态 4.复选框通过点击,改变todo的状态,来显示对勾以及文字下划线 5.根据showType的不同,选择过滤的方式...6.在适宜的状态值改变时,调用老夫的setState来更新 2.2:输入框监听 onChanged: (str) { text = str; }, 2.3:点击按钮监听 注意收起键盘的操作FocusScope.of

1.4K10

setState

---- 0.2:要说的话 注意:本篇是对状态最基本的使用。虽然比较糙,但是并不代表不重要 后面两篇是基于此篇的优化,所以这篇一定要看懂,才能跟上我的思维。...通过一个TextField和RaisedButton进行拼合,样式什么的自己看,就不废话了。...我感觉这样挺好看的,不枉我精心调试一番。喜欢的话,可以自己抽个组件。 ?...状态量有三个:text 输入框的文字,todo列表数据,showType展现类型 1.输入框通过监听,改变text的值 2.在添加按钮点击时,将加入到状态值todo中 3.todo用来渲染Todo列表...6.在适宜的状态值改变时,调用老夫的setState来更新 ---- 2.2:输入框监听 onChanged: (str) { text = str; }, ---- 2.3:点击按钮监听 注意收起键盘的操作

96020
  • setState

    虽然比较糙,但是并不代表不重要 后面两篇是基于此篇的优化,所以这篇一定要看懂,才能跟上我的思维。 效果如下,单从界面上来看,我还是比较满意的。...我感觉这样挺好看的,不枉我精心调试一番。喜欢的话,可以自己抽个组件。...:鸟瞰全局 这里状态有点乱,我画了幅图说明一下: 状态量有三个:text 输入框的文字,todo列表数据,showType展现类型 1.输入框通过监听,改变text的值 2.在添加按钮点击时,将加入到状态值...todo中 3.todo用来渲染Todo列表,根据key和value展现数据和复选框状态 4.复选框通过点击,改变todo的状态,来显示对勾以及文字下划线 5.根据showType的不同,选择过滤的方式...6.在适宜的状态值改变时,调用老夫的setState来更新 ---- 2.2:输入框监听 onChanged: (str) { text = str; }, ---- 2.3:点击按钮监听 注意收起键盘的操作

    95130

    Flutter 构建一个 todo list 应用

    main.dart 这个文件是 Flutter 应用的入口文件。在这篇文章中,我将仅仅使用这个文件来开发。 首先,我们先导入 material 包。...我们返回了应用的一个脚手架,在脚手架上,我们添加了一个包含标题的 appBar 的属性。我们定义了 body 属性,这将存放 ListView 组件。...在上面代码片段中,通过 map 方法返回每个元素的 TodoItem。 然后,在应用的底部,我们定义了一个按钮。当按钮被点击时候,将调用 _displayDialog 方法。...这将调起一个带有文本框的对话框。当点击确认的时候,将以文本框的内容基础添加一个新的列表项。 在 _TodoListState 中创建 _displayDialog。...Future 表明在将来的某个时候将返回潜在的值或者错误信息。

    1.3K10

    Flutter 入门指北之数据持久化

    path_provider用于获取手机的存储文件位置,一共有三个方法 getTemporaryDirectory临时目录,在 Android 中对应的方法为 getCacheDir,而在 iOS 中对应为...NSCachesDirectory,可以通过系统检测并清除 getApplicationDocumentsDirectory缓存目录,在 Android 中对应为 AppData文件夹,在 iOS 中对应为...看下实现的代码,因为会涉及到多种方式,所以这边我把视图抽取出来实现 Widget _fileIoPart() { return Card( margin: const EdgeInsets.all...因为在例子中,我们保存的数据相对比较简单,所以这边就不得不说另外一种更方便的持久化方式了 shared_preferences SharedPreferences 写 Android 的小伙伴对这个应该不陌生了...sqflite 的基本操作语句,在文档中已经写得非常明白了,所以就不搬运了,这边直接讲下对于数据库的一些封装处理吧,因为打开数据库是一个很消耗资源的一个过程,所以呢,推荐实现单例会比较好。

    1.5K10

    【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调

    为了符合这个建议,你需要在 SmsLoginScreen 和 RegisterScreen 的构造函数中添加 Key 参数。...那么扩展知识又来了扩展知识在Flutter中,为小部件的构造函数添加一个命名的 key 参数有以下几个主要作用:1. 唯一标识小部件每个小部件都可以通过 key 参数在树结构中唯一标识。...例如,在一个可变顺序的列表中,如果每个项目都有唯一的 key,那么在列表项被重新排列时,它们的状态仍能正确保持。3. 控制小部件重建key 参数可以帮助Flutter引擎决定是否需要重建小部件。...,Key 类型在Flutter中,有几种不同类型的 Key,你可以根据具体需求选择使用:ValueKey: 通过值来唯一标识小部件,适用于简单数据类型(如字符串或数字)。...也就是说,接下来需要在 register_screen.dart 中为 RegisterScreen 添加一个 key 值 reg,在 smslogin.dart 中为 SmsLoginScreen 添加一个

    6710

    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发

    具体步骤如下:修改“请输入手机号”输入框的文字颜色:在 TextField 的 style 属性中设置文字颜色为 FFFFFF。...修改“选择国家地区号”部分的数字颜色:在 DropdownButtonFormField 的 style 属性中设置文字颜色为 FFFFFF。...blackbutton.dart 黑色按钮 和 pinkbutton.dart 粉色按钮先扩展知识学一下在Flutter中,自定义组件非常重要,可以提高代码的复用性和可维护性。...定义自定义组件:在新文件中定义自定义组件。在需要使用的地方导入和使用该组件。...widgets目录下的blackbutton.dart文件,需要保留目前的样式,并且在原register_screen.dart文件中 原位置中正常调用组件。

    5900

    【Flutter 实战】大量复杂数据持久化

    ,如果本地没有保存数据,则需要通过网络获取数据,在返回数据之前,用户看到的是空白页面,而如果本地保存了部分新闻,则显示这部分数据,等待最新的数据返回时在刷新即可,对用户体验来说,明显第二种体验更佳。...我觉得没有必要,应用程序使用的数据库和 SQL 语句相关知识都是非常基础的,比如打开数据库、创建表、SQL 查询语句、更新语句、删除语句等,这些都是固定的格式,固定语句记住即可。...添加依赖 SQLite 并不是 Flutter 系统自带的,而是一个第三方插件,在项目的 pubspec.yaml 文件中添加依赖: dependencies: sqflite: ^1.3.1...path_provider: ^1.6.11 执行命令: flutter pub get 使用 SQLite 创建数据库的时候需要本地路径做为参数,所以添加path_provider 插件获取本地路径...result.map((e) { return User.fromJson(e); }).toList():[]; } 将查询的数据显示在表格上: class DatabaseDemo

    2.2K30

    《深入浅出Dart》Flutter实战之TODO应用

    现代JavaScript高级小册 深入浅出Dart 现代TypeScript高级小册 Flutter实战之TODO应用 在本篇文章中,我们将构建一个TODO应用,使用最新的Dart语法和Flutter框架...在lib/models/todo.dart中创建一个新的Dart文件,并添加以下代码: class Todo { String title; String description; bool...在lib/screens/todo_list_screen.dart中创建一个新的Dart文件,并添加以下代码: import 'package:flutter/material.dart'; import...在lib/screens/todo_edit_screen.dart中创建一个新的Dart文件,并添加以下代码: import 'package:flutter/material.dart'; import...在initState方法中,我们初始化了文本编辑器的控制器,并根据传入的任务初始化了相应的值。 在build方法中,我们使用Scaffold和Column来显示标题、描述和完成状态的输入字段。

    26220

    Flutter | 常用组件

    TextSpan 添加到 Text 中,之所以这样做,就是应为 Text 本身就是 RichText 的一个包装,而 RichText 是可以显示多种样式(富文本)的 widget,样式如下: 字体...: () => print('提交'), ) 复制代码 Flutter 中 没有提供去除背景的设置,如果需要去除背景,可通过将背景颜色设置为透明来实现,将 color: Colors.blue 替换为...,使用 FadeInImage 之后会在图片的加载过程中显示一个占位符,在图片加载完成之后显示淡入 ICON 在 Flutter 中,可以直接使用 字体图标,它是将图标做成字体文件,然后通过指定不同的字符而现实不同的图片...而在 iconfont 中,只是将位码对应的字形做成了图标,所以不同的字符最终就会渲染成不同的图标 在 Flutter 中,iconfont 和图片相比有如下优势 1,体积小 2,矢量的图标,放大不会影响清晰度...,//TODO 这里设置的不生效,日后解决 表单 Form 在实际开发中,在请求接口之前会对输入框中的数据进行校验,如果对每个 TextField 都进行校验会非常麻烦,为此,Flutter 提供了一个

    11.4K30

    Flutter 中使用Chip 小部件【Flutter专题30】

    本文是关于 Flutter 中的 Chip 小部件。我们将大致了解小部件的基本原理,然后通过代码来实现它。事不宜迟,让我们开始吧。 概述 典型的chip是一个圆角的小盒子。...它有一个文本标签,并以一种有意义且紧凑的方式显示信息。chip可以在同一区域同时显示多个交互元素。...可删除的内容列表(一系列电子邮件联系人、最喜欢的音乐类型列表等)。 img 在 Flutter 中,您可以使用以下构造函数来实现 Chip 小部件: Chip({ Key?...在下一个示例中,chip是可交互的。 复杂示例:动态添加和移除筹码 应用预览 chip 我们要构建的应用程序包含一个浮动操作按钮。按下此按钮时,将显示一个对话框,让我们添加一个新chip。...actions: [ ElevatedButton( onPressed: () { setState

    2.9K20

    【Flutter】评级对话框组件

    在在本博客中,我们将探讨「Flutter中」 的“「评级对话框”」。我们将看到如何使用flutter应用程序中的「rating_dialog」包来实现美观的评级对话框演示程序并进行自定义。...这个库是最好的,因为它伴随着星级评价和联系,甚至可以滑动评级并发光以进行星级评价。之所以命名为“等级”对话框,是因为该库将识别您在颤动的星形图标上做出的手势以提供等级。...在小部件内,我们将添加一个Center小部件,并且其子属性添加一个「MaterialButton()。「在此按钮中,我们将添加文本,颜色,按钮形状和onPressed方法。...*_showRatingAppDialog()中**,我们将添加最终的_ratingDialog等于「RatingDialog()「插件。...当我们运行应用程序时,我们应该获得屏幕的输出,如屏幕下方的截图所示。 在此对话框中,您将看到我们将添加图像,标题,描述,星级,评论的textField和最后一个提交按钮。

    4.1K50
    领券