Axure中继器教程及案例详解

news2024/9/20 0:51:21

Axure RP 是一款强大的原型设计工具,广泛应用于产品设计、UI/UX 设计及交互设计中。中继器(Repeater)作为 Axure 中的一个重要元件,以其强大的数据处理和动态交互能力,成为设计师们不可或缺的工具。本文将从中继器基础、进阶、高级应用,以及分页控制、合计、列表拖动、列表滑动删除、表内修改等方面,详细介绍中继器的使用方法和案例。

预览地址:https://1zvcwx.axshare.com

一、中继器基础

创建中继器

  1. 拖入中继器:在 Axure 画布中,从元件库(Libraries)面板中的“通用(Common)”元件库中拖入一个中继器(Repeater)。
  2. 编辑中继器内容:双击中继器进入编辑模式,可以添加或删除内部元件,如矩形、文本框、图片等。这些元件将作为重复项的基础模板。

设置中继器数据

  1. 添加数据列:在中继器的“样式”面板中,通过“数据集(Dataset)”部分可以添加数据列,列名即为变量名。
  2. 输入数据:在数据集表格中,可以输入具体的数据,每行代表一个数据项。

引用数据变量

在中继器内部,通过[[Item.varName]]的方式引用数据变量,其中varName是数据列的名称。例如,如果有一个名为“name”的数据列,则可以通过[[Item.name]]来引用。

二、中继器进阶

动态列表/表格

中继器可以将数据以列表或表格的形式展示,并支持自定义样式和布局。例如,可以制作产品列表、新闻列表等。

数据筛选和排序

中继器支持数据筛选和排序功能。通过设置筛选条件和排序规则,可以方便地查找和比较数据。例如,可以按价格从低到高排序产品列表。

数据编辑和删除

通过添加编辑和删除按钮,并设置相应的交互事件(如“更新行”和“删除行”),中继器允许用户修改和删除数据项。这可以模拟真实的数据操作流程。

三、中继器高级

分页控制

默认情况下,中继器不分页显示所有数据。为了优化用户体验和系统性能,可以对中继器进行分页。在“样式”窗口中,选中“分页”选项,并设置每页显示的项目数量和起始页。

合计

对于需要合计的数据(如财务报表、统计图表),中继器提供了便捷的计算方式。通过在表尾添加合计项,并使用Item.varName + target.text等表达式,可以实现数据的自动合计。

列表拖动

为了增加交互性,中继器支持列表拖动功能。这通常需要使用动态面板来实现。通过设置拖动开始、拖动过程中和拖动结束时的交互事件,可以模拟列表项的拖动排序效果。

列表滑动删除

列表滑动删除是移动应用中常见的交互方式。虽然 Axure 没有直接提供滑动删除的功能,但可以通过添加滑动手势的交互模拟来实现。例如,使用“拖动”事件结合“条件判断”和“删除行”操作,可以模拟滑动删除的效果。

表内修改

表内修改是指直接在表格中编辑数据项的内容。通过在表格中添加文本框等输入元件,并设置“失去焦点”时的交互事件(如“更新行”),可以实现数据的即时修改。

分页器控制

合计(包含自动合计/选中合计)

列表拖动

表内修改

中继器是 Axure RP 中一个功能强大的元件,它允许用户快速创建、展示和操作重复的数据项。通过掌握中继器的基础、进阶和高级应用,设计师们可以制作出更加真实和可靠的原型设计。无论是产品列表、新闻列表还是用户评论区,中继器都能提供便捷的数据处理和动态交互解决方案。希望本文的教程和案例能够帮助大家更好地理解和应用中继器。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2102435.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

LLM agentic模式之multi-agent: ChatDev,MetaGPT, AutoGen思路

文章目录 Multi-agentChatDev设计阶段编码阶段测试阶段文档编写 MetaGPTSOP模式下的Agent通信协议带执行反馈的迭代编程 AutoGenconversable agentsConversation ProgrammingAutoGen的应用 参考资料 Multi-agent ChatDev ChatDev出自2023年7月的论文《ChatDev: Communicative…

告别文档处理烦恼,PDF Guru Anki一键搞定所有

前言 知识就像烛光,能照亮一个人,也能照亮无数人,科技之光更是如此;这一理念深刻地影响了我们如何看待和应用新技术。正是在这样的背景下,一款集PDF处理与高效学习工具于一体的软件——PDF Guru Anki应运而生&#xf…

AI论文生成可靠吗?分享6款AI论文题目生成器网站

在当今学术研究和写作领域,AI论文题目生成器网站的出现极大地简化了学术写作流程。这些工具不仅能够帮助用户快速生成高质量的论文题目,还能提供文献推荐、论文润色等功能,从而提高写作效率和质量。以下是六款值得推荐的AI论文题目生成器网站…

glsl着色器学习(六)

准备工作已经做完,下面开始渲染 gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);gl.clearColor(0.5, 0.7, 1.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);gl.enable(gl.DEPTH_TEST); gl.enable(gl.CULL_FACE);设置视口 gl.viewport(0,…

轻量级的git-server工具:docker部署gogs

背景 创建一个自己使用的git server,让平时使用的代码之类的可以直接传到自己的服务器上,进行远程管理。由于一个人使用,gitlab 太重,所以选择gogs来实现功能。 系统:openEuler 22.03 (LTS-SP3) ip: 192.168.100.31 …

【Linux】Linux项目自动化构建工具 - make/Makefile

目录 一、make/Makefile的背景二、make/Makefile的基本概念三、依赖关系四、依赖方法五、make/Makefile原理六、Makefile的伪目标七、Makefile的变量八、Makefile的推导能力结尾 一、make/Makefile的背景 一个工程中的源文件不计数,其按类型、功能、模块分别放在若…

【Java 基础】:三大特征之多态

✨ 杏花疏影里,吹笛到天明 🌏 📃个人主页:island1314 🔥个人专栏:java学习 ⛺️ 欢迎关注:👍点赞 👂&…

JVM参数有哪些?

JVM调优主要是通过定制JVM参数来提Java应用程序的运行速度 JVM参数大致可以分为三类: 1、标准指令:-开头,这些是所有的HotSPot都支持的参数。可以用java -help打印出来; 2、非标准指令:-X开头…

Mysql高级篇(上)—— Mysql架构介绍(二)

Mysql高级篇(上) MySQL架构介绍(二)逻辑架构逻辑架构剖析MySQL8.0中SQL执行流程Linux环境下MySQL8.0中SQL执行原理MySQL语法顺序Oracle中SQL执行流程(了解)数据库缓存池 buffer pool(了解&#…

86、pod部署策略

一、集群的调度 集群的调度: 怎么把pod部署到节点的方法。 1.1、调度的过程: scheduler是集群的调度器,主要任务就是把pod部署到节点上。 1.2、自动调度: 1、公平,保证每个可用的节点都可以部署pod 2、资源的高…

什么是工控安全,产线工控安全加固的方法

一、工控安全概述 想要了解工控安全,首先要了解其资产对象本身,也就是工业控制系统。 1、什么是工控 关于工业控制系统的定义,网上有很多,我就不再赘述,下面这张图是我从csdn找到的,个人觉得还不错。对照…

【多线程】CountDownLatch的简单实现

通过上一篇对CountDownLatch的使用,我们也明白了他的基本原理,接下来我们一起来实现一个CountDownLatch的基础效果 新建一个抽象类,包含countDownLatch需要的参数和方法 package com.atguigu.signcenter.nosafe.chouxiang;/*** author: jd* …

k8s集群的调度

目录 自动调度的原则 调度约束机制:list-watch apiserver和组件之间的watch机制 调度过程的默认算法 1.预算策略 预算的算法 2.优选策略 优选的算法 *用户定制节点部署 1.强制性节点部署 2.节点标签部署(匹配机制) 标签的增删改查…

selenium无法定位元素的几种解决方案

🍅 点击文末小卡片,免费获取软件测试全套资料,资料在手,涨薪更快 1、frame/iframe表单嵌套 WebDriver只能在一个页面上对元素识别与定位,对于frame/iframe表单内嵌的页面元素无法直接定位。 解决方法: d…

Hadoop 下载

下载法一:官方下载 hadoop官网 1.选择要下载的版本,这里我以3.4.0为例进行说明; 2.跳转后,选择对应系统架构的,进行下载; 下载法二:国内镜像源下载 1.阿里云 这里我以mac m1为案例&#x…

【已解决】Halcon错误代码4104

问题描述 在运行的时候发现报错4104,如下图所示 解决 从字面上理解就是超出了计算机的内存空间了,那么着手解决的话就需要把没次训练的张数减少一些即可。去相对应的修改batch_size即可。 结果 如下图所示,正常在使用GPU训练。 搞定&…

Xilinx FFT IP使用

简介 本章节主要介绍FFT原理,以及Xilinx的FFT IP使用说明做详细介绍。 FFT介绍 FFT主要是将时域信号转换成频域信号,转换后的信号更方便分析。首先,FFT是离散傅立叶变换 (DFT) 的快速算法,那么说到FFT,我们自然要先讲清楚傅立叶变换。先来看看傅立叶变换是从哪里来的? 傅…

虚拟机无法打开网卡 service network restart失败

问题描述 命令重启网卡服务,结果报错如下:Job for network.service failed because the control process exited with error code. See "systemctl status network.service" and "journalctl -xe" for details 根据提示&#xff…

Hi3061M开发板初测——点亮小灯

目录 前言环境配置点亮led源码IDA集成了串口监视器最后下载到开发板中运行 前言 海思MCU体验官活动,Hi3061M开发板到手后,配置环境初步测试点亮小灯。 环境配置 环境配置按照gitee提供的redeme一步一步来配置起来很顺利。具体可自行查阅:环境…

文件包含漏洞PHP伪协议利用方法

使用php伪协议的前提 php.ini中的allow_url_fopen 、allow_url_include这两个参数需要修改为on 1.file协议 使用file协议读取Windows的系统文件 http://127.0.0.1/123.php?cmdfile:///c:/windows/system32/drivers/etc/hosts 2.php://filter协议 使用php://filter协议可以…