中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

表格是在系統軟件中非常常用的工具。表格通常由行和列組成，用于以結構化的方式顯示和組織數據。它們在各種場景中都有廣泛的應用，包括數據分析、數據錄入、報表生成、項目管理和數據可視化等領域。

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

一、效果展示

1. 鼠標移動到中繼器表格某行的底部，會出現一條可拖動的虛線，上下拖動可以調整該行的高度
2. 鼠標移入某列表頭右側，會出現一套白線，左右拖動白線可以調整該列的寬度

二、制作教程

1. 中繼器表格的制作

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

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

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

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

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

在矩形底部，我們要增加一條虛線，默認我透明色，鼠標懸停的交互樣式為黑灰色，我們要把這條線段轉為動態面板，因為只有動態面板有拖動時的交互事件。

轉為動態面板后，可以適當調整動態面板的高度和虛線所在的位置，因為如果僅僅是1的高度，就不容易拖動到，案例中動態面板高度是5，所以線段y值為3，剛好在中部。

然后我們在中繼器器表格里添加對應的列，有幾列內容就添加幾列，案例中是6列：

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

這樣表格里的數據就顯示出來了，中繼器表格內容基本就完成了。

2. 拖動設置表格行高

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

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

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

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

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

3. 表頭的設置

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

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

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

和上面水平線一樣，也是要將他轉為動態面板。因為只有動態面板可以拖動，同樣的可以適當增加動態面板的寬度和垂直線的位置，方便我們拖動到他。

這樣我們表頭就完成了。

4. 拖動設置表格列寬

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

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

然后我們再用設置尺寸的交互，將表頭和中繼器表格里面兩個對應的格子的寬度設置為新的寬度，新的寬度其實就是動態面板的x坐標-對應格子矩形的x坐標。

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

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

所以我們要依次移動，將2移動到1的后面，將3移動到2后面……將7移動到6后面，這里我們可以用right函數動態獲取每個矩形最右側的坐標值。

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

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

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

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

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

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

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

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