首页
学习
活动
专区
工具
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:点击按钮监听 注意收起键盘操作

95720
  • 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:点击按钮监听 注意收起键盘操作

    94830

    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

    【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来显示标题、描述和完成状态输入字段。

    22920

    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

    Flutter 入门指北之输入处理(登录界面实战)

    前面提到基础部件时候,忘了提输入内容处理部件,这里补上,然后顺带撸个实际界面吧 TextField const TextField({ Key key, this.controller...,例如我命名为 third_part_icon.ttf,注册图片下面继续添加 fonts: - family: ThirdPartIcons fonts: - asset: fonts...好在有很多现成插件已经开源,可以通过 FlutterPackage 搜索到,例如等会我们会需要用到 FlutterToast 这个插件,用来做提醒用, FlutterPackage 搜索到插件后,...打开项目中 pubspec.ymal 文件, dependencies 类目下 fluttertoast 插件引入,如图: ?...super.initState(); _tabController = TabController(length: _pageIndicators.length, vsync: this); // 登录界面和注册界面添加到列表

    1.9K50
    领券