内容展示
文本
文本小部件是一种用于显示和编辑文本内容的小部件,通常由一个文本框组成。
应用场景
- 表单输入:在表单应用程序中,文本小部件用于接收用户输入的数据。例如,用户可以在文本框中输入姓名、邮箱地址、电话号码等信息。
- 数据显示:在数据展示或报告应用程序中,文本小部件用于显示数据。例如,可以显示产品名称、描述、价格等信息。
- 交互提示:在应用程序中,文本小部件可以用于显示交互提示或帮助信息。例如,当用户需要填写某个字段时,可以显示提示文本,指导用户正确填写。
- 标题和标签:在页面布局中,文本小部件可以用于显示标题、标签或说明文本,帮助用户理解页面的内容和功能。
- 消息显示:在聊天或消息应用程序中,文本小部件用于显示消息内容。用户可以在文本框中输入消息,也可以查看接收到的消息。
- 日志记录:在系统监控或日志管理应用程序中,文本小部件可以用于显示日志记录。用户可以查看系统运行状态、错误信息等日志内容。
常用属性
属性 | 作用 | 默认值 |
---|---|---|
文本内容 | 设置显示的文本,支持变量绑定。 变量绑定:允许嵌入变量或表达式,例如 定义一个变量 a = false ,则文本内容可以输入${a} 或 ${a ? '正确' : '错误' } | 默认文本 |
文本对齐 | 设置文本的对齐方式,![]() | 80 |
文本大小 | 设置文本的大小 | |
字体粗细 | 设置字体的粗细,![]() | |
字体颜色 | 设置文本的字体颜色 | Primaryt Text |
文本样式 | 设置文本的文本样式 | |
最大行数 | 设置文本的最大行数 | |
字体行高 | 设置文本的字体行高 | |
字体间距 | 设置文本的字体间距 |
文本内容支持动态表达式渲染,适用于对dart语言熟悉的同学,例如 添加一个变量 double a = 0
,那么表达式可以为${a}
,${a / 10}
等。
简单的计算操作我们可以通过变量绑定来动态展示文本内容,如下
注意:当文本的父组件为左右布局时,一定要给文本加一个父组件(一般为容器)来限制文本的宽高。
图片
支持JPEG、PNG、GIF、动画GIF、WebP、动画WebP、BMP、WBMP等图像格式。底层平台可能支持其他格式。Flutter将尝试调用平台API来解码无法识别的格式,如果平台API支持解码图像,Flutter将能够渲染图像。
常用的图片属性有大小、对齐方式、边框
低代码平台引入了本地图片和网络图片两个概念
- 本地图片,指应用打包过程中,将图片一起打包,也就是flutter里的Asset资源。
- 网络图片,指使用Image.network加载图片,该图片不被应用程序包含。
小技巧:
- 应用场景:需要给图片加背景颜色
- 解决方案:给图片加一层容器父组件,设置容器的背景颜色属性即可
图标
日历
徽章数
条形码
条形码是一种用于生成和显示条形码的小部件,通常由一组按特定编码规则排列的黑白条纹组成。
应用场景
- 库存管理:在零售和仓储管理中,条形码用于标识产品,帮助快速准确地追踪库存水平,进行库存盘点,以及管理产品的进货和出货。
- 物流和运输:在物流和快递行业中,条形码用于跟踪包裹的运输状态,确保包裹能够准确并及时地送达目的地。
- 资产跟踪:在企业资产管理中,条形码用于标识和跟踪公司资产,如设备、家具等,便于资产管理和审计。
- 医疗保健:在医院和诊所,条形码用于标识患者和药品,确保正确的患者接受正确的治疗,减少医疗错误。
- 图书馆管理:在图书馆,条形码用于标识图书,帮助快速借出和归还图书,以及追踪图书的流通情况。
- 制造业:在制造业中,条形码用于跟踪生产过程中的零部件和成品,优化生产流程,提高效率。
- 身份验证:在一些场合,条形码用于身份验证,如会员卡、员工卡等,以便快速确认持卡人的身份。
常用属性
属性 | 作用 | 默认值 |
---|---|---|
宽 | 设置条形码的宽度 | 200 |
高 | 设置条形码的高度 | 200 |
条形码尺寸 | 设置条形码的条码尺寸 | 二维条码 |
条码类型 | 设置条形码的条码类型 | QR-Code |
条码内容 | 设置条形码的条码内容 | |
前景颜色 | 设置条形码的前景颜色 | #FF000000 |
背景颜色 | 设置条形码的背景颜色 | #FFFFFFFF |
是否绘制文本 | 设置条形码是否绘制文本 | true |