和尚最近在学习基础的 Flutter Widget，原因在于很多基础的组件有很多容易忽视的注意事项，了解并熟悉后对整体的开发认知会有所提升；今天和尚学习一下 TextField 文本输入框；...decoration 为边框修饰，可以借此来调整 TextField 展示效果；可以设置前置图标，后置图片，边框属性，内容属性等，和尚会在后续集中尝试；若要完全删除装饰，将 decoration 设置为空即可...键盘弹出会把输入框或其它组件顶上去？...； dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter 在 MaterialApp 中设置本地化代理和支持的语言类型...文本框是日常开发中必不可少的组件，和尚还在探索过程中，如有问题请多多指导！ 来源： 阿策小和尚
在Flutter中，UI小控件有两种设计风格，一种是Material设计，这是安卓的官方设计风格，另一种则是Cupertino风格，是iOS的官方设计风格。...，通常用于获取输入的内容 focusNode FocusNode 用于输入框的焦点管理和监听 decoration InputDecoration 输入框的装饰器，用于修改外观 keyboardType...输入框是否可用 readOnly bool 是否只读 装饰器 InputDecoration 属性名 类型 简述 icon Widget 设置位于输入框前的图标 labelText String 设置描述输入框的标签...InputBorder 输入框有焦点时的边框，errorText必须为空 focusedErrorBorder InputBorder errorText不为空时，输入框有焦点时的边框 disabledBorder...InputBorder 输入框禁用时显示的边框，errorText必须为空 enabledBorder InputBorder 输入框可用时显示的边框，errorText必须为空 border InputBorder
将文本放入容器中，以便沿每条边添加32像素的填充。 softwrap属性指示文本是否应在软换行符（如句点或逗号）上断开。...行和列是两种最常用的布局模式。 行和列分别获取子窗口小部件的列表。 子小部件本身可以是行，列或其他复杂小部件。 您可以指定行或列如何在垂直和水平方向上对齐其子项。 您可以拉伸或限制特定的子部件。...内容 对齐小部件 调整小部件 包装小部件 嵌套行和列 要在Flutter中创建行或列，可以将一个子窗口小部件列表添加到Row或Column窗口小部件中。...标准小部件 Container: 向边框添加填充，边距，边框，背景颜色或其他装饰。 GridView: 放置小部件作为可滚动的网格。 ListView: 将小部件列为可滚动列表。...处理Flutter中的盒子约束：讨论小部件如何受其渲染框限制。 在Flutter中添加资产和图像：说明如何将图像和其他资源添加到应用程序包中。
p {text-indent: 5em;}可以负号，就是效果会奇怪，需要和内边距配合，可以使用百分比，为父元素的width百分比 text-align：水平对齐，影响一个元素中的文本行互相之间的对齐方式...:top;} top,center,bottom 框模型 margin是外边框 border是边框，是围绕元素内容和内边距的一条或多条线。...padding是内边框 包裹的内容是实际的元素 ? 框模型 外边距默认是透明的，因此不会遮挡其后的任何元素。 内边距、边框和外边距都是可选的，默认值是零。但是很多元素都有自己的外边框和内边框。...合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 ? margin相互触碰 同一个元素，内容和内边框，边框宽度都是0时，上外边框和下外边框也会合并。...通过margin碰撞合并能使网页最上和最下的边框和元素之间的边框保持一致（如果是同一种类型样式的元素）。而不会中间是上下的两倍。
HTML5新增元素 结构元素 header 页面或页面中某个区块的页眉，一般为导航信息 footer 页面或页面中某一个区块的页脚 section 页面中的一块区域，通由内容和标题组成，...地址的文本输入框 url 表示必须输入URL地址的文本输入框 number 表示必须输入数值的文本输入框 range 表示必须输入一定范围内数字值的文本输入框 Date Pickers...type="tel"> 颜色文本框 HTML5中新增的表单元素 datalist 可以为文本框提供选择的列表，也可以由用户自己输入，需要绑定文本框的list为datalist...单词直接的间距 letter-spacing 字符之间的间距 text-indent 文本的缩进 vertical-align 内容的垂直对齐方式 line-height 对象的行高 文本装饰属性...text-decoration-line 文本装饰线条的位置 text-decoration-color 文本装饰线条的颜色 text-decoration-style 文本装饰线条的形状 text-decoration-skip
, BoxDecoration 是最常用的装饰器 // 可以自行查看 BoxDecoration 中可以设置的属性 decoration: BoxDecoration...textStyle 对象 Text('Container 中的 Text 文本组件示例', style: textStyle,), // Icon..., BoxDecoration 是最常用的装饰器 // 可以自行查看 BoxDecoration 中可以设置的属性 decoration: BoxDecoration...textStyle 对象 Text('Container 中的 Text 文本组件示例', style: textStyle,), // Icon..., BoxDecoration 是最常用的装饰器 // 可以自行查看 BoxDecoration 中可以设置的属性 decoration: BoxDecoration
Flutter组件的分类 文字类型 容器类型 辅助提示类型 列表类型 系统主题风格类型 交互类型 文字类型 用于描述文字， 如Text组件，一个普通的文本， 属性有字体的颜色、大小、下划线、删除线...、加粗、字体风格等； RichText组件，一个富文本， 可以描述丰富的字体样式； 案例如下：（Text的所有属性及相关的意义） /// color 颜色 ///...Text组件亦可，Container亦可 return new Container( //底部弹出文本框...系统主题有关的组件 MaterialApp和AppBar详解 Main.dart中有一个MaterialApp组件， 通过这个组件就可以实现很多Material风格的东西： theme：主题属性...Text组件亦可，Container亦可 //// return new Container( //// //底部弹出文本框 ////
一、图形界面构件库的设计 A公司基于面向对象技术开发了一套图形界面构件库，该构件库提供了大量基本构件，如窗体、文本框、列表框等。...由于在使用该构件库时，用户经常要求定制一些特殊的显示效果，如带滚动条的窗体、带黑色边框的文本框、既带滚动条又带黑色边框的列表框等，因此经常需要对该构件库进行扩展以增强功能。...比如Window下边的 SrollBarWindow、BlackBorderWindow中对Window中的Display()方法进行扩展，分别实现了带滚动条和带黑色边框的窗体。...上图中可以看出，不仅是窗体需要设置滚动条，文本框、列表框等都需要设置，因此在SrollBarWindow、SrollBarTextBox、SrollBarListBox等类中都需要包含用于增加滚动条的SetScrollBar...五、装饰模式总结 装饰模式降低了系统的耦合度，可以动态的增加或删除对象的职责，并使得需要装饰的具体构件类和具体装饰类独立变化，以便增加新的具体构件类和具体装饰类。
有序列表 可以认为是 order list: 有顺序的列表 ol 列表中只允许包含li标签 li 标签可以包含任意内容 dl自定义列表 diy list dt 自定义列表的主题 dd自定义列表的内容...表单 input系列 type属性值如下： text 文本框，用于输入单行文本 不换行 即写代码需要br手动换行 password 密码框 用于输入密码 radio 单选框 用于多选一 checkbox...标签把内容包裹起来 在表单标签上添加 id 属性 在 label 标签的for属性中设置对应的id值 使用方法② 直接使用label标签把内容和表单标签一起包裹起来 需要把label标签的for属性删除...text-decoration 属性值有: underline下划线 常用 line-through 删除线 不常用 overline 上划线 不常用 none 无装饰线 常用 行高 line-height...和padding布局中有效 垂直方向的margin和padding布局中无效
学习自：Dart Flutter教程_Dart Flutter入门实战视频教程-2019年新出. 记录一下Container组件以及Text组件常用的方法。...容器组件（Container）是一个组合Widget，内部有绘制Widget、定位Widget和尺寸Widget，包含一个子Widget,自身具备如alignment、pading等基础属性，方便布局过程中摆放...TextDecorationStyle.dashed, //设置虚线，实线，双实线等 letterSpacing: 20.0 //设置字母之间的间隔.../设置边框 color: Colors.cyanAccent, //边框颜色 width: 3.0, //边框宽度 ),...为正为顺时针旋转，位移(translation)，倾斜(skew),缩放(diagona) alignment: Alignment.topLeft, //让内部子元素位于控件中的什么位置
装饰模式概述 现实生活中的“装饰”实例 装饰模式分析 可以在不改变一个对象本身功能的基础上给对象增加额外的新行为 是一种用于替代继承的技术，它通过一种无须定义子类的方式给对象动态增加职责，使用对象之间的关联关系取代类之间的继承关系...引入了装饰类，在装饰类中既可以调用待装饰的原有类的方法，还可以增加新的方法，以扩展原有类的功能 定义 “装饰模式：动态地给一个对象增加一些额外的职责。...装饰模式的应用实例 实例说明： “某软件公司基于面向对象技术开发了一套图形界面构件库——VisualComponent，该构件库提供了大量基本构件，如窗体、文本框、列表框等，由于在使用该构件库时，用户经常要求定制一些特殊的显示效果...，如带滚动条的窗体、带黑色边框的文本框、既带滚动条又带黑色边框的列表框等等，因此经常需要对该构件库进行扩展以增强其功能。...实例类图 图形界面构件库结构图 实例代码 Component：抽象界面构件类，充当抽象构件类 Window：窗体类，充当具体构件类 TextBox：文本框类，充当具体构件类 ListBox：列表框类，
Container Flutter中的Container组件是一个非常通用且多功能的布局构件。它可以用来创建矩形的视觉元素，可以装饰以盒子装饰（例如背景色或边框），也可以配置边距、填充和尺寸约束。...Container可以包含一个单独的子元素，但不是专门用来做子元素布局的，对于布局，Flutter提供了其他组件如Row、Column或Stack。...decoration: 绘制在容器上的装饰，通常用于添加背景图像、边框、阴影等。 margin: 围绕容器外边缘的空白空间。 width 和 height: 容器的宽度和高度。...常用属性： children: Stack中的子组件列表。列表中的第一个组件是底部组件，随后的组件会在上面层叠。 alignment: 决定非定位子组件的对齐方式。...每个 Container 都有自己的尺寸和颜色。在 Stack 中，这些容器会按照列表中的顺序层叠显示，最先出现的在底部，最后出现的在顶部。
，标记标签是用尖括号包围的关键词，以开始标签和结束标签成对存在，如和 HTML属性，给元素提供了更多信息，在开始标签中以名称/值的形式出现，如下例的href属性 如小于号写成< 或 <，在HTML源码中打10个空格，浏览器只显示1个空格，因此用 来输出更多空格 HTML多媒体 用embed标签嵌入MP3文件 框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。relative元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。...absolute元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。...remove() - 删除被选元素（及其子元素） empty() - 从被选元素中删除子元素 CSS 获取和设置 addClass() - 向被选元素添加一个或多个类 removeClass() -
属性名称与标记名称之间用空格隔开，如或 (3). 属性值与属性间 用 "=" 来连接，属性值要用 " "引起来，如 (4).... 预格式化 ，保留标记内的格式(回车 和 空格) 21. 块级元素和行内元素 (1). 块级元素，每一个块级元素独占一行, 块级元素的主要作用布局 (2)....(3). align 控制表格在其父元素中水平排列方式 (4). border 边框宽度，默认为 0 (5). cellpadding 设置单元格内边距，单元格边框与内容之间的距离 (6). cellspacing...不规则表格，通过 td 的 colspan 和 rowspan 属性创建不规则的表格、 ①. colspan 跨列合并，在一行中，从指定单元格位置处开始，横向向右合并几个单元格(包含自己)，被合并掉的单元格要删除...表单元素，用于定义表单的提交信息如：提交地址，提交方式… … ②. 表单控件，能够与用户交互的界面元素 如：文本框，密码框… (2). 表单提交后的处理(服务器端) (3).
和尚刚学习了 TextField 的基本用法，今天特意学习一下 TextField InputDecoration 文本框装饰器的相关内容； InputDecoration 源码分析 const...InputDecoration({ this.icon, // 装饰器外小图标 this.labelText, // 文本框描述标签...不仅提供了全面的构建装饰器的方式，还提供了简单便利的构建方式 collapsed 默认是无边框的，且无法设置标签等其他属性； 案例尝试 icon 为装饰器外小图标，可灵活设置图标或其他 Widget，...小扩展 在实际开发中，可能会随时需要关闭键盘，此时我们仅需监听一下即可；和尚监听一个文本输入框，当输入字符长度大于 11 位时即收起键盘； return TextField(controller...---- 文本输入框确实有很多细节需要研究和尝试，和尚仅初步了解，有待深入研究；且和尚建议时常升级 Flutter 版本，可能对于同一个 Widget 会有或多或少的更新，如有问题请多多指导
：文本方向； (1). ltr 从左至右； (2). rtl 从右至 左； 3. overflow：文字超出屏幕之后的处理方式； (1). clip 裁剪； (2). fade 渐隐； (3). ellipsis...文字装饰线； A. none 没有线； B. lineThrough 删除线； C. overline 上划线； D. underline 下划线； (2). decorationColor 文字装饰线颜色...BoxDecoration的类，属性有： (1). color: 颜色，值如：Colors.blue； (2). border: 边框，值如：Border.all( color: Colors.red,...与外部其他组件的距离，值如：EdgeInsets.all(20.0)； 4. padding 表示Container 边缘与 Child 之间的距离，值如：EdgeInsets.all(10.0)；...5. transform 让Container进行一些旋转与平移之类的操作，值如：Matrix4.rotationZ(0.2)； 6. height 容器高度； 7. width 容器宽度； 8. child
1.前言 经过上一篇文章的学习，我们大家可以了解到布局相关的组件，但是在实际开发中，我们还需要使用到其他的组件，比如按钮、图片、文本、输入框等等，这些组件都是我们在开发中经常使用的，所以本篇文章我们就来学习一下这些常用组件...IconButton：这是一个图标按钮，常用于工具栏和对话框中。它可以包含图标而不是文本，适用于空间有限或需要图形化表示的地方。...FloatingActionButton：这是一个圆形的按钮，通常悬浮在内容上方，用于促进应用中的主要动作，如添加、编辑等。...textDirection (TextDirection): 图标的文本方向。这对于一些图标（如箭头）非常重要，其方向可能会因语言的阅读方向（从左到右或从右到左）而改变。...您的每一条评论对我都至关重要，我会尽快给予回复。 如果您觉得这篇文章对您有所启发或帮助，请不吝赞赏、收藏或分享。 您的每一个动作都是对我创作的最大鼓励和支持。 谢谢您的阅读和陪伴！
--注释--> 注释 定义粗体文本 定义删除字 定义斜体字 定义插入字(下划线) 定义表格 定义表格的行 定义表格的单元(列)...> 定义了 元素的标题 定义了下拉选项列表 定义选项组 定义下拉列表中的选项 定义一个点击按钮 <label...1 clip 剪裁绝对定位元素 2 cursor 规定要显示的光标的类型（形状） 2 display 规定元素应该生成的框的类型 1 float 规定框是否应该浮动 1 left 设置定位元素左外边距边界与其包含块左边界之间的偏移...2 overflow 规定当内容溢出元素框时发生的事情 2 position 规定元素的定位类型 2 right 设置定位元素右外边距边界与其包含块右边界之间的偏移 2 top 设置定位元素的上外边距边界与其包含块上边界之间的偏移.../ 书写方向 2 letter-spacing 设置字符间距 1 line-height 设置行高 1 text-align 规定文本的水平对齐方式 1 text-decoration 规定添加到文本的装饰效果
(按钮被选中) (2)列表框标签： 中至少包含一个。...文本行高: 单位px或 按倍数(行高是字体大小的倍数) (5)text-decoration文本装饰：none默认无、underline下划线、overline上划线、line-through`删除线...一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素将围绕它。 浮动元素之前的元素将不会受到影响。...：预格式化，它包围的文本会保留空格和换行符 下拉列表进行多选操作：在标签中设置multiple="multiple"属性，就可以实现多选功能，在windows 操作系统下，进行多选时按下...clip : rect(top, right, bottom, left); CSS 伪类： 1.Anchor伪类 (伪类如:link冒号和伪类名之间不能有空格) 在支持 CSS 的浏览器中，链接的不同状态可用不同的方式显示
TextDecoration decoration 绘制文本装饰:下划线（TextDecoration.underline）上划线（TextDecoration.overline）删除线（TextDecoration.lineThrough...double height 文本行与行的高度，作为字体大小的倍数（取值1~2，如1.2） Locale locale 此属性很少设置，用于选择区域特定字形的语言环境 Paint background 文本背景色...Paint foreground 文本的前景色，不能与color共同设置（比文本颜色color区别在Paint功能多，后续会讲解） Listshadows 详解:Flutter Decoration背景设定...默认为true，如果为false，则文本中的字形将被定位为好像存在无限的水平空间。...否则，文本将被包裹在框的边缘。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
