2.3.4 RadioButton和RadioContainer

RadioButton是HarmonyOS中的單選按鈕，繼承自AbsButton類，AbsButton繼承自Button類。AbsButton是一個抽象類，以它作為父類的組件通常用來做選擇按鈕，比如單選按鈕、多選按鈕、開關按鈕等。RadioButton 組件的屬性從 AbsButton類中繼承，RadioButton組件區別于一般 Button組件的屬性見表2-8。

單選按鈕通常是需要用戶在幾個選項中做選擇時應用的。下面來實現一個最簡單的RadioButton組件。

在上述代碼中，實現了一個 RadioButton 組件，ohos：text 屬性的屬性值為“男”，并且在它的前面有一個底色默認為白色的圓圈。當用戶點擊RadioButton組件時，代表這個單選按鈕已經被選中，它的ohos：marked屬性值會變為true，并且前面圓圈的顏色會發生變化，頁面的預覽效果如圖2-40所示。

下面增加兩個RadioButton組件，分別為“男”和“女”，用來做性別選擇。

頁面的預覽效果如圖2-41所示。

我們有慣性思維，既然是單選按鈕，那么只能從男和女之間選擇一個，并且在選擇了一個按鈕后，另一個按鈕就會變成未被選中狀態。但是由于每個單選按鈕都有被選中狀態和未被選中狀態，并不能影響其他按鈕的狀態，所以在上面的代碼作用下，我們可以同時選中“男”和“女”，頁面的預覽效果如圖2-42所示。

要解決這個問題，需要對按鈕進行分組，保證只有同一個組內的單選按鈕才是互斥的，這就需要用到RadioContainer組件。

RadioContainer組件繼承自DirectionalLayout，其屬性來自DirectionalLayout。從名字上來看，它是單選按鈕的容器。我們可以使用這個組件對單選按鈕進行分組，代碼如下。

在 RadioButton 組件外層包裹了一層 RadioContainer 組件來標識此RadioContainer組件內的RadioButton組件是同一組的，內部的RadioButton組件具有互斥性，當選中其中某一個RadioButton組件后，其他RadioButton組件的狀態都會變為未被選中，頁面的預覽效果如圖2-43所示。

還可以通過 ohos：text_color_on、ohos：text_color_off、ohos：check_element屬性對 RadioButton 組件進行樣式上的修改。其他代碼不變，對 RadioButton組件增加上面三個屬性。

這里的 ohos：check_element 屬性引用了一個自定義樣式文件 checkbox_check_element.xml，該文件保存在graphic目錄下，內容如下。

該文件是樣式選擇文件，根節點為＜state-container＞，子標簽包含兩個item，代表兩種組件狀態。每個item都通過ohos：state屬性進行按鈕狀態的選擇，通過 ohos：element 屬性指定該狀態下的組件的樣式文件。兩個 item 分別針對RadioButton組件前面的圓形標識符被選中和未被選中進行了不同的樣式選擇，每種狀態的樣式文件都通過“$graphic”來引用。單選按鈕被選中時的樣式文件checkbox_element_checked.xml的代碼如下。

這個資源文件指定了單選按鈕被選中時，前面標識符的樣式為帶背景顏色的圓角矩形。當按鈕未被選中時，僅把背景顏色改成灰色，樣式文件checkbox_element_unchecked.xml的代碼如下。

頁面的預覽效果如圖2-44所示。

下面用 Java 代碼對單選按鈕進行操作，首先為 RadioContainer 組件添加ohos：id屬性。

在MainAbilitySlice中編寫以下代碼。

在上述代碼中，添加了RadioContainer.CheckedStateChangedListener（）事件監聽方法，當 RadioContainer 組件內的 RadioButton 組件狀態發生變化時會回調這個方法。在onCheckedChanged（RadioContainer radioContainer，int i）方法中，可以通過入參i的值來對單選按鈕進行索引，按照單選按鈕的擺放順序，索引值從0開始遞增。在這個案例中，值為“男”的單選按鈕的索引值為0，值為“女”的單選按鈕的索引值為 1。在對應的 switch-case 語句分支中，可以對不同的按鈕進行區分來完成不同的操作。