AiFlutter 文档AiFlutter 文档
入门指南
更新日志
官网
市场
社区
低代码平台
GitHub
入门指南
更新日志
官网
市场
社区
低代码平台
GitHub
  • 入门指南

    • AiFlutter 简介
      • 产品介绍
    • 快速开始
    • 工作空间概览

      • 工作台
      • 进入工作台
      • 工作台结构
      • 账户设置
      • 订单中心
      • 项目
      • 团队
      • 资源
    • 操作界面说明

      • 操作界面简介
      • 素材管理
      • 日志管理
      • 主题设置
      • App设置
      • 小部件面板
      • 自定义组件
      • 页面管理
      • 页面编辑窗口
      • 流程图
    • 组件介绍

      • 页面布局
      • 内容展示
      • 动画图表
      • 交互行为
      • 表单元素
      • 页面导航
      • 系统工具
    • 集成硬件
    • API管理
    • 数据库
    • 自定义管理
    • iOS软件包上传TestFlight并测试
    • 实践案例

      • 老板要求两天开发一个App,半天搞定!!!
      • 一个小时搞定蓝牙调试助手!!!
      • 一个小时搞定串口调试助手!!!

内容展示

文本

  文本小部件是一种用于显示和编辑文本内容的小部件,通常由一个文本框组成。

应用场景

  1. 表单输入:在表单应用程序中,文本小部件用于接收用户输入的数据。例如,用户可以在文本框中输入姓名、邮箱地址、电话号码等信息。
  2. 数据显示:在数据展示或报告应用程序中,文本小部件用于显示数据。例如,可以显示产品名称、描述、价格等信息。
  3. 交互提示:在应用程序中,文本小部件可以用于显示交互提示或帮助信息。例如,当用户需要填写某个字段时,可以显示提示文本,指导用户正确填写。
  4. 标题和标签:在页面布局中,文本小部件可以用于显示标题、标签或说明文本,帮助用户理解页面的内容和功能。
  5. 消息显示:在聊天或消息应用程序中,文本小部件用于显示消息内容。用户可以在文本框中输入消息,也可以查看接收到的消息。
  6. 日志记录:在系统监控或日志管理应用程序中,文本小部件可以用于显示日志记录。用户可以查看系统运行状态、错误信息等日志内容。

常用属性

属性作用默认值
文本内容设置显示的文本,支持变量绑定。
变量绑定:允许嵌入变量或表达式,例如 定义一个变量 a = false,则文本内容可以输入${a} 或 ${a ? '正确' : '错误' }
默认文本
文本对齐设置文本的对齐方式,文本对齐80
文本大小设置文本的大小
字体粗细设置字体的粗细,image-20250507144344594
字体颜色设置文本的字体颜色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加载图片,该图片不被应用程序包含。

小技巧:

  • 应用场景:需要给图片加背景颜色
  • 解决方案:给图片加一层容器父组件,设置容器的背景颜色属性即可

图标

日历

徽章数

条形码

  条形码是一种用于生成和显示条形码的小部件,通常由一组按特定编码规则排列的黑白条纹组成。

应用场景

  1. 库存管理:在零售和仓储管理中,条形码用于标识产品,帮助快速准确地追踪库存水平,进行库存盘点,以及管理产品的进货和出货。
  2. 物流和运输:在物流和快递行业中,条形码用于跟踪包裹的运输状态,确保包裹能够准确并及时地送达目的地。
  3. 资产跟踪:在企业资产管理中,条形码用于标识和跟踪公司资产,如设备、家具等,便于资产管理和审计。
  4. 医疗保健:在医院和诊所,条形码用于标识患者和药品,确保正确的患者接受正确的治疗,减少医疗错误。
  5. 图书馆管理:在图书馆,条形码用于标识图书,帮助快速借出和归还图书,以及追踪图书的流通情况。
  6. 制造业:在制造业中,条形码用于跟踪生产过程中的零部件和成品,优化生产流程,提高效率。
  7. 身份验证:在一些场合,条形码用于身份验证,如会员卡、员工卡等,以便快速确认持卡人的身份。

常用属性

属性作用默认值
宽设置条形码的宽度200
高设置条形码的高度200
条形码尺寸设置条形码的条码尺寸二维条码
条码类型设置条形码的条码类型QR-Code
条码内容设置条形码的条码内容
前景颜色设置条形码的前景颜色#FF000000
背景颜色设置条形码的背景颜色#FFFFFFFF
是否绘制文本设置条形码是否绘制文本true

image-20250510224105307

轮播图

Markdown

富文本

列表标题

冻结头部

视频播放

模糊

页面视图

静态地图

谷歌地图

pdf查看

上次更新:
上一篇
页面布局
下一篇
动画图表