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

在Flutter中的TimePicker上点击“完成”后,如何更新文本字段的文本?

在Flutter中,要更新文本字段的文本,可以通过以下步骤实现:

  1. 首先,创建一个变量来存储选定的时间。例如,可以使用DateTime类型的变量selectedTime来保存选定的时间。
  2. 在TimePicker的“完成”按钮的点击事件处理程序中,将选定的时间赋值给selectedTime变量。可以使用showTimePicker方法来显示TimePicker,并在用户完成选择后获取选定的时间。
  3. 在文本字段的文本更新时,使用setState方法来通知Flutter框架进行重建。在setState方法的回调函数中,将selectedTime的值赋给文本字段的文本。

以下是一个示例代码:

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

class MyTimePicker extends StatefulWidget {
  @override
  _MyTimePickerState createState() => _MyTimePickerState();
}

class _MyTimePickerState extends State<MyTimePicker> {
  DateTime selectedTime;

  Future<void> _showTimePickerDialog() async {
    final TimeOfDay pickedTime = await showTimePicker(
      context: context,
      initialTime: TimeOfDay.now(),
    );

    if (pickedTime != null) {
      setState(() {
        selectedTime = DateTime(
          DateTime.now().year,
          DateTime.now().month,
          DateTime.now().day,
          pickedTime.hour,
          pickedTime.minute,
        );
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        RaisedButton(
          onPressed: _showTimePickerDialog,
          child: Text('选择时间'),
        ),
        SizedBox(height: 10),
        Text(
          selectedTime != null
              ? '选定的时间:${selectedTime.toString()}'
              : '未选择时间',
        ),
      ],
    );
  }
}

在上面的示例中,_showTimePickerDialog方法显示TimePicker对话框,并在用户完成选择后更新selectedTime变量。然后,在文本字段中显示选定的时间。

请注意,这只是一个简单的示例,实际应用中可能需要根据具体需求进行适当的修改和扩展。

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

相关·内容

Excel如何匹配格式化为文本数字

标签:Excel公式 Excel,如果数字一个表中被格式化为数字,而在另一个表中被格式化为文本,那么尝试匹配或查找数据时,会发生错误。 例如,下图1所示例子。...图1 单元格B6文本格式存储数字3,此时当我们试图匹配列B数字3时就会发生错误。 下图2所示是另一个例子。 图2 列A中用户编号是数字,列E是格式为文本用户编号。...图7 这里成功地创建了一个只包含数字文本字符串,VALUE函数帮助下将该文本字符串转换为数字,然后将数字与列E值进行匹配。...实际,可以使用SUBSTITUTE函数并通过将连字符替换为空来生成新文本字符串,从而进一步简化操作,如下图8所示。...图8 这里,我们同样成功地创建了一个只包含数字文本字符串,然后VALUE函数帮助下将该文本字符串转换为数字,再将我们数字与列E值进行匹配。

5.2K30

【译】Flutter 1.20 发布

在此版本,我们重构了鼠标点击测试系统,以提供由于性能问题而被阻止许多体系结构优势,重构使我们能够基于 Web 微基准测试中将性能提高多达 15 倍!...我们UTF-8解码基准测试,我们发现,低端ARM设备,英语文本全面改进从近200%提高到中文文本400%。...自动填充移动文本字段 一段时间以来,最受用户欢迎功能之一是为 Flutter 程序文本自动填充 Android 和 iOS提供支持。...image 要查看如何将集成 InteractiveViewer 到自己应用程序,请查看API文档,你可以 DartPad 中使用它。...Typesafe platform channels for platform interop 为了响应用户调查插件作者普遍需求,最近我们一直尝试如何使 Flutter 与主机平台之间通信对于插件和

4K10

TDesign 更新周报(2022年5月第3周)

Bug Fixes Table:列拖动优化;修复选中行列拖动距离被重置问题 Table:修复 多级表头 + 列配置 综合示例,列数量超出一定限制时报错 Transfer:修复列表数量变化时页码展示问题...title 展示全文本,不再使用 tooltip,存在不兼容更新 Features Form:支持 help 配置表单项说明内容与错误提示同时展示,未配置 help 时不再默认占位 Table:树形结构...适配问题,可参考案例 tdesign-vue-next-nuxt-starter Tabs:添加拖拽功能 Anchor:增加 demo 演示功能 Bug Fixes Table:修复 ssr...:修复第二级菜单点击无法展示第三级菜单 Cascader:修复组件可以同时打开多个 Cascader:修复 filterable 不支持忽略大小写, 优化过滤状态交互 CheckboxGroup...:修复 FormItem showErrorMessage 属性失效问题 Form:修复触发方式 blur 不生效问题 Form:修复传入字段值为 undefined 时候不会更新双向绑定值

2.8K30

TDesign 更新周报(2022年7月第2周)

Cascader: 修复多选时,文本过长未处理问题修复选中内容过多时,再点击选择器闪动问题SelectInput: 修复 overlayStyle 响应式无法更新问题TagInput: 修复 inputProps...属性透传无效Transfer: 修复穿梭框进行穿梭时报错问题Table: 树形结构支持懒加载Dialog: 修复打开对话框时出现滚动条问题DatePicker: 修复日期格式化问题TimePicker...修复异步加载回显展示问题Textarea: 修复无法传入 attrs style详情见:https://github.com/Tencent/tdesign-vue-next/releases/tag...: 支持文本自适应Tag: 视觉更新支持图标DropdownMenu: 新增 toggle 示例方法,用于切换下拉菜单DropdownMenu: 新增 keys 属性以支持自定义 label 和 value...字段名Popup 新增 duration 属性,控制动画过渡时间新增 customStyle 透传样式至根节点新增 overlayProps 属性,透传至 overlay 组件详情见:https:/

2.2K10

Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )

onTap 点击事件 , BottomNavigationBar 组件需要设置组件类型 , BottomNavigationBarType?..., /// 都会根据当前点击选项而改变 , /// 改变时候有切换动画 /// 选中状态下显示底部图标的文本 /// 不选中状态下隐藏底部文本内容 shifting...onTap 字段设置点击事件 , 传入参数是点击底部导航栏索引值 ; BottomNavigationBar 构造函数 : BottomNavigationBar({ Key?...(int page) 方法 , 进行页面跳转 ; jumpToPage 页面跳转在底部菜单栏 onTap 点击事件调用 , 更新当前页面 , 需要调用 setState 方法更新界面 ; PageView.../docs/ Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 ) GitHub Flutter 开源示例 : https://download.csdn.net

5.7K50

文本、图片和按钮Flutter怎么用

我们先来看看如何使用单一样式文本 Text。 单一样式文本Text初始化,是需要传入要展示字符串。而这个字符串具体展示效果,受构造函数其他参数控制。...理解了单一样式文本Text使用方法,我们再来看看如何在一段字符串中支持多种混合展示样式。...既然是按钮,因此除了控制基本样式之外,还需要响应用户点击行为。这就对应着按钮控件两个最重要参数了: onPressed 参数用于设置点击回调,告诉Flutter在按钮点击时通知我们。...其实,UI基本信息表达Flutter经典控件与原生iOS、Android系统提供控件没有什么本质区别。...但是自定义控件样式Flutter这些经典控件提供了强大而简介扩展能力,使得我们可以快速开发出功能复杂、样式丰富页面。 以上。

7.6K20

Flutter】StatefulWidget 组件 ( FloatingActionButton 组件 | RefreshIndicator 组件 )

: onPressed ; 显示组件 : child ; FloatingActionButton 构造函数源码 : 构造函数可选参数 , 可以查询该组件可设置参数选项 ; class FloatingActionButton...floatingActionButton 字段 ; onPressed 字段设置点击事件 , child 设置显示组件 ; Scaffold( // 设置悬浮按钮 floatingActionButton...组件会自动更新当前选中选项卡 setState(() { // 改变 int _currentSelectedIndex 变量状态...: 三目运算符 ), ); } } 运行效果 : 打印结果 : 点击悬浮按钮打印如下内容 ; I/flutter (23329): 悬浮按钮点击 二、RefreshIndicator...child 字段设置 , 这里设置了一个 ListView 列表组件 , 然后设置了下拉刷新回调方法 , onRefresh 字段设置 ; // 刷新指示器组件 RefreshIndicator

2.6K00

Widgetstate到底是什么

UI编程范式 要想理解StatelessWidget与StatefulWidget使用场景,我们首先需要了解,Flutter如何调整一个控件(Widget)展示样式,即UI编程范式。...下述代码分别展示了Android、iOS和原生JavaScript如何将一个文本控件展示文案更改为Hello World: // Android 设置某文本控件展示文案为 Hello World...Flutter,如果要实现上述同样需求,则要稍微麻烦点:除了设计好Widget布局方案之外,还需要提前维护一套文案数据集,并为需要变化widget绑定数据集中数据,使Widget根据这个数据集完成渲染...对应到Flutter,意图是绑定了组件状态State,结果则是重新渲染组件。Widget生命周期内,应用到State任何更改都将强制Widget重新构建。...(比如,用户点击按钮)或者其内部数据变化(比如,网络数据回包),并体现在UI

2.9K20

Flutter』警告修复 & 常用组件 TextField

1.前言在上一篇文章,给大家介绍有无状态组件时候代码中出现了一些警告,那么这些警告是什么意思呢?我们该如何修复呢?...该如何修复呢?我们只需要在组件构造函数添加一个key参数即可。可以利用 Android Studio 来修复,将鼠标放在警告上面,然后点击Add key to constructor即可。...该如何修复呢?我们只需要将final关键字添加到isCheck字段即可。...『Flutter』常用组件 TextField1.前言经过上一篇文章介绍,给大家讲述了 Flutter 有无状态组件,以及有状态组件使用方法,本文将继续围绕着 Flutter 中常用组件来讲述一下...onChanged:当文本发生变化时触发回调函数。onSubmitted:用户键盘上按下完成按钮时触发回调函数。enabled:一个布尔值,用于控制 TextField 是否启用。

28911

Flutter 日期时间DatePicker控件及国际化

firstDate表示开始时间,设置,选择器不能选择小于此值时间。 lastDate表示结束时间,设置,选择器不能选择大于此值时间。...showDatePicker方法是Future方法,点击日期选择控件“确定按钮,返回选择日期。 效果如下: ?...中文支持 增加国际化处理,pubspec.yaml添加支持: dependencies: flutter: sdk: flutter flutter_localizations:...sdk: flutter 顶级控件MaterialApp添加国际化支持: MaterialApp( localizationsDelegates: [ GlobalMaterialLocalizations.delegate...今天文章对大家是否有帮助?如果有,请在文章底部留言和点赞,以表示对我支持,你们留言、点赞和转发关注是我持续更新动力!

1.7K20

TDesign 更新周报(2022年9月第1周)

@ZTao-z (#1456)修复 onColumnControllerVisibleChange  trigger 参数返回错误问题 @sechi747 (#1456)修复列设置 type =... Cascader 点击清除按钮表现异常问题 @pengYYYYY (#1457)Watermark: 修复 removable 属性设置不生效,及 content 不支持动态修改变化问题 @carolin913... (#1473)Input/Textarea: 修正 emoji 类字符 length 计算问题 @HelKyle (#1411)TimePicker: 修复部分设备滚动边界跳动异常 (issue... 事件 partial 字段错误 @HQ-Lin (#1440)修复 value 为空字符串时导致页面崩溃问题 @HQ-Lin (#1453)详情见:https://github.com/Tencent... 数据变成数组 (vue-next #1502) @pengYYYYY (#1428)修复多选状态下点击 label 展开子级表现异常 @pengYYYYY (#1428)Nofitication:

2.6K20

Flutter文本、图片和按钮使用

1 文本控件 文本是视图系统常见控件,用来显示一段特定样式字符串,就比如Android里TextView、iOSUILabel。而在Flutter文本展示是通过Text控件实现。...Flutter也有类似概念TextSpan TextSpan定义一个字符串片段该如何控制其展示样式,而将这些有独立展示样式字符串组装在一起,则能支持混合样式文本展示。...FadeInImage控件提供图片占位功能,并支持图片加载完成时淡入淡出视觉效果。由于Image支持gif格式,还可将一些炫酷加载动画作占位图。...ImageStream开始异步加载,加载完毕更新缓存 最后,通知_ImageState刷新UI 图片展示流程: ImageCache使用LRU缓存更新策略,默认最多存储1000张图片,最大缓存限制...这就对应按钮控件两个最重要参数: onPressed参数用于设置点击回调,告诉Flutter在按钮被点击时通知我们。

45720

Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用组件 | 关联动画与组件 | 动画执行 )

| 动画运行 ) , 使用了 AnimatedWidget 组件实现动画 , 省略了手动添加监听器 , 并在监听器手动调用 setState 更新动画操作 ; 使用 AnimatedWidget...渲染到组件 AnimatedBuilder 监听机制与 AnimatedWidget 类似 , 也是自动添加监听器 , 监听动画执行过程 , 自动调用 setState 方法更新界面 ; 一、..., Flutter 中一切皆组件 ; 然后在这个组件返回一个包含 AnimatedBuilder 组件组件 , 其中将 Animation 动画 和 Widget 组件都设置该 AnimatedBuilder... , Animation 动画设置 animation 字段 , child 字段需要设置到 build 字段 , 设置方法如下 : AnimatedBuilder(...onTap 点击事件 , 点击该组件 , 调用 animationController.forward() 方法 , 运行动画 ; 代码示例 : GestureDetector(

1.5K10

TDesign 更新周报(2022年6月第3周)

组件库Vue2 for Web 发布 0.42.1FeaturesForm:实例方法 reset 支持重置指定字段,新增参数 { type:'initial' | 'empty', fields:number...[] }实例方法 validate 支持值校验而不显示每个组件错误信息文本,新增参数 { showErrorMessage }FormItem 支持自定义 help 内容,插槽和渲染函数均可新增纯净校验方法... 分页数量宽度问题Dialog:修复普通对话框不脱离文档流问题修复点击对话框对话框会隐藏问题修复 modeless 模式下背景样式点击透传问题修复 attach 挂载 showInAttachedElement...TimePicker:重构TimePicker为 compositionAPI,全新UI样式及交互,disableTime API 有所调整, 调整交互为点击确认按钮保留改动, 直接关闭弹窗不保留改动恢复初始值...Cascader:修复下拉面板宽度问题Form:修复调用实例方法 reset 添加参数无效Form:修复调用实例方法 submit  onSubmit 回调函数参数 e 为 undefined 问题

3K10

暴力突破 Flutter 自动化测试

随着产品功能不断迭代累积,测试复杂度随之大幅增长,手动测试会变得更加困难。因此,编写自动化测试用例对我们项目更新、迭代有着非常重要作用。...test 文件路径flutter test test/unit_test.dart//使用 flutter run 文件路径 方式来运行到真机或模拟器测试也是可以 2.2 使用 mockito...,很难覆盖所有可能成功或失败用例,因此更好办法是测试用例模拟这些”外部依赖“,让其可以返回特定内容。...pumpAndSettle():在给定期间内不断重复调用 pump() 直到完成所有绘制帧,一般需要等到所有动画全部完成。 交互类API enterText():模拟输入文本。...widget 测试扩大了应用测试范围,可以找到单元测试无法找到问题,不过相比于单元测试来说,widget 测试用例开发和维护成本非常高,因此建议项目达到一定规模,并且业务特征具有一定延续规律

2K31
领券