在Axure中繼器的全選復(fù)選框中，有時候會出現(xiàn)“半選中狀態(tài)”，這種狀態(tài)通常用于提醒用戶，并且在一些特定場景下也有實(shí)際的應(yīng)用。本文作者分享了在Axure中全選復(fù)選框時實(shí)現(xiàn)“半選中狀態(tài)”的方法，一起來看一下吧。

在Axure中繼器的全選復(fù)選框中，有時候會出現(xiàn)“半選中狀態(tài)”，也被稱為“The indeterminate state（不確定狀態(tài)）”。這種狀態(tài)是指當(dāng)子復(fù)選框中既有選中狀態(tài)的，又有未選中狀態(tài)的時候，全選復(fù)選框就會呈現(xiàn)出這種不確定的狀態(tài)。

半選中狀態(tài)通常用于提醒用戶，并且在一些特定場景下也有其實(shí)際的應(yīng)用。例如，當(dāng)用戶在一組中繼器中選擇部分選項(xiàng)時，如果不是所有選項(xiàng)都被選中了，全選復(fù)選框就會呈現(xiàn)出半選中狀態(tài)，以提醒用戶還有未選擇的選項(xiàng)。

一、基本教程

先自行準(zhǔn)備好以下元件，自行調(diào)整元件尺寸、樣式、默認(rèn)內(nèi)容、選中時樣式等。

一個帶有多行數(shù)據(jù)的中繼器，外部包裹一個組合，內(nèi)部包含：

1）一個動態(tài)面板（取名：框選監(jiān)聽），進(jìn)階教程時使用：

• 默認(rèn)的矩形，用來顯示數(shù)據(jù)，最好添加“選中樣式”效果。
• 一個復(fù)選框，用來設(shè)置選中狀態(tài)。

2）一個3狀態(tài)的動態(tài)面板（取名：全選操作），用來顯示“全選”功能。

3）一個文本框（取名：每項(xiàng)狀態(tài)），用來記錄中繼器每項(xiàng)的選中狀態(tài)。

我們先來做全選操作的動態(tài)面板吧，演示里使用的是Axure自帶圖標(biāo)庫。三個狀態(tài)分別是：

“未選中狀態(tài)”，放入未選中圖標(biāo)，交互為：

“半選中狀態(tài)”，放入半選圖標(biāo)，交互可根據(jù)自身要求設(shè)置全選或者不選，按照自身需求來。

“全選中狀態(tài)”，放入全選圖標(biāo)，交互為：

然后中繼器的交互，這里就是初始化文本框的內(nèi)容：

中繼器外部包裹一個組合，也需要添加交互：

復(fù)選框的交互如下，U代表Unchecked未選，C代表Checked選中：

• 選中時設(shè)置的文本值為：[[Target.Text.substr(0, Item.index-1)]]C[[Target.Text.substr(Item.index)]]
• 取消選中時的文本值為：[[Target.Text.substr(0, Item.index-1)]]U[[Target.Text.substr(Item.index)]]

最后，文本框利用添加“文本改變時”實(shí)時更新動態(tài)面板。

最基本的半選功能就完成了。怎么樣？簡單易懂對吧？我們還可以再升級一下。

二、進(jìn)階先決知識

你對中繼器監(jiān)聽器了解多少？如果不明白監(jiān)聽器是什么東西，可以先閱讀一下《Axure監(jiān)聽之中繼器監(jiān)聽》這篇文章。最好能夠清楚為什么要用監(jiān)聽器、什么時候用、以及怎么用。

?。?！這個知識點(diǎn)是中繼器進(jìn)階應(yīng)用的基礎(chǔ)，很多以往非常難以實(shí)現(xiàn)的交互通過監(jiān)聽器都可輕松實(shí)現(xiàn)。

而且，在上一篇《Axure任意方向鼠標(biāo)拖拽框選》后，有很多朋友迷茫這個效果能做什么，今天的進(jìn)階教程就夢幻聯(lián)動一下。

三、進(jìn)階教程

在前面原型的基礎(chǔ)上，將框選功能的動態(tài)面板放在中繼器的下層，但需要讓“框選矩形”在初始化時“置頂”。

記得中繼器里的第一層是個動態(tài)面板吧？我們先把它做為框選監(jiān)聽器：

再在框選矩形的“拖動時”里觸發(fā)監(jiān)聽：

四、效果泰酷辣

預(yù)覽地址：https://usrsky.axshare.com/#g=1&id=281jfx

趕快添加到你的原型里秀BOSS一臉吧！

五、總結(jié)

半選中狀態(tài)是復(fù)選框中一個比較特殊的狀態(tài)，可以幫助用戶更加清晰地理解當(dāng)前選擇的情況，提高用戶體驗(yàn)。利用文本框就可以在Axure中輕松實(shí)現(xiàn)。