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

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

一、模塊功能概述

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

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

二、準備工作與元件布局

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

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

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

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

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

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

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

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

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

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

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

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

• 點擊“+”號添加三列，分別命名為 name， age， role。

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

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

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

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

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

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

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

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

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

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

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

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

• 在目標中繼器下拉框中，選擇“PersonRepeater”。

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

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

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

• 新建交互：事件為“單擊時”。

• 添加動作：“中繼器” -> “添加行”。

• 目標中繼器選擇“PersonRepeater”。

• 在“添加行到”選項，可以選擇“底部”或“頂部”。

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

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

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

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

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

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

五、

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