文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【Flutter 专题】65 图解基本 TextField 文本输入框 (二)

，还提供了简单便利的构建方式 collapsed 默认是无边框的，且无法设置标签等其他属性； 案例尝试 icon 为装饰器外小图标，可灵活设置图标或其他 Widget，默认距输入框 16dp，主题可通过...labelText 为文本框描述标签，为 String 类型，直接编辑内容即可；labelStyle 为标签样式属性；TextField 获取焦点之后描述标签上移； return TextField(decoration...isDense 是否为紧凑型文本框，true 为紧凑型文本框，图标等与输入框边距较小； return TextField(decoration: InputDecoration(icon: Icon(Icons.android...alignLabelWithHint 用于 TextField 设置多行时，true 时覆盖将标签与 TextField 的中心对齐的默认行为，和尚尝试了多种情况下 true 和 false 状态，发现效果并不明显...小扩展 在实际开发中，可能会随时需要关闭键盘，此时我们仅需监听一下即可；和尚监听一个文本输入框，当输入字符长度大于 11 位时即收起键盘； return TextField(controller

4.7K41

Flutter组件学习（三）—— 输入框TextFiled

Flutter中的Text组件 和 Flutter中的Image组件，今天我们继续学习输入框 TextFiled 组件，话不多说，先上图： image TextFiled组件的API 先来看一下TextFiled...'); 12 } else { 13 print('失去焦点'); 14 } 15} 16 17new TextField( 18 focusNode: _focusNode, 19) 3、...this.errorMaxLines, 12 this.hasFloatingPlaceholder = true, 13 this.isDense, 14 this.contentPadding, //输入内容的边距...，默认有一个边距，可以手动设置 15 this.prefixIcon, //输入框前面的图片（在下划线里面） 16 this.prefix, 17 this.prefixText, 18 this.prefixStyle..., 9 ), 10 ), 11) 4、keyboardType 这个属性是设置输入框的输入类型的，类似于 Android 中的 InputType，选值有以下几个： text 输入文字 multiline

2.6K50
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Flutter 全栈式——基础控件

    prefixIcon Widget 位于输入框内部起始位置的图标 prefix Widget 预先填充的Widget，跟prefixText只能同时出现一个 prefixText String 预填充的文本...InputBorder 输入框有焦点时的边框，errorText必须为空 focusedErrorBorder InputBorder errorText不为空时，输入框有焦点时的边框 disabledBorder...focusColor Color 获取焦点时按钮颜色 splashColor Color 水波纹效果的初始化颜色 hoverColor Color 当指针悬停在按钮上时的填充颜色 highlightColor...Color 水波纹的高亮颜色 elevation double 阴影高度 hoverElevation double 指针悬停在按钮上时的阴影 focusElevation double 获取焦点时的阴影...label Widget 碎片的标签 labelStyle TextStyle 标签文字样式 labelPadding EdgeInsetsGeometry 标签文字内间距 shape ShapeBorder

    3.8K40

    Flutter | 常用组件

    大多数情况下我们都需要显示的提供一个 controller 来与文本框交互，如果没有提供，则 TextField 会自动创建一个 focusNode ：用于控制 TextField 是否占有当前键盘输入的焦点...InputDecoration：用于控制 TextField 的外观显示，如提示文本，背景颜色，边框等 keyboardType ：用于设置该输入框的键盘输入类型，取值如下： image.png...obscureText ：是否隐藏正在编辑的文本，如输入密码等。...：这两者都是在输入完成时触发，例如点击键盘的完成，或者搜索等。...，//TODO 这里设置的不生效，日后解决 表单 Form 在实际开发中，在请求接口之前会对输入框中的数据进行校验，如果对每个 TextField 都进行校验会非常麻烦，为此，Flutter 提供了一个

    11.4K30

    【Flutter 专题】64 图解基本 TextField 文本输入框 (一)

    填充边距 this.enableInteractiveSelection, // 长按是否展示【剪切/复制/粘贴菜单LengthLimitingTextInputFormatter】...，实践中需要合理利用各种回调； 案例尝试 和尚尝试最基本的 TextField，区分默认状态和获取焦点状态； return TextField(); ?...WhitelistingTextInputFormatter 仅允许输入白名单中字符；如 digitsOnly 仅支持数字 [0-9]； c....当 TextField 获取焦点弹出输入框时，输入框可能会将页面中元素顶上去，为避免此情况，可将 Scaffold 中 resizeToAvoidBottomPadding: false 即可，resizeToAvoidBottomPadding...文本框是日常开发中必不可少的组件，和尚还在探索过程中，如有问题请多多指导！ 来源： 阿策小和尚

    4.7K51

    JavaSwing_8.1:焦点事件及其监听器 - FocusEvent、FocusListener

    当组件获得或失去键盘焦点时，将调用侦听器对象中的相关方法，并将FocusEvent传递给它。 API focusGained ? focusLost ? 2 FocusAdapter ?...用于接收键盘焦点事件的抽象适配器类。 此类中的方法为空。 此类存在的目的是方便创建监听器对象。 继承此类来创建 FocusEvent 监听器，并针对感兴趣的事件重写方法。...当组件获得或失去键盘焦点时，可调用侦听器对象中的相关方法，并将 FocusEvent 传递给它。 API focusGained ? focusLost ?...要获取许多组件的焦点状态，请考虑在KeyboardFocusManager类上实现PropertyChangeListener实例，如如何使用焦点子系统中的将焦点更改跟踪到多个组件中所述。...您将在文本区域中看到一条“焦点已获得：JTextField”消息-其“相反组件”为空，因为它是第一个具有焦点的组件。 单击标签。什么也没发生，因为默认情况下标签无法获得焦点。 单击组合框。

    4.7K10

    《Flutter》-- 4.Flutter组件基础

    4.1.3 MaterialApp MaterialApp是Flutter开发的符合Material设计理念的Widget，可以将它类比为网页开发中的标签，它提供了路由、主题色和标题等功能。...具体选择哪种状态管理，可以参考如下基本原则： 1）如果状态是有关界面外观效果的（如颜色、动画等），最好由Widget自身管理； 2）如果状态是用户数据（如复选框的选中状态、滑块位置等），最好由父Widget...在此种模式下，子组件使用构造函数接收父组件传递的状态，并使用回调函数返回子组件内部的状态。...如果没有提供controller，则TextField组件内部会自动创建一个。 focusNode：用于控制TextField组件是否获取输入焦点，它是用户和键盘交互的一种常见方式。...decoration：用于控制TextField组件的外观显示，如提示文本、背景颜色和边框。 textAlign：输入框内文本在水平方向的对齐方式。 textDirection：输入框内文本的方向。

    12.5K30

    【QT】控件 -- 多元素类 | 容器类 | 布局类

    同时，利用信号可以实现用户交互逻辑，如当用户点击或双击单元格时执行特定的操作。...，可以添加标签页或者删除标签页 （2）编写 widget.cpp，进行初始化，给标签页中放个简单的 label 注意新创建的 label 的父元素，是 ui->tab 和 ui->tab_2 Qt 中使用父子关系决定该控件...删除标签页 使用 currentIndex 获取到当前标签页的下标 使用 setCurrentIndex 切换当前标签页 （3）运行程序 点击新建标签页，可以创建出新的标签 点击删除当前标签页，可以删除标签...上方边距，设置或获取布局内容与容器上边界的距离 layoutBottomMargin 下方边距，设置或获取布局内容与容器下边界的距离 layoutSpacing 相邻元素之间的间距，设置或获取布局中各元素之间的默认间隔...下方边距 layoutSpacing 相邻元素之间的间距 【使用 QHBoxLayout 管理控件】 编写代码，创建布局管理器和三个按钮，并且把按钮添加到布局管理器中，并且运行 可以看到此时界面上的按钮就存在于布局管理器中

    12810

    【QT】常用控件（四）

    是否为扁平模式 checkable 是否可选择 checked 是否被选择 groupbox 2、Tab Widget 属性 说明 tabPosition 标签页所在位置 currentIndex 当前选中了第几个标签页...currentTabText 当前选中的标签页的文本 currentTabName 当前选中的标签页的名字 currentTabIcon 当前选中的标签页的图标 currentTabToolTip 当前选中的标签页的提示信息...tabsCloseable 标签页是否可以关闭 movable 标签页是否可以移动 TabWidget就是一个widget，可以在上面添加其他如label pushbutton等的控件 tablewidget...layoutLeftMargin 左侧边框 layoutRightMargin 右侧边框 layoutTopMargin 上方边距 layoutBottomMargin 下方边框 layoutSpacing...相邻元素之间的间距 2、QHBoxLayout 属性 说明 layoutLeftMargin 左侧边框 layoutRightMargin 右侧边框 layoutTopMargin 上方边距 layoutBottomMargin

    9910

    【Flutter实战】文本组件及五大案例

    基本用法如下： Text('老孟') 注意：Text组件一定要包裹在Scaffold组件下，否则效果如下： 文本的样式在style中设置，类型为TextStyle，TextStyle中包含很多文本样式属性...icon显示在输入框的前面，用法如下： TextField( decoration: InputDecoration( icon: Icon(Icons.person), ), ) 当输入框是空而且没有焦点时...，labelText显示在输入框上边，当获取焦点或者不为空时labelText往上移动一点，labelStyle参数表示文本样式，具体参考TextStyle， 用法如下： TextField( decoration...，用法如下： TextField( decoration: InputDecoration( prefixIcon: Icon(Icons.person) ), ) 注意prefix和icon...(); TextField( focusNode: _focusNode, ... ) 动态失去焦点 _focusNode.unfocus(); 过渡颜色的文字 Builder( builder

    7.3K10

    java Swing用户界面组件文本输入：文本域+密码域+格式化的输入域

    首先，介绍具有用户输入和编辑文本功能的组件。文本域（JTextField）组件和文本区（JTextArea）组件用于获取文本输入。文本域只能接收单行文本输入而文本区可以接收多行文本输入。...文本域 把文本域添加到窗口中的常用办法是把它添加到面板或者其他容器中，这与添加按钮完全一样： JPanel panel = new JPanel( ); JTextField textField = new...) 构造具有文本和图标的标签。...在这种情况下，可以捕获parseInt方法抛出的NumberFormatException异常，如果文本域中的内容不是数字，就不更新时钟了。在下一节中，将会看到如何在第一时间阻止用户的无效输入。...注意，字符串是被掩码格式器格式化的，它和掩码具有完全相同的长度。如果用户在编辑过程中删除字符，那么它们将被占位符（holer character）替代。

    4.1K10

    Flutter状态管理

    在前面的文章中我们学习了Flutter中事件传递的方法，让我们可以在数据流向简单的业务场景中使用InheritedWidget、Notification 或者 EventBus。...在前端开发中我们都会接触redux ，借助于redux 我们可以很轻松地完成多界面数据维护和获取，在Flutter中也有很多状态管理的第三方库，如Provider、Scoped Mode、flutter_redux...Provider作为官方推荐的状态管理工具具有使用简单和管理方便的特点，今天我们就先来看下Provider如何使用。...Provider实现原理 在前面的文章中我们学习过InheritedWidget的用法，通过对InheritedWidget的封装，使得Provider允许在 Widget 树中更加灵活地处理和传递数据..._nickName属性并设置相关获取与设置属性的方法，在设置属性方法中我们通过notifyListeners方法告知数据刷新。

    1.6K10

    简单了解下无障碍设计模式

    当使用屏幕阅读器（如 “TalkBack” ），并通过触摸板导航时，在用户指尖触摸到 UI 元素时，会大声读出标签上的文本。...它们向外延伸，并超过元素的视觉边界。例如，图标可能显示为 24 x 24 dp，但是加上图标周围的边距，则构成了 48 x 48 dp 的触摸目标。 触摸目标应该至少为 48 x 48 dp。...视觉反馈（如标签、颜色和图标）和触摸反馈向用户显示了可用的 UI。 导航应该具有清晰的任务流程，和最少的步骤。在频繁使用的任务上，应该实现聚焦控制、或控制键盘和读取焦点的功能。...过渡 屏幕和任务之间的焦点遍历应尽可能保持连续。 如果一个任务中断了，然后又恢复，请将焦点放在之前聚焦的元素上。 绿色圆圈表示屏幕中的元素接收焦点的顺序。...标记聊天图标 帮助文档 任何具有特殊无障碍功能的功能都应包含在帮助文档中。确保帮助文档的相关性、可访问性和可发现性。例如，查看本指南，了解如何在 Google Drive 中使用屏幕阅读器。

    4.8K40

    Android用户界面开发概述

    ，且单击向上键时获得焦点的组件ID android.onClick 为该组件的单击事件绑定监听器 android:padding setPadding(int，int，int，int) 在组件的四边设置填充区域...1.5 2 3 代表分辨率 240*320 320*480 480*800 720*1280 1080*1920 ViewGroup.MarginLayoutParams用于控制子组件周围的页边距...XML属性 相关方法 说明 android:layout_marginBottom setMargins(int, int, int, int) 指定该子组件下边的页边距 android:layout_marginLeft...setMargins(int, int, int, int) 指定该子组左下边的页边距 android:layout_marginRight setMargins(int, int, int, int...) 指定该子组件右边的页边距 android:layout_marginTop setMargins(int, int, int, int) 指定该子组件上边的页边距 三、创建UI界面 在前面的内容指出过

    2.5K100

    我的2017年总结笔记整理

    命令，没有遥控器的时候可以暂时用这个来控制 JSON-handle： json AdBlock： 禁广告 Agar/Slither Infinity： 标签页 crxMouse Chrome™ Gestures...，以此类推 （3）xml焦点控制 android:descendantFocusability-----父容器和子控件的焦点获取问题 这个属性定义了当一个焦点要传递给父容器或者子控件时，父容器和子控件之间获得焦点的关系...merge 标签被添加到 A 容器下，那么 merge 下的所有视图将被添加到 A 容器下。...Q1:如果向下滑动，新一行的5个卡位的显示会去复用缓存的 ViewHolder，第一行的5个卡位会移出屏幕被回收，那么在这个过程中，是先进行复用再回收？还是先回收再复用？还是边回收边复用？...每一个添加到WMS中的窗口对应一个ViewRootImpl，通过WindowManagerGlobal向WMS添加窗口时创建。大多数情况下，它管理Activity顶层视图DecorView。

    758110

    译|CSS中的间距，前端开发中各种设置间距的优点缺点及实例

    margin 折叠 简而言之，当两个垂直元素具有margin，并且其中一个元素的margin大于另一个元素时，发生边距折叠。在这种情况下，将使用更大的margin，而另一个将被忽略。 ?...此外，CSS Tricks还在页边距底部和页边距顶部之间进行了投票。61%的开发者更喜欢 margin-bottom 而不是 margin-top。...用例和实际示例 在这一节中，你将回顾一下在日常工作中，你在处理CSS项目时，会遇到的不同用例。 header 组件 ? 在这种情况下，标题具有logo，导航和用户个人资料。...结果表明，基于 writing-mode 的页边距工作得非常好。 我认为这些用例就足够了。让我们继续一些有趣的概念！ 组件封装 大型设计系统包含许多组件。向其直接添加边距是否合乎逻辑？...它应该是灵活的。间距可能在X页上，但不在Y页上。 我在检查Facebook的新设计CSS时首先注意到了这一点。 ?

    12.1K10

    AWT常用组件

    如果需要用户输入位于某个范围的值 ， 就可以使用滑动条组件 ，比如调 色板中设置 RGB 的三个值所用的滑动条。当创建一个滑动条时，必须指定它的方向、初始值、 滑块的大小、最小值和最大值。...标签(Label类) 标签是 GUI 程序中的常用组件，显示一行文本作为提示信息，起到说明的作用。...通常，是不可编辑的；在AWT 的Label 类实例化标签对象时，可通过构造方法的参数赋值指定标签上文本的对齐方式。Label类的构造方法如表所示。...TextField 类的构造方法有4种重载形式，通过给参数赋值，可以设置文本框中的初始文本字符，以及文本框的列数。TextField类的构造方法见表。...作为同一组的多个单选按钮组件是互斥的，即每一时刻只能有一个组件的状态为“true”，从而实现单项选择。 在AWT中，单选按钮对象的创建也是通过 Checkbox类实例化的。

    9910
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券