自學鴻蒙應用開發(fā)(11)- RadioButton和RadioContainer
本文介紹在鴻蒙應用中RadioButton和RadioContainer組件的基本用法。
增加RadioButton和RadioContainer組件
如下代碼中46行~66行所示,在布局中增加RadioButton和RadioContainer組件。
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="vertical"><Componentohos:height="0vp"ohos:weight="3"ohos:width="match_parent"/><DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_content"ohos:width="match_content"ohos:layout_alignment="center"ohos:orientation="vertical"><Imageohos:id="$+id:image"ohos:width="match_content"ohos:height="match_content"ohos:layout_alignment="center"ohos:image_src="$media:DevEco"/><TextFieldohos:id="$+id:text_field"ohos:width="match_parent"ohos:height="30vp"ohos:text_size="20fp"ohos:text_alignment="center"ohos:hint="Please input text and press [Click me!] button."ohos:background_element="$graphic:background_text_field"/><Buttonohos:id="$+id:hello_button"ohos:width="match_content"ohos:height="match_content"ohos:text_size="27fp"ohos:text="Click me!"ohos:layout_alignment="center"ohos:background_element="$graphic:background_button"ohos:margin="15vp"ohos:right_padding="8vp"ohos:left_padding="8vp"/><RadioContainerohos:id="$+id:radio_container"ohos:height="match_content"ohos:width="match_content"ohos:top_margin="32vp"ohos:layout_alignment="horizontal_center"ohos:orientation="horizontal"><RadioButtonohos:id="$+id:r24h"ohos:height="40vp"ohos:width="match_content"ohos:text="24H"ohos:marked="true"ohos:text_size="20fp"/><RadioButtonohos:id="$+id:r12h"ohos:height="40vp"ohos:width="match_content"ohos:text="12H"ohos:text_size="20fp"/>RadioContainer>????????<TimePickerohos:id="$+id:time_picker"ohos:24_hour_mode="false"ohos:height="match_content"ohos:width="match_parent"ohos:layout_alignment="horizontal_center"ohos:text_am="AM"ohos:text_pm="PM"ohos:normal_text_size="20fp"ohos:selected_text_size="25fp"/>DirectionalLayout><Componentohos:height="0vp"ohos:weight="5"ohos:width="match_parent"/>DirectionalLayout>
代碼中組件id被指定為radio_container,會在下面的響應代碼中用到。
在代碼中使用RadioButton和RadioContainer組件
下面代碼中的第18行獲取RadioContainer組件后,在第22行根據(jù)RadioContainer的狀態(tài)更新TimePicker的形式,然后在第40行~43行為RadioContainer增加響應處理,其內容是同樣是根據(jù)選中的RadioButton的索引更新TimePicker的形式。
import ohos.aafwk.ability.AbilitySlice;import ohos.aafwk.content.Intent;import ohos.agp.components.*;import ohos.agp.window.dialog.ToastDialog;import java.time.LocalTime;import java.time.temporal.ChronoUnit;public class ComponentAbilitySlice extends AbilitySlice {public void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_component);//獲取textfield輸入組件TextField tf = (TextField) findComponentById(ResourceTable.Id_text_field);//獲取button組件Button button = (Button) findComponentById(ResourceTable.Id_hello_button);//獲取RedioContainer組件RadioContainer rcontainer = (RadioContainer)findComponentById(ResourceTable.Id_radio_container);//獲取TimePicker組件TimePicker picker = (TimePicker) findComponentById(ResourceTable.Id_time_picker);//根據(jù)RadioContainer的狀態(tài)設定TimePicker的形式。picker.set24Hour(rcontainer.getMarkedButtonId()==0);// 為按鈕設置點擊事件回調button.setClickedListener(new Component.ClickedListener() {public void onClick(Component v) {LocalTime rightNow = LocalTime.now();LocalTime pickTime = LocalTime.of(picker.getHour(), picker.getMinute(), picker.getSecond());String msg;if(pickTime.isBefore(rightNow))msg = "所選時間比現(xiàn)在時刻早" + pickTime.until(rightNow, ChronoUnit.SECONDS) + "秒";else if(pickTime.isAfter(rightNow))msg = "所選時間比現(xiàn)在時刻晚" + rightNow.until(pickTime, ChronoUnit.SECONDS) + "秒";elsemsg = "所選時間和現(xiàn)在時刻一樣";new ToastDialog(getContext()).setText(msg).show();}});//為RadioContainer設置事件響應rcontainer.setMarkChangedListener((radioContainer1, index) -> {picker.set24Hour(index == 0);});//為TimePicker設定事件響應picker.setTimeChangedListener(new TimePicker.TimeChangedListener() {public void onTimeChanged(TimePicker timePicker, int hour, int minute, int second) {tf.setText(hour + ":" + minute + ":" + second);}});}public void onActive() {super.onActive();}public void onForeground(Intent intent) {super.onForeground(intent);}}
畫面顯示如下:
參考文檔
RadioContainer組件:
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-radiocontainer-0000001063470429
RadioContainer類:
https://developer.harmonyos.com/cn/docs/documentation/doc-references/radiocontainer-0000001054678720
RadioButton組件
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-radiobutton-0000001060647792
RadioButton類
https://developer.harmonyos.com/cn/docs/documentation/doc-references/radiobutton-0000001054518732
新書介紹
《實戰(zhàn)Python設計模式》是作者最近出版的新書,拜托多多關注!

本書利用Python 的標準GUI 工具包tkinter,通過可執(zhí)行的示例對23 個設計模式逐個進行說明。這樣一方面可以使讀者了解真實的軟件開發(fā)工作中每個設計模式的運用場景和想要解決的問題;另一方面通過對這些問題的解決過程進行說明,讓讀者明白在編寫代碼時如何判斷使用設計模式的利弊,并合理運用設計模式。
對設計模式感興趣而且希望隨學隨用的讀者通過本書可以快速跨越從理解到運用的門檻;希望學習Python GUI 編程的讀者可以將本書中的示例作為設計和開發(fā)的參考;使用Python 語言進行圖像分析、數(shù)據(jù)處理工作的讀者可以直接以本書中的示例為基礎,迅速構建自己的系統(tǒng)架構。
覺得本文有幫助?請分享給更多人。
關注微信公眾號【面向對象思考】輕松學習每一天!
面向對象開發(fā),面向對象思考!

