[[422102]]

想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

Table of Contents

彈框組件

1. CommonDialog 組成和使用

2. CommonDialog 自定義布局使用

3. 優(yōu)化代碼——抽取彈框工具類

彈框組件

在HarmonyOS當(dāng)中，常用的彈框主要有兩種：

1.第一種是普通彈框(CommonDialog)，提示用戶并讓用戶進(jìn)行對應(yīng)的操作的，比如使用打車軟件的時候，如果手機(jī)沒有開定位，就會有彈框提示，讓你在手機(jī)中開啟定位，這就是一個普通彈框，給你作為一個信息的提示，并且做一些操作。

2. 第二種消息提示彈框(ToastDialog)，如：在每次打開“小破站”APP的時候，都會彈出提示，這些也是彈框。這些彈框不需要用戶選擇的，只是告訴用戶一些消息而已

1. CommonDialog 組成和使用

• 在鴻蒙當(dāng)中，這種普通和彈框其實是有默認(rèn)布局的
• 下面的選擇按鈕最多只有三個

• 彈框并不是APP啟動時立馬彈出來的，一般會有兩種情況：

1.點(diǎn)擊按鈕的時候會彈出來

2.當(dāng)程序滿足一定要求的時候也會彈出來

項目案例：

• 新建項目：DialogApplication

ability_main

<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout 
    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    ohos:height="match_parent" 
    ohos:width="match_parent" 
    ohos:alignment="center" 
    ohos:orientation="vertical"> 
 
    <Button 
        ohos:id="$+id:but1" 
        ohos:height="match_content" 
        ohos:width="match_content" 
        ohos:text="點(diǎn)我" 
        ohos:text_size="40vp" 
        ohos:background_element="red"/> 
 
</DirectionalLayout> 

 MainAbilitySlice

package com.xdr630.dialogapplication.slice; 
 
import com.xdr630.dialogapplication.ResourceTable; 
import ohos.aafwk.ability.AbilitySlice; 
import ohos.aafwk.content.Intent; 
import ohos.agp.components.Button; 
import ohos.agp.components.Component; 
import ohos.agp.window.dialog.CommonDialog; 
import ohos.agp.window.dialog.IDialog; 
 
public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener { 
    @Override 
    public void onStart(Intent intent) { 
        super.onStart(intent); 
        super.setUIContent(ResourceTable.Layout_ability_main); 
 
        //1.找到按鈕 
        Button but1 = (Button) findComponentById(ResourceTable.Id_but1); 
 
        //2.給按鈕添加點(diǎn)擊事件 
        but1.setClickedListener(this); 
 
    } 
 
    @Override 
    public void onActive() { 
        super.onActive(); 
    } 
 
    @Override 
    public void onForeground(Intent intent) { 
        super.onForeground(intent); 
    } 
 
    @Override 
    public void onClick(Component component) { 
        //把普通彈框彈出來就可以了 
        //1.創(chuàng)建彈框?qū)ο?nbsp;
        // this:當(dāng)前彈框展示在當(dāng)前界面中 
        CommonDialog cd = new CommonDialog(this); 
        //2.因為彈框里面是有默認(rèn)布局的 
        //設(shè)置標(biāo)題 
        cd.setTitleText("系統(tǒng)定位服務(wù)已關(guān)閉"); 
        //設(shè)置內(nèi)容 
        cd.setContentText("請打開定位服務(wù)，以便司機(jī)師傅能夠準(zhǔn)確接您上車"); 
        //設(shè)置按鈕 
        //參數(shù)1：按鈕的索引 0 1 2 
        //參數(shù)2：按鈕上的文字 
        //參數(shù)3：點(diǎn)擊了按鈕之后能做什么 
        cd.setButton(0, "設(shè)置", new IDialog.ClickedListener() { 
            @Override 
            public void onClick(IDialog iDialog, int i) { 
                //寫上點(diǎn)擊了之后設(shè)置，要做的事情 
                //如果點(diǎn)擊了之后不需要做任何事情，在第三個參數(shù)中傳遞 null 就可以了 
 
                //因為這里點(diǎn)擊了設(shè)置還無法跳轉(zhuǎn)到設(shè)置定位的那個界面，所以先不寫，等以后學(xué)習(xí)了再補(bǔ)在這里 
            } 
        }); 
 
        //設(shè)置取消按鈕 
        cd.setButton(1,"取消",null); 
 
        //把彈框顯示出來 
        cd.show(); 
    } 
} 

• 運(yùn)行：

• 點(diǎn)擊后：

• 當(dāng)再次點(diǎn)擊灰色區(qū)域也沒有反應(yīng)
• 點(diǎn)擊或 取消 按鈕時沒有任何反應(yīng)，因為在上面的那里設(shè)置了 null

一般點(diǎn)擊彈框的兩種情況：

1. 點(diǎn)擊灰色區(qū)域也不能取消，必須點(diǎn)擊取消按鈕才能取消彈框
2. 點(diǎn)擊灰色區(qū)域或取消按鈕都能達(dá)到取消彈框的效果

下面就實現(xiàn)上面這兩種情況：

1.點(diǎn)擊灰色區(qū)域也能取消按鈕的情況，在上面的代碼基礎(chǔ)上補(bǔ)充如下

2.當(dāng)鼠標(biāo)點(diǎn)擊取消按鈕的時候也能讓彈框消失，把上面設(shè)置取消按鈕的 null 設(shè)置為：

• 運(yùn)行，點(diǎn)擊后：

• 實現(xiàn)了上面的兩種情況

2. CommonDialog 自定義布局使用

• CommonDialog 里面有默認(rèn)的布局，布局由如下三部分組成：

 

• 所以只要直接調(diào)用方法給里面設(shè)置一些文本內(nèi)容就可以了
• 下面就介紹下自定義彈框里的內(nèi)容

案例如下：在主界面上有一個按鈕，點(diǎn)擊了一個按鈕后會出現(xiàn)彈框

• 彈框里面有三個東西：一行文本和兩個按鈕

• 當(dāng)點(diǎn)擊了 確定 按鈕后，上面的文本就會變成“點(diǎn)擊了確定按鈕”，當(dāng)點(diǎn)擊了 取消 按鈕后彈框就會消失

下面就實現(xiàn)下：

• 新建項目：DialogLayoutApplication

<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout 
    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    ohos:height="match_parent" 
    ohos:width="match_parent" 
    ohos:alignment="center" 
    ohos:orientation="vertical"> 
 
    <Button 
        ohos:id="$+id:but" 
        ohos:height="match_content" 
        ohos:width="match_content" 
        ohos:text="點(diǎn)我" 
        ohos:text_size="40fp" 
        ohos:background_element="red"/> 
 
 
</DirectionalLayout> 

• 彈框里面的內(nèi)容也可以用 xml 來寫，新建一個布局文件

• 文件名不能是大寫的

• 上面的彈框組成：一個Text文本+兩個Button
• 生成彈框的布局文件后，首先改下布局文件的大小，默認(rèn)的就是充滿整個屏幕的，改為包裹內(nèi)容的就行了

• 文本的內(nèi)容因為是變化的，所以在java代碼那里進(jìn)行設(shè)置

• 兩個按鈕如果不設(shè)置外邊距的話就會擠在一起，所以要加個上往外邊距

messagedialog

<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout 
    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    ohos:height="match_content" 
    ohos:width="match_content" 
    ohos:orientation="vertical"> 
 
    <Text 
        ohos:id="$+id:message" 
        ohos:height="match_content" 
        ohos:width="match_content" 
        ohos:text_size="40fp"/> 
     
    <Button 
        ohos:id="$+id:submit" 
        ohos:height="match_content" 
        ohos:width="match_content" 
        ohos:text="確定" 
        ohos:text_size="40fp" 
        ohos:background_element="red"/> 
 
    <Button 
        ohos:id="$+id:cancel" 
        ohos:height="match_content" 
        ohos:width="match_content" 
        ohos:text="取消" 
        ohos:text_size="40fp" 
        ohos:background_element="blue" 
        ohos:top_margin="10vp" 
        /> 
 
 
</DirectionalLayout> 

MainAbilitySlice

package com.xdr630.dialoglayoutapplication.slice; 
 
import com.xdr630.dialoglayoutapplication.ResourceTable; 
import ohos.aafwk.ability.AbilitySlice; 
import ohos.aafwk.content.Intent; 
import ohos.agp.components.*; 
import ohos.agp.window.dialog.CommonDialog; 
 
public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener { 
    @Override 
    public void onStart(Intent intent) { 
        super.onStart(intent); 
        super.setUIContent(ResourceTable.Layout_ability_main); 
 
        //1.找到布局中的按鈕 
        Button but = (Button) findComponentById(ResourceTable.Id_but); 
 
        //2.添加一個點(diǎn)擊事件 
        but.setClickedListener(this); 
    } 
 
    @Override 
    public void onActive() { 
        super.onActive(); 
    } 
 
    @Override 
    public void onForeground(Intent intent) { 
        super.onForeground(intent); 
    } 
 
    @Override 
    public void onClick(Component component) { 
        //把彈框展示出來 
        //創(chuàng)建一個彈框?qū)ο?nbsp;
        CommonDialog cd = new CommonDialog(this); 
        //大小是默認(rèn)包裹內(nèi)容的 
        //彈框默認(rèn)是居中設(shè)置的 
        //彈框默認(rèn)是透明的 
        //彈框默認(rèn)是直角的，可以把直角設(shè)置為圓角 
        cd.setCornerRadius(15); 
 
 
        //把 messagedialog 的 xml 文件加載到內(nèi)存當(dāng)中，交給彈框并且展示出來 
 
        //加載 xml 文件并獲得一個布局對象 
        //parse方法：加載一個 xml 文件，返回一個布局對象 
        //參數(shù)一：要加載的 xml 文件 
        //參數(shù)二：該 xml 文件是否跟其他 xml 文件有關(guān)。如果無關(guān)是獨(dú)立的，就寫 null 就行了 
        //參數(shù)三：如果文件是獨(dú)立的，那么直接寫 false 
        DirectionalLayout dl = (DirectionalLayout) LayoutScatter.getInstance(this).parse(ResourceTable.Layout_messagedialog, null, false); 
 
        //要給布局里的文本和按鈕設(shè)置事件或者修改內(nèi)容 
        //此時需要用 dl 去調(diào)用，表示獲取的是 dl 這個布局里面的組件 
        Text title = (Text) dl.findComponentById(ResourceTable.Id_message); 
        Button submit = (Button) dl.findComponentById(ResourceTable.Id_submit); 
        Button cancel = (Button) dl.findComponentById(ResourceTable.Id_cancel); 
 
        //給title標(biāo)題設(shè)置內(nèi)容 
        title.setText("請選擇下面的按鈕并點(diǎn)擊"); 
 
        //還需要給兩個按鈕添加單擊事件 
        submit.setClickedListener(new Component.ClickedListener() { 
            @Override 
            public void onClick(Component component) { 
                title.setText("點(diǎn)擊了確定按鈕"); 
            } 
        }); 
 
        //取消按鈕也要添加點(diǎn)擊事件 
        cancel.setClickedListener(new Component.ClickedListener() { 
            @Override 
            public void onClick(Component component) { 
                //當(dāng)點(diǎn)擊取消按鈕之后，把彈框關(guān)閉 
                cd.destroy(); 
            } 
        }); 
 
        //此時布局對象和彈框還沒有任何關(guān)系 
        //還需要把布局對象交給彈框 
        cd.setContentCustomComponent(dl); 
 
        //讓彈框展示出來 
        cd.show(); 
 
    } 
} 

• 運(yùn)行：

• 點(diǎn)擊后，就會彈出彈框

• 點(diǎn)擊彈框中的確定按鈕后，文本內(nèi)容發(fā)生改變

• 點(diǎn)擊取消按鈕后，彈框消失，恢復(fù)到原界面

3. 優(yōu)化代碼——抽取彈框工具類

• 在工作當(dāng)中，如果需要用多個彈框，而每次都和上面一樣寫的話，就會造成代碼冗余，不方便管理
• 下面就把彈框抽取成一個工具類，當(dāng)用到一個彈框的時候，直接調(diào)用工具類中的方法就可以了
• 創(chuàng)建一個工具類

• 創(chuàng)建一個彈框的工具類：MyDialog

• 當(dāng)外界調(diào)用了這個方法之后，就會出現(xiàn)一個彈框

• 把上面的 OnClick 方法中的代碼剪切到上面的 showDialog 方法中

• 粘貼過來后，MyDialog類中部分代碼修改如下

• MainAbilitySlice類中修改如下，直接調(diào)用MyDialog中的方法，傳遞參數(shù)就行了

• 運(yùn)行：

• 點(diǎn)擊確定按鈕后，發(fā)現(xiàn)Text文本內(nèi)容是剛剛方法中傳遞過來

想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com