交互行为

按钮

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

应用场景

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

常用属性

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

条件生成器

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

应用场景

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

常用属性

属性	作用	默认值
输入条件表达式	在复杂的页面逻辑下，单条的逻辑表达式满足不了要求，此时需要我们手动输入判断逻辑	false
表达式	该表达式直接输入即可，不用加${}
第一个值	只在输入条件表达式关闭时有效，该值为当前页面中的变量，需要用户手动选择	40
计算类型	支持的计算种类有 =、>=、<、<=、=、!=、不为null、为null、包含、不包含、数组下标	#FFFCFCFC
第二个值	支持变量和常量，变量需要用户主动去选择，如果是常量则需要手动输入值，String类型的值不用加""，系统会自动拼接

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

滑动列表

  滑动列表小部件是用来展示和操作一系列项目的。你可以把它想象成一个手机上的联系人列表，每个联系人都是一个项目，用户可以通过上下滑动来查看不同的联系人。滑动列表小部件支持很多高级功能，比如添加、删除、更新项目等。你还可以自定义每个项目的显示内容和交互行为，比如添加图片、按钮、开关等。总的来说，滑动列表小部件就是用来在 Flutter 应用中展示和操作一系列项目的，可以提升应用的实用性和用户体验。

应用场景

1. 联系人列表：在通讯录或者社交应用中，滑动列表小部件可以用来展示用户的联系人列表，用户可以通过滑动来查看不同的联系人。
2. 消息列表：在聊天或者通讯应用中，滑动列表小部件可以用来展示用户的聊天消息列表，用户可以通过滑动来查看不同的聊天记录。
3. 任务列表：在任务管理或者待办事项应用中，滑动列表小部件可以用来展示用户的任务列表，用户可以通过滑动来查看不同的任务。
4. 商品列表：在电商或者购物应用中，滑动列表小部件可以用来展示用户的商品列表，用户可以通过滑动来查看不同的商品。
5. 新闻列表：在新闻或者阅读应用中，滑动列表小部件可以用来展示用户的新闻列表，用户可以通过滑动来查看不同的新闻。

常用属性

属性	作用	默认值
可滑动	设置滑动列表是否可滑动	true
打开滑动	设置滑动列表是否打开滑动	false
滑动方向	设置滑动列表的滑动方向 添加操作是指添加打开滑动展开的按钮 删除操作是指删除打开滑动展开的按钮	左滑
样式属性	参考列表标题

滚动条

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

应用场景

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

常用属性

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

滑杆

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

应用场景

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

常用属性

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

日历

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

应用场景

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

常用属性

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

相机区域

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

应用场景

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

常用属性

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

定时器

  定时器小部件是用来创建和展示倒计时或者计时器的。你可以设置一个时间，然后定时器就会开始倒计时，当时间到达时，它会发出提示。定时器小部件可以自定义倒计时的时间、显示格式等属性，还可以在时间到达时触发一个事件，比如播放声音、显示提示等。

应用场景

1. 倒计时应用：在倒计时应用中，定时器小部件可以用来创建各种倒计时，比如生日倒计时、考试倒计时等。
2. 计时器应用：在计时器应用中，定时器小部件可以用来创建各种计时器，比如烹饪计时器、运动计时器等。
3. 游戏倒计时：在游戏或者教育应用中，定时器小部件可以用来创建游戏倒计时，比如比赛开始前的倒计时。
4. 任务管理：在任务管理或者待办事项应用中，定时器小部件可以用来创建任务的倒计时，提醒用户任务的截止时间。
5. 冥想和放松：在冥想或者放松应用中，定时器小部件可以用来创建冥想或者放松的计时器，帮助用户更好地控制时间。

常用属性

属性	作用	默认值
类型	设置定时器的类型	倒计时
时间格式	设置定时器的时间格式	mm:ss
倒计时时间	设置定时器的倒计时时间	60000
更新间隔	设置定时器的更新间隔	1000
定时器文本样式	设置定时器的文本样式，参考文本

切换图标

  切换图标小部件是用来创建可以切换状态的图标。你可以把它想象成一个开关按钮，当你点击它时，它会从一个图标切换到另一个图标，比如从"关闭"图标切换到"开启"图标。切换图标小部件可以自定义两个图标的样式、大小、颜色等属性，还可以在图标切换时触发一个事件，比如改变应用的设置或者状态。

应用场景

1. 夜间模式切换：在应用中，切换图标小部件可以用来切换夜间模式和日间模式，比如从太阳图标切换到月亮图标。
2. 声音开关：在媒体或者游戏应用中，切换图标小部件可以用来切换声音的开启和关闭，比如从静音图标切换到声音图标。
3. 喜欢和不喜欢：在社交或者内容分享应用中，切换图标小部件可以用来表示用户是否喜欢某个内容，比如从空心心形图标切换到实心心形图标。
4. 收藏和取消收藏：在电商或者阅读应用中，切换图标小部件可以用来表示用户是否收藏了某个商品或者文章，比如从空心星形图标切换到实心星形图标。
5. 阅读模式切换：在阅读或者新闻应用中，切换图标小部件可以用来切换阅读模式，比如从普通模式切换到简洁模式。

常用属性

打开图标属性

参考图标

关闭图标属性

参考图标

边距

参考容器边距

提示

  提示小部件是用来显示提示信息的。你可以把它想象成一个气泡，当用户长按或者单击在一个元素上时，这个气泡就会弹出，显示一些简短的提示信息。总的来说，提示小部件就是用来在 Flutter 应用中显示提示信息的，可以提升应用的可用性和用户体验。

应用场景

1. 按钮功能说明：在应用中，提示小部件可以用来解释按钮的功能，比如一个复杂的图标按钮，用户可能不清楚它的作用，长按按钮时可以显示提示信息。
2. 表单字段说明：在表单或者注册页面中，提示小部件可以用来解释表单字段的填写要求，比如密码强度要求、邮箱格式要求等。
3. 工具栏提示：在一些工具栏或者导航栏中，提示小部件可以用来解释每个工具或者导航项的作用，帮助用户更好地理解和使用这些功能。
4. 图表数据说明：在展示图表或者数据可视化的应用中，提示小部件可以用来解释图表中的数据点，比如某个柱状图的高度代表什么数据。
5. 游戏操作说明：在游戏或者教育应用中，提示小部件可以用来解释游戏规则或者操作方法，帮助用户更快地上手。

常用属性

属性	作用	默认值
提示文本	设置提示的内容，参考文本
边框	设置提示的边框，参考容器边框
边距	设置提示的边距，参考容器边距
触发模式	设置提示的触发模式	单击
提示框高度	设置提示的提示框高度	80
等待时长	设置提示的等待时长，单位ms
显示时长	设置提示的显示时长，单位ms
背景颜色	设置提示的背景颜色	#FFC8C8C8

摇杆

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

应用场景

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

常用属性

背景属性

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

摇杆属性

属性	作用	默认值
摇杆大小	设置摇杆的摇杆大小	40
摇杆背景	设置摇杆的摇杆背景颜色	#FF2196F3

可拖动的

  拖动目标组件用于作为拖拽操作的落点。当用户将可拖动组件拖拽到该区域时，根据配置可触发数据处理、插入节点、位置变更等功能。支持校验拖入条件、显示提示样式、反馈拖拽内容。

应用场景

1. 表单构建器设计区域  用于从左侧拖动组件放入设计区形成新表单结构。
2. 动态面板布局调整  用于将子组件拖动到可放置的容器或指定布局内。
3. 数据驱动的拖入处理  如将列表项拖入某个类别区进行归类、排序等。

常用属性

可拖动的子组件属性

未拖动状态下的组件信息

属性	作用	默认值
子组件名称	点击跳转到对应子组件属性页面
展示此页面	勾选后再页面中展示此组件

移动时反馈组件属性

拖动状态下的组件信息

属性	作用	默认值
子组件名称	点击跳转到对应子组件属性页面
展示此页面	勾选后再页面中展示此组件

拖动目标

  拖动目标组件作为拖放行为的接收端，能够响应可拖动组件的悬停、释放等交互。其在拖拽过程中可高亮、替换组件或样式，用于引导用户完成有效拖拽放置。同时可进行放置逻辑校验，提升容错性与交互体验。

应用场景

和可拖动组件配合使用

常用属性

属性	作用	默认值
宽	设置拖动目标的宽度	最大宽度
高	设置拖动目标的高度	120
宽最大值	限制拖动目标的最大宽度，避免过度扩展
高最大值	限制拖动目标的最大高度，避免过度扩展
宽最小值	设置拖动目标的最小宽度，确保基本显示效果
高最小值	设置拖动目标的最小高度，确保基本显示效果

签名

  签名小部件是用来创建和收集用户签名的。你可以把它想象成一个电子版的签名板，用户可以在上面用手指或者鼠标画出自己的签名。签名小部件可以自定义画布的大小、颜色、线条粗细等属性，还可以在用户完成签名后获取签名的图像或者数据。

应用场景

1. 电子合同：在需要用户签署电子合同的应用中，签名小部件可以用来收集用户的签名，作为合同的一部分。
2. 订单确认：在电商或者服务应用中，签名小部件可以用来收集用户对订单的确认，作为订单的一部分。
3. 医疗记录：在医疗或者健康应用中，签名小部件可以用来收集患者的签名，作为医疗记录的一部分。
4. 法律文件：在法律或者咨询应用中，签名小部件可以用来收集用户对法律文件或者咨询意见的确认。
5. 学校作业：在教育或者学习应用中，签名小部件可以用来收集学生的签名，作为作业或者报告的一部分。

常用属性

属性	作用	默认值
宽	设置签名的宽度	无限
高	设置签名的高度	300
笔画宽度	设置签名的笔画宽度	3
笔的颜色	设置签名笔的颜色	#FF000000
背景颜色	设置签名的背景颜色	#FF9E9E9E

菜单按钮

  常见的选择按钮，点击后会弹出一个下拉菜单，让你选择不同的操作选项。

应用场景

1. 聊天列表中的消息选项（复制、转发、删除）
2. 图片查看器中的操作（保存、分享、设为壁纸）
3. 文件管理器中的文件操作（重命名、移动、删除）

常用属性

属性	作用	默认值
选中的值	模拟选中效果
菜单列表	用于添加或删除菜单按钮的菜单项	300
背景颜色	设置菜单按钮的背景颜色	#FFFEF7FF
阴影大小	设置菜单按钮的阴影大小	8
是否可用	设置菜单按钮是否可用	true
是否启用反馈	设置菜单按钮是否启用反馈	true
鼠标悬停提示内容	设置菜单按钮的鼠标悬停提示内容
菜单偏移量	设置菜单按钮的 X轴、Y轴 偏移量	0
内边距	参考容器	上下10、左右0
圆角	参考容器	2