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

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

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

一、基本教程

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最基本的半選功能就完成了。怎么樣？簡(jiǎn)單易懂對(duì)吧？我們還可以再升級(jí)一下。

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

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

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

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

三、進(jìn)階教程

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

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

再在框選矩形的“拖動(dòng)時(shí)”里觸發(fā)監(jiān)聽(tīng)：

四、效果泰酷辣

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

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

五、總結(jié)

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