編輯導(dǎo)讀：矩形長(zhǎng)度的變化是隨著文字長(zhǎng)度的變化而變化，若兩者長(zhǎng)度不統(tǒng)一，視覺體驗(yàn)會(huì)大大減分。本文用Axure教程介紹如何讓矩形寬度跟隨文字長(zhǎng)度變化，希望對(duì)你有幫助。

在Axure中，已加載的矩形的長(zhǎng)度不會(huì)隨著矩形文字的變化而變化（就算矩形設(shè)置了‘自動(dòng)適合文本寬度’也一樣）， 需要手動(dòng)設(shè)置。

變更前文本矩形寬度

變更文本后文本矩形的寬度不變，顏色和邊框同樣不會(huì)改變。

但是經(jīng)常我們會(huì)通過(guò)觸發(fā)某個(gè)觸發(fā)事件來(lái)更改矩形的文字，如果變化后的文字長(zhǎng)度不同于原文字長(zhǎng)度，那么矩形的顏色或者邊框不會(huì)跟著文字的長(zhǎng)度改變而改變（因?yàn)榫匦蔚膶捯恢睕]有改變）。

典型應(yīng)用：按鈕文字變更、toast提示母版，?需要矩形的長(zhǎng)度跟隨文字長(zhǎng)度變化而變化。

一、如何讓矩形寬度跟隨文字長(zhǎng)度變化？

技能點(diǎn)：

1. 文字的字號(hào)=文字的像素寬度。
2. 理解?width（像素寬度）和?length（文字長(zhǎng)度/個(gè)數(shù)）。

1. 元件準(zhǔn)備

• 文本矩形，命名為“顯示文本”；
• 矩形按鈕，命名為“按鈕”；

元件準(zhǔn)備

2. 具體操作

1）設(shè)置按鈕點(diǎn)擊事件

1.更改顯示文本的文字，可以多寫幾個(gè)。

2.設(shè)置顯示文本的寬度等于?文字個(gè)數(shù)(顯示文本.length)*字號(hào)+1（*+1的原因是矩形框沒有文字的時(shí)候也會(huì)占1個(gè)像素，有文字的時(shí)候要加上這個(gè)像素，有興趣的同學(xué)可以自行驗(yàn)證）。

設(shè)置顯示文本的寬度

添加顯示文本的文字為局部變量

添加變量，設(shè)置函數(shù)公式[[LVAR1.length*13+1]]

注意：當(dāng)顯示文本的左右有填充的時(shí)候，需要把填充的像素一起加上。

此時(shí)函數(shù)公式變成[[LVAR1.length*13+20+1]]

3. 預(yù)覽效果

以下為實(shí)驗(yàn)數(shù)據(jù)：

驗(yàn)證：?文字的字號(hào)=文字的像素寬度。

計(jì)算當(dāng)前字號(hào)下每個(gè)字的像素寬度，這里設(shè)置的是13號(hào)字號(hào)。把文本矩形復(fù)制成四份，分別設(shè)置每個(gè)文本矩形的文字個(gè)數(shù)為1、2、3、4個(gè)。分別記錄每個(gè)文本矩形的寬度，相減即可的出每個(gè)字的像素寬度為13。

相減可得出，每個(gè)字的寬度為13。

結(jié)論：文本矩形的寬度=文本的字?jǐn)?shù)x文字的字號(hào)+1（?矩形框沒有文字的時(shí)候也會(huì)占1個(gè)像素，在有文字的時(shí)候要加上1個(gè)像素 ）。

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

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