Axure中繼器實(shí)現(xiàn)簡易人員添加與刪除模塊

Axure RP作為一款強(qiáng)大的原型設(shè)計(jì)工具，其“中繼器”（Repeater）組件是實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)展示和交互的核心功能之一。通過中繼器，我們可以模擬真實(shí)的數(shù)據(jù)增刪改查操作，而無需編寫代碼。本文將詳細(xì)介紹如何使用Axure中繼器創(chuàng)建一個(gè)簡易的人員添加與刪除模塊。

一、模塊功能概述

本模塊旨在模擬一個(gè)簡單的人員信息管理系統(tǒng)，具備以下基本功能：

1. 展示人員列表：顯示現(xiàn)有人員的姓名、年齡和職位。
2. 添加新人員：通過表單輸入信息，將新人員添加到列表中。
3. 刪除人員：點(diǎn)擊列表中每條記錄旁的刪除按鈕，可移除該人員。

二、準(zhǔn)備工作與元件布局

1. 創(chuàng)建中繼器：從Axure元件庫中拖入一個(gè)“中繼器”到畫布上。將其命名為“PersonRepeater”。
2. 設(shè)計(jì)中繼器內(nèi)部項(xiàng)：雙擊中繼器進(jìn)入編輯狀態(tài)。在內(nèi)部畫布上，放置用于顯示數(shù)據(jù)的元件，例如：

• 三個(gè)“矩形”或“文本標(biāo)簽”，分別用于綁定顯示“姓名”、“年齡”、“職位”。建議將它們命名，如 NameLabel， AgeLabel， RoleLabel。

• 一個(gè)“按鈕”或“鏈接按鈕”，作為刪除按鈕，命名為 DeleteBtn。

• 將這些元件水平排列，形成一個(gè)列表項(xiàng)的行樣式。調(diào)整中繼器尺寸，使其能容納一行數(shù)據(jù)。

1. 設(shè)計(jì)添加表單：在中繼器外部畫布上，放置輸入框和按鈕：

• 三個(gè)“單行文本框”，分別命名為 InputName， InputAge， InputRole。

• 一個(gè)“主要按鈕”，命名為 AddButton，文本為“添加”。

1. 布局：將添加表單放置于畫布上方，中繼器放置于下方，形成一個(gè)清晰的上下結(jié)構(gòu)。

三、配置中繼器數(shù)據(jù)與交互

這是最關(guān)鍵的一步，將靜態(tài)元件與動(dòng)態(tài)數(shù)據(jù)綁定。

1. 設(shè)置中繼器數(shù)據(jù)集：

• 選中“PersonRepeater”中繼器，在右側(cè)“樣式”面板中找到“數(shù)據(jù)集”。

• 點(diǎn)擊“+”號(hào)添加三列，分別命名為 name， age， role。

• 在下方行中，可以預(yù)先添加幾行示例數(shù)據(jù)，例如：

• 行1: name=“張三”， age=“28”， role=“設(shè)計(jì)師”

• 行2: name=“李四”， age=“32”， role=“工程師”

1. 綁定數(shù)據(jù)到元件：

• 再次雙擊進(jìn)入中繼器內(nèi)部項(xiàng)編輯狀態(tài)。

• 選中用于顯示姓名的元件（如 NameLabel），在右側(cè)“交互”面板的“文本”屬性下，點(diǎn)擊“更多事件”圖標(biāo)（fx），選擇“值”。

• 在打開的編輯框中，點(diǎn)擊“插入變量或函數(shù)”，選擇“中繼器/數(shù)據(jù)集”下的 Item.name。這樣，該元件的文本就會(huì)動(dòng)態(tài)綁定到數(shù)據(jù)集每一行的 name 列。

• 同理，將 AgeLabel 綁定到 Item.age，將 RoleLabel 綁定到 Item.role。

1. 實(shí)現(xiàn)刪除交互：

• 在中繼器內(nèi)部項(xiàng)中，選中刪除按鈕（DeleteBtn）。

• 在右側(cè)“交互”面板，點(diǎn)擊“新建交互”。選擇事件“單擊時(shí)”。

• 在動(dòng)作列表中，選擇“中繼器” -> “刪除行”。

• 在目標(biāo)中繼器下拉框中，選擇“PersonRepeater”。

• 在“行”的設(shè)置中，選擇“This”，表示刪除按鈕所在的當(dāng)前行。

1. 實(shí)現(xiàn)添加交互：

• 回到主畫布，選中“添加”按鈕（AddButton）。

• 新建交互：事件為“單擊時(shí)”。

• 添加動(dòng)作：“中繼器” -> “添加行”。

• 目標(biāo)中繼器選擇“PersonRepeater”。

• 在“添加行到”選項(xiàng)，可以選擇“底部”或“頂部”。

• 最關(guān)鍵的是配置“值”：點(diǎn)擊“自定義”，在彈出的對(duì)話框中，為每一列賦值：

• 對(duì)于 name 列，點(diǎn)擊“fx”，設(shè)置值為 [[LVAR1]]，然后在下方“局部變量”中，新建變量LVAR1，設(shè)置為“元件文字”于元件 InputName。這表示獲取 InputName 輸入框中的文本。

• 同理，設(shè)置 age 列為 InputAge 的文本，role 列為 InputRole 的文本。

• （可選但推薦） 在添加動(dòng)作后，可以再添加一個(gè)“設(shè)置文本”動(dòng)作，將三個(gè)輸入框 InputName， InputAge， InputRole 的文本清空，以方便下一次輸入。

四、優(yōu)化與預(yù)覽

1. 樣式美化：可以為中繼器內(nèi)部項(xiàng)、輸入框、按鈕等設(shè)置填充色、邊框、字體等樣式，使界面更美觀。
2. 布局調(diào)整：確保中繼器設(shè)置為“垂直布局”，這樣新增的行會(huì)自動(dòng)向下排列。可以在中繼器樣式中調(diào)整“間距”。
3. 數(shù)據(jù)驗(yàn)證（可選）：可以通過添加“條件”交互，在點(diǎn)擊“添加”按鈕時(shí)檢查輸入框是否為空，并給出提示。
4. 預(yù)覽：點(diǎn)擊Axure工具欄的“預(yù)覽”按鈕，或在瀏覽器中打開生成的HTML文件。現(xiàn)在，你可以測試功能了：在輸入框中填寫信息，點(diǎn)擊“添加”，新人員會(huì)出現(xiàn)在列表中；點(diǎn)擊任何一行旁邊的“刪除”按鈕，該行會(huì)被移除。

五、

通過上述步驟，我們利用Axure中繼器成功構(gòu)建了一個(gè)具備基礎(chǔ)CRUD（創(chuàng)建、讀取、刪除）功能的人員管理模塊原型。整個(gè)過程清晰地展示了中繼器數(shù)據(jù)集、數(shù)據(jù)綁定、以及通過交互動(dòng)作操作數(shù)據(jù)集（添加行、刪除行）的核心邏輯。掌握這個(gè)基礎(chǔ)模塊后，你可以進(jìn)一步擴(kuò)展功能，例如添加編輯、搜索、篩選或分頁，從而創(chuàng)建出更加復(fù)雜和逼真的數(shù)據(jù)驅(qū)動(dòng)型原型。