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

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

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

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

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

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

交互行为

按钮

  按钮是一种常见的小部件,通常用于触发特定的操作或事件。在低代码平台中,用户可以通过拖拽和配置来创建和使用按钮小部件。按钮小部件的主要功能是触发特定的操作或事件。当用户点击按钮时,可以执行预定义的操作,如提交表单、打开链接、显示对话框等。

应用场景

  1. 提交表单:在表单页面中,按钮通常用于提交表单数据。当用户填写完表单后,可以点击按钮将数据发送到服务器进行处理。
  2. 导航:在页面中,按钮可以用于导航到其他页面或网站。例如,用户可以点击按钮打开一个新的页面,或返回到上一个页面。
  3. 触发事件:在应用程序中,按钮可以用于触发特定的事件或操作。例如,用户可以点击按钮播放音频、视频或显示对话框等。
  4. 交互:按钮可以与其他小部件进行交互,实现更复杂的交互效果。例如,当用户点击按钮时,可以显示或隐藏其他小部件,或切换小部件的状态等。
  5. 确认操作:在执行某些操作前,按钮可以用于确认用户的选择。例如,在删除文件或数据前,可以显示一个确认对话框,让用户确认是否执行操作。

常用属性

属性作用默认值
宽设置按钮的宽度200
高设置按钮的高度40
边距参考容器#FFFCFCFC
边框参考容器

image-20250510213737076

条件生成器

条件生成器是一种工具类型的小部件,它帮助用户通过简单的逻辑设置来创建和修改条件语句。其可以与变量绑定,支持 字符串、布尔、数字、对象、数组 五种类型的表达式。

应用场景

  1. 数据筛选:在数据展示或报告应用程序中,条件生成器可以用于筛选数据。用户可以通过设置条件来筛选出符合特定条件的数据,例如筛选出年龄大于18岁的用户或状态为已发布的内容。
  2. 搜索功能:在搜索应用程序中,条件生成器可以用于构建复杂的搜索查询。用户可以通过设置多个条件来构建搜索查询,例如搜索标题包含"编程"且发布日期在2022年之后的文章。
  3. 权限控制:在权限管理系统中,条件生成器可以用于定义用户权限。管理员可以通过设置条件来定义哪些用户可以访问或修改特定的资源,例如只有管理员可以编辑高级设置。
  4. 自动化流程:在业务流程自动化系统中,条件生成器可以用于定义触发自动化任务的规则。例如,当订单状态变为"已发货"时,自动发送通知邮件给客户。
  5. 数据分析:在数据分析工具中,条件生成器可以用于创建数据分析的条件。用户可以通过设置条件来分析符合特定条件的数据集,例如分析销售额超过一定阈值的产品。
  6. 表单验证:在表单应用程序中,条件生成器可以用于创建表单字段的验证规则。例如,要求用户输入的密码长度必须大于8个字符,且包含至少一个数字。

例如,定义一个变量,在右侧的属性编辑器中进行变量绑定并设置条件

滑动列表

滚动条

  滚动条小部件是一种用于浏览和导航内容的小部件,通常出现在列表布局等容器中。

应用场景

  1. 浏览长内容:在网页或应用程序中,滚动条通常用于浏览长内容。例如,当用户打开一个包含大量文本或图像的页面时,滚动条可以帮助用户浏览和导航内容。
  2. 导航数据:在表格或数据列表中,滚动条可以用于导航数据。例如,当用户打开一个包含大量数据的表格时,滚动条可以帮助用户浏览和导航数据。
  3. 查看详细信息:在对话框或弹出窗口中,滚动条可以用于查看详细信息。例如,当用户打开一个包含详细信息的对话框时,滚动条可以帮助用户浏览和导航详细信息。
  4. 浏览历史记录:在浏览器或应用程序中,滚动条可以用于浏览历史记录。例如,当用户打开一个包含历史记录的页面时,滚动条可以帮助用户浏览和导航历史记录。
  5. 调整视图:在地图或图像查看器中,滚动条可以用于调整视图。例如,当用户打开一个包含地图或图像的页面时,滚动条可以帮助用户浏览和导航视图。

常用属性

属性作用默认值
滚动条是否可见设置滚动条是否可见200
滚动条轨道是否可见设置滚动条轨道是否可见40
滚动条厚度设置滚动条厚度4
滚动条轨道弧度设置滚动条轨道弧度12

image-20250510214636656

滑杆

  滑杆是一种用于选择和调整数值的小部件,通常由一个水平或垂直的条形区域和一个可拖动的滑块组成。

应用场景

  1. 调整音量:在音乐或视频播放器中,滑杆通常用于调整音量。用户可以通过拖动滑块来选择一个音量范围,从而调整音量大小。
  2. 调整亮度:在图像或视频编辑器中,滑杆可以用于调整亮度。用户可以通过拖动滑块来选择一个亮度范围,从而调整图像或视频的亮度。
  3. 选择进度:在音乐或视频播放器中,滑杆可以用于选择播放进度。用户可以通过拖动滑块来选择一个播放进度范围,从而跳转到指定的播放位置。
  4. 调整数值:在设置或配置页面中,滑杆可以用于调整各种数值。例如,用户可以通过拖动滑块来调整屏幕分辨率、字体大小、网络速度等。
  5. 选择范围:在数据分析和可视化工具中,滑杆可以用于选择数据范围。例如,用户可以通过拖动滑块来选择一个数据范围,从而筛选出符合条件的数据。

常用属性

属性作用默认值
初始值设置滑杆的初始值5
最小值设置滑杆的最小值0
最大值设置滑杆的最大值10
步长设置滑杆的步长
宽设置滑杆的宽度
活跃颜色设置滑杆的活跃颜色,即滑杆左侧的颜色#FF4B39EF
不活跃颜色设置滑杆的不活跃颜色,即滑杆右侧的颜色#FFE0E3E7
显示值设置为true,即滑杆滑动的过程中显示值false
设置精度即显示值的精度
禁用设置为true,即禁止滑杆滑动false

image-20250510215930789

日历

  日历是一种用于显示和选择日期的小部件,通常由一个网格或列表组成,每个格子代表一个日期。

应用场景

  1. 日期选择:在表单或设置页面中,日历可以用于选择日期。用户可以通过点击日历上的格子来选择一个日期,从而完成日期输入。
  2. 日期范围选择:在数据分析和可视化工具中,日历可以用于选择数据范围。用户可以通过拖动日历上的格子来选择一个日期范围,从而筛选出符合条件的数据。
  3. 倒计时:在倒计时或提醒应用程序中,日历可以用于显示倒计时。用户可以在日历上设置一个目标日期,并查看距离目标日期的天数。

常用属性

属性作用默认值
日期描点列表设置日历描点,在指定日期上描点,支持变量绑定
选中背景颜色设置日历的选中背景颜色#FF5C6BC0
行高设置日历的行高52
标记颜色设置日历的标记颜色#FF4CAF50
标记大小设置日历的标记大小8
星期视图开启后,则只展示当前周的日历天数false
显示头部关闭后,则不展示日历头部true
周一开始开启后,日历从周一开始,默认从周日开始false
显示格式按钮开启后,日历右上角会出现一个按钮,点击可进行切换格式false
标题文本样式参考文本
星期文本样式参考文本
日期文本样式参考文本
选中日期文本样式参考文本

image-20250510221911627

相机区域

  相机区域是一种用于拍照和视频录制的小部件,通常由一个预览窗口和一组控制按钮组成。

应用场景

  1. 拍照和视频录制:在相机应用程序中,相机区域可以用于拍照和录制视频。用户可以通过点击控制按钮来拍照或录制视频,并将拍摄的内容保存到本地或上传到服务器。
  2. 实时视频监控:在视频监控或安全监控应用程序中,相机区域可以用于实时显示监控画面。用户可以通过相机区域查看监控画面的实时情况,并进行实时监控和分析。

常用属性

属性作用默认值
宽高比设置相机区域的宽高比
像素比设置相机区域的像素比
左设置水印位置距离左侧多远
下设置水印位置距离底部多远

image-20250510221634440

定时器

切换图标

提示 Tooltip

摇杆

  摇杆是一种用于控制方向和速度的小部件,通常由一个圆形或矩形的区域和一个可拖动的遥杆组成。

应用场景

  1. 游戏控制:在游戏应用程序中,遥杆可以用于控制角色的移动和方向。用户可以通过拖动遥杆来控制角色的移动速度和方向,从而实现游戏的操作。
  2. 无人机控制:在无人机控制应用程序中,遥杆可以用于控制无人机的飞行方向和速度。用户可以通过拖动遥杆来控制无人机的飞行速度和方向,从而实现无人机的操控。
  3. 虚拟现实控制:在虚拟现实应用程序中,遥杆可以用于控制虚拟角色的移动和方向。用户可以通过拖动遥杆来控制虚拟角色的移动速度和方向,从而实现虚拟现实的交互。
  4. 工业控制:在工业控制应用程序中,遥杆可以用于控制设备的运行方向和速度。用户可以通过拖动遥杆来控制设备的运行速度和方向,从而实现设备的操控。

常用属性

背景属性
属性作用默认值
背景大小设置摇杆的背景大小200
背景颜色设置摇杆的背景颜色#FF9E9E9E
开启外环开启后,显示外环true
开启中环开启后,显示中环true
开启内环开启后,显示内环true
开启方向线开启后,显示方向线true
方向线颜色设置摇杆的方向线颜色#FFFFFFFF
摇杆属性
属性作用默认值
摇杆大小设置摇杆的摇杆大小40
摇杆背景设置摇杆的摇杆背景颜色#FF2196F3

image-20250510222640922

可拖动的

拖动目标

签名

上次更新:
上一篇
动画图表
下一篇
表单元素