本篇文章，將分享一個干貨——教會你如何在Axure表格中，制作一個可以通過鼠標(biāo)拖動來調(diào)整行高列寬的中繼器表格。其過程分為四步，能幫助你快速上手，接下來，我們看看作者的操作吧。

(相關(guān)資料圖)

表格是在系統(tǒng)軟件中非常常用的工具。表格通常由行和列組成，用于以結(jié)構(gòu)化的方式顯示和組織數(shù)據(jù)。它們在各種場景中都有廣泛的應(yīng)用，包括數(shù)據(jù)分析、數(shù)據(jù)錄入、報表生成、項目管理和數(shù)據(jù)可視化等領(lǐng)域。

今天作者就教大家如何在Axure里制作一個能通過鼠標(biāo)拖動調(diào)整行高列寬的中繼器表格模板。

一、效果展示鼠標(biāo)移動到中繼器表格某行的底部，會出現(xiàn)一條可拖動的虛線，上下拖動可以調(diào)整該行的高度鼠標(biāo)移入某列表頭右側(cè)，會出現(xiàn)一套白線，左右拖動白線可以調(diào)整該列的寬度

原型地址：https://ybog3v.axshare.com/#g=1

二、制作教程1. 中繼器表格的制作

我們主要用中繼器來制作表格內(nèi)容的主體，所需元件包括矩形，文字，線段，如下圖所示擺放：

每列要有一個對應(yīng)的矩形，用于設(shè)置每列顯示的值，這些表格的小矩形我們要用透明色，不要用白色。如果用白色就會擋住下面的背景矩形，也會擋住中繼器的背景色，有需要的伙伴也可以設(shè)置單雙行交替的顏色。

操作列我們用不同顏色的文字代表不同操作即可。

背景矩形我們設(shè)置一個選中樣式，填充顏色為淺藍(lán)色。將上面所有元件組合在一起，鼠標(biāo)移入組合時，我們用選中的交互，設(shè)置背景矩形為選中狀態(tài)，這樣就做出了高亮顯示的效果。

鼠標(biāo)移出組合時，我們用取消選中的交互，將背景矩形取消選中，這種就可以恢復(fù)原來的顏色。

在矩形底部，我們要增加一條虛線，默認(rèn)我透明色，鼠標(biāo)懸停的交互樣式為黑灰色，我們要把這條線段轉(zhuǎn)為動態(tài)面板，因為只有動態(tài)面板有拖動時的交互事件。

轉(zhuǎn)為動態(tài)面板后，可以適當(dāng)調(diào)整動態(tài)面板的高度和虛線所在的位置，因為如果僅僅是1的高度，就不容易拖動到，案例中動態(tài)面板高度是5，所以線段y值為3，剛好在中部。

然后我們在中繼器器表格里添加對應(yīng)的列，有幾列內(nèi)容就添加幾列，案例中是6列：

填寫好之后，我們在中繼器每項加載時，用設(shè)置文本的交互，分別將column1~6列的內(nèi)容，設(shè)置到矩形1~6中。

這樣表格里的數(shù)據(jù)就顯示出來了，中繼器表格內(nèi)容基本就完成了。

2. 拖動設(shè)置表格行高

我們在虛線的動態(tài)面板拖動時，用移動的交互，讓他跟隨鼠標(biāo)垂直移動，這樣虛線就可以跟隨鼠標(biāo)拖動上下移動了。

不過這里需要注意，我們要設(shè)置一個虛線上下移動的范圍，如果不設(shè)置的話，就會導(dǎo)致某一行拖動之后太小，文字就會比表格高度要高。

所以我們可以通過移動事件里的界限，設(shè)置移動的邊界。

然后我們再用設(shè)置尺寸的交互，將中繼器里的組合調(diào)整他的高度，其實他的高度就是線段面板所在的底部的y坐標(biāo)值，我們可以直接用bottom函數(shù)來獲取。

這樣我們就完成了垂直方向拖動調(diào)整行高的效果了。

3. 表頭的設(shè)置

表頭主要是用矩形和垂直線，如下圖所示：

這個表格有多少列，就增加多少個矩形，表頭的矩形要和表格里對應(yīng)矩形的寬度是一致的。

然后我們在兩個矩形鏈接處增加垂直線，默認(rèn)灰色，移入樣式設(shè)置為白色，如果背景色是白色，最后一根白線就可能看不到了，所以可以自行替換成其他顏色。

和上面水平線一樣，也是要將他轉(zhuǎn)為動態(tài)面板。因為只有動態(tài)面板可以拖動，同樣的可以適當(dāng)增加動態(tài)面板的寬度和垂直線的位置，方便我們拖動到他。

這樣我們表頭就完成了。

4. 拖動設(shè)置表格列寬

鼠標(biāo)拖動垂直線面板的時候，我們首先用移動的交互，讓他跟隨鼠標(biāo)水平方向移動。

當(dāng)然了，和前面一樣，移動我們要增加一個邊界，因為這里不是在中繼器里面，所以我們要控制格子的最小值。例如是60，我們就可以用每個各自的x坐標(biāo)值+最小值60，得出拖動的邊界。

然后我們再用設(shè)置尺寸的交互，將表頭和中繼器表格里面兩個對應(yīng)的格子的寬度設(shè)置為新的寬度，新的寬度其實就是動態(tài)面板的x坐標(biāo)-對應(yīng)格子矩形的x坐標(biāo)。

那因為這里動態(tài)面板寬度不是1，我們前面為了好拖動，設(shè)置了3，所以還要減去1。

這樣就設(shè)置完成當(dāng)前的格子的尺寸，就是當(dāng)前格子尺寸設(shè)置好了。但是后面的格子是不會自動往前靠的，所以我們還需要用移動的交互，將后面的格子往前移動。

所以我們要依次移動，將2移動到1的后面，將3移動到2后面……將7移動到6后面，這里我們可以用right函數(shù)動態(tài)獲取每個矩形最右側(cè)的坐標(biāo)值。

表頭和中繼器表格里的都是這樣移動。

移動完格子之后，我們用同樣的操作，將每列的垂直線的動態(tài)面板移動到每隔的右側(cè)。

最后，因為中繼器里除了對應(yīng)每一列內(nèi)容的矩形，還有背景矩形、虛線以及其面板，如果列寬改變了，上面三個元件的尺寸同樣要跟著一起改變的。

我們用設(shè)置尺寸的交互，將他們設(shè)置成和整個表頭組合的寬度一致即可。

這樣就完成了一根垂線動態(tài)面板的交互，后面其他垂線也是一樣的交互，我們可以通過復(fù)制粘貼，選擇對應(yīng)的元件和變量即可完成。

這樣我們就完成了拖動調(diào)整行高列寬的表格原型模板的制作了，下次使用也很方便，我們只需要在中繼器表格里填寫表格值，即可自動生成交互效果。

那以上就是本期教程的全部內(nèi)容，感興趣的同學(xué)們可以動手試試哦，感謝您的閱讀，我們下期見。

本文由 @AI產(chǎn)品人 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議

該文觀點僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

關(guān)鍵詞：