知識(shí)分享—在頁(yè)面跳轉(zhuǎn)中附加對(duì)話框
??想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：??
??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??
前言
之前在社區(qū)貼出的帖子中，我分享的內(nèi)容以理論知識(shí)為主。而在今后的知識(shí)分享中，筆者將通過(guò)展示一些簡(jiǎn)單實(shí)用的Demo樣例，以實(shí)踐的形式與大家一起學(xué)習(xí)探討HarmonyOS的相關(guān)技術(shù)知識(shí)。
正文
Dialog組件(對(duì)話框組件)，是UI設(shè)計(jì)中經(jīng)常會(huì)用到的一種頁(yè)面布局元素。Dialog可以與許多交互事件進(jìn)行關(guān)聯(lián)，當(dāng)用戶(hù)由于手誤而造成錯(cuò)誤的交互操作時(shí)，Dialog能及時(shí)起到緩沖的作用，為用戶(hù)提供再次交互的機(jī)會(huì)。Dialog有三種類(lèi)型，分別是ToastDialog，PopupDialog和CommonDialog。
本次的知識(shí)分享以一個(gè)簡(jiǎn)單的Demo為例，向大家展示如何在頁(yè)面跳轉(zhuǎn)中恰當(dāng)?shù)卮┎錍ommonDialog組件。話不多說(shuō)，發(fā)車(chē)吧!
首先，我們不妨創(chuàng)建一個(gè)名為“Dialog”的新工程，相關(guān)選項(xiàng)的勾選如下圖所示;
在實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的邏輯之前，我們需要先創(chuàng)建新的AbilitySlice和xml文件來(lái)構(gòu)建一個(gè)頁(yè)面;
(1)打開(kāi)entry>src>main>java>slice，右擊sIice并新建一個(gè)Java類(lèi)，將其命名為SecondAbilitySlice;
(2)打開(kāi)entry>src>main>resources>base>layout，右擊layout并新建一個(gè)Layout Resource File，將其命名為second;
(3)打開(kāi)新創(chuàng)建的SecondAbilitySlice，在"public class SecondAbilitySlice{ }"的基礎(chǔ)上加入如下代碼(用于完成頁(yè)面的基礎(chǔ)布置，并將SecondAbilitySlice與second.xml文件進(jìn)行綁定);
public class SecondAbilitySlice extends AbilitySlice {
@Override
protected void onStart(Intent intent) { //設(shè)置onStart()回調(diào)函數(shù)
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_second); //將SecondAbilitySlice與second.xml文件綁定
}
接著，我們通過(guò)xml布局的方式，為MainAbilitySlice和SecondAbilitySlice分別添加一個(gè)文本組件;
(4)打開(kāi)entry>src>main>resources>base>layout>ability_main_xml，加入一個(gè)Text組件，示例代碼如下;
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout //將Directional布局改為Dependent布局
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:background_element="white"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:alignment="center"
ohos:orientation="vertical">
<Text
ohos:id="$+id:text"
ohos:height="match_content"
ohos:width="match_content"
ohos:center_in_parent="true" //將Text組件擺放在頁(yè)面最中心的位置
ohos:text="AbilitySlice1"
ohos:text_size="30vp"
ohos:text_color="blue"/>
</DependentLayout>
(5)打開(kāi)新創(chuàng)建的second.xml，加入一個(gè)Text組件，并將頁(yè)面背景色改為黑色，示例代碼如下：
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout //將Directional布局改為Dependent布局
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:background_element="black" //將背景色調(diào)為黑色
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical">
<Text
ohos:id="$+id:Text"
ohos:height="match_content"
ohos:width="match_content"
ohos:center_in_parent="true" //將Text組件擺放在頁(yè)面最中心的位置
ohos:text="AbilitySlice2"
ohos:text_size="30vp"
ohos:text_color="white"/>
</DependentLayout>
最后，我們?cè)贛ainAbilitySlice與SecondAbilitySlice中分別新創(chuàng)建CommonDialog組件，并寫(xiě)入相關(guān)事件邏輯;
(6)打開(kāi)MainAbilitySlice，在onStart()函數(shù)的"{ }"內(nèi)加入如下代碼;
CommonDialog dialog=new CommonDialog(getContext()); // 新創(chuàng)建一個(gè)CommonDialog組件，命名為dialog
dialog.setSize(800,400); //設(shè)置CommonDialog的寬度和高度
dialog.setTitleText(" 提示"); //設(shè)置CommonDialog的標(biāo)題文本的內(nèi)容
dialog.setContentText(" 確認(rèn)切換頁(yè)面？"); //設(shè)置CommonDialog的內(nèi)容文本的內(nèi)容
dialog.setButton(IDialog.BUTTON1,"確認(rèn)",(iDialog, i) -> dialog.destroy()); //設(shè)置CommonDialog的第一個(gè)按鈕，用戶(hù)觸發(fā)此按鈕后CommonDialog將銷(xiāo)毀
dialog.setButton(IDialog.BUTTON2,"取消",(iDialog, i) -> dialog.hide()); //設(shè)置CommonDialog的第二個(gè)按鈕，用戶(hù)觸發(fā)此按鈕后CommonDialog將隱藏
dialog.setDestroyedListener(new CommonDialog.DestroyedListener() { //設(shè)置CommonDialog的銷(xiāo)毀監(jiān)聽(tīng)器
@Override
public void onDestroy() {
present(new SecondAbilitySlice(),new Intent()); //設(shè)置present()，當(dāng)CommonDialog被銷(xiāo)毀后執(zhí)行此方法，用戶(hù)界面將從原來(lái)的MainAbilitySlice導(dǎo)航至系統(tǒng)新創(chuàng)建的SecondAbilitySlice實(shí)例中。
}
});
dialog.hide(); //將CommonDialog的初始狀態(tài)設(shè)置為隱藏狀態(tài)（初始狀態(tài)默認(rèn)為隱藏狀態(tài)）
Text text1=(Text) findComponentById(ResourceTable.Id_text); //定義已在ability_main_xml中創(chuàng)建的Text組件，命名為text1
text1.setClickedListener(new Component.ClickedListener() { //設(shè)置Text的點(diǎn)擊監(jiān)聽(tīng)器
@Override
public void onClick(Component component) {
dialog.show(); //設(shè)置show()，當(dāng)用戶(hù)點(diǎn)擊Text組件時(shí)執(zhí)行此方法，CommonDialog將進(jìn)入前臺(tái)與用戶(hù)交互
}
});
(7)打開(kāi)SecondAbilitySlice，在onStart()函數(shù)的"{ }”內(nèi)加入如下代碼;
CommonDialog Dialog=new CommonDialog(getContext());
Dialog.setSize(800,400);
Dialog.setTitleText(" 提示");
Dialog.setContentText(" 確認(rèn)切換頁(yè)面？");
Dialog.setButton(IDialog.BUTTON1,"確認(rèn)",(iDialog, i) -> Dialog.destroy());
Dialog.setButton(IDialog.BUTTON2,"取消",(iDialog, i) -> Dialog.hide());
Dialog.setDestroyedListener(new CommonDialog.DestroyedListener() {
@Override
public void onDestroy() {
terminate(); //設(shè)置terminate()，當(dāng)CommonDialog被銷(xiāo)毀時(shí)執(zhí)行此方法，以結(jié)束SecondAbilitySlice的生命周期，用戶(hù)界面返回原來(lái)的MainAbilitySlice實(shí)例中
}
});
Text text1=(Text) findComponentById(ResourceTable.Id_Text);
text1.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
Dialog.show();
}
});
OK，大功告成!調(diào)用遠(yuǎn)程模擬器運(yùn)行此Demo，便可查看相應(yīng)的點(diǎn)擊效果。
結(jié)語(yǔ)
本期的知識(shí)分享在這就告一段落了。
??想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：??
??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??
