Axure中繼器實現簡易人員添加與刪除模塊

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

一、模塊功能概述

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

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

二、準備工作與元件布局

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

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

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

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

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

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

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

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

三、配置中繼器數據與交互

這是最關鍵的一步，將靜態元件與動態數據綁定。

1. 設置中繼器數據集：

• 選中“PersonRepeater”中繼器，在右側“樣式”面板中找到“數據集”。

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

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

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

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

1. 綁定數據到元件：

• 再次雙擊進入中繼器內部項編輯狀態。

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

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

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

1. 實現刪除交互：

• 在中繼器內部項中，選中刪除按鈕（DeleteBtn）。

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

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

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

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

1. 實現添加交互：

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

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

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

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

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

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

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

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

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

四、優化與預覽

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

五、

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