[[422102]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com

Table of Contents

彈框組件

1. CommonDialog 組成和使用

2. CommonDialog 自定義布局使用

3. 優化代碼——抽取彈框工具類

彈框組件

在HarmonyOS當中，常用的彈框主要有兩種：

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

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

1. CommonDialog 組成和使用

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

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

1.點擊按鈕的時候會彈出來

2.當程序滿足一定要求的時候也會彈出來

項目案例：

• 新建項目：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="點我" 
        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.給按鈕添加點擊事件 
        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.創建彈框對象 
        // this:當前彈框展示在當前界面中 
        CommonDialog cd = new CommonDialog(this); 
        //2.因為彈框里面是有默認布局的 
        //設置標題 
        cd.setTitleText("系統定位服務已關閉"); 
        //設置內容 
        cd.setContentText("請打開定位服務，以便司機師傅能夠準確接您上車"); 
        //設置按鈕 
        //參數1：按鈕的索引 0 1 2 
        //參數2：按鈕上的文字 
        //參數3：點擊了按鈕之后能做什么 
        cd.setButton(0, "設置", new IDialog.ClickedListener() { 
            @Override 
            public void onClick(IDialog iDialog, int i) { 
                //寫上點擊了之后設置，要做的事情 
                //如果點擊了之后不需要做任何事情，在第三個參數中傳遞 null 就可以了 
 
                //因為這里點擊了設置還無法跳轉到設置定位的那個界面，所以先不寫，等以后學習了再補在這里 
            } 
        }); 
 
        //設置取消按鈕 
        cd.setButton(1,"取消",null); 
 
        //把彈框顯示出來 
        cd.show(); 
    } 
} 

• 運行：

• 點擊后：

• 當再次點擊灰色區域也沒有反應
• 點擊或 取消 按鈕時沒有任何反應，因為在上面的那里設置了 null

一般點擊彈框的兩種情況：

1. 點擊灰色區域也不能取消，必須點擊取消按鈕才能取消彈框
2. 點擊灰色區域或取消按鈕都能達到取消彈框的效果

下面就實現上面這兩種情況：

1.點擊灰色區域也能取消按鈕的情況，在上面的代碼基礎上補充如下

2.當鼠標點擊取消按鈕的時候也能讓彈框消失，把上面設置取消按鈕的 null 設置為：

• 運行，點擊后：

• 實現了上面的兩種情況

2. CommonDialog 自定義布局使用

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

 

• 所以只要直接調用方法給里面設置一些文本內容就可以了
• 下面就介紹下自定義彈框里的內容

案例如下：在主界面上有一個按鈕，點擊了一個按鈕后會出現彈框

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

• 當點擊了 確定 按鈕后，上面的文本就會變成“點擊了確定按鈕”，當點擊了 取消 按鈕后彈框就會消失

下面就實現下：

• 新建項目：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="點我" 
        ohos:text_size="40fp" 
        ohos:background_element="red"/> 
 
 
</DirectionalLayout> 

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

• 文件名不能是大寫的

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

• 文本的內容因為是變化的，所以在java代碼那里進行設置

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

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.添加一個點擊事件 
        but.setClickedListener(this); 
    } 
 
    @Override 
    public void onActive() { 
        super.onActive(); 
    } 
 
    @Override 
    public void onForeground(Intent intent) { 
        super.onForeground(intent); 
    } 
 
    @Override 
    public void onClick(Component component) { 
        //把彈框展示出來 
        //創建一個彈框對象 
        CommonDialog cd = new CommonDialog(this); 
        //大小是默認包裹內容的 
        //彈框默認是居中設置的 
        //彈框默認是透明的 
        //彈框默認是直角的，可以把直角設置為圓角 
        cd.setCornerRadius(15); 
 
 
        //把 messagedialog 的 xml 文件加載到內存當中，交給彈框并且展示出來 
 
        //加載 xml 文件并獲得一個布局對象 
        //parse方法：加載一個 xml 文件，返回一個布局對象 
        //參數一：要加載的 xml 文件 
        //參數二：該 xml 文件是否跟其他 xml 文件有關。如果無關是獨立的，就寫 null 就行了 
        //參數三：如果文件是獨立的，那么直接寫 false 
        DirectionalLayout dl = (DirectionalLayout) LayoutScatter.getInstance(this).parse(ResourceTable.Layout_messagedialog, null, false); 
 
        //要給布局里的文本和按鈕設置事件或者修改內容 
        //此時需要用 dl 去調用，表示獲取的是 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標題設置內容 
        title.setText("請選擇下面的按鈕并點擊"); 
 
        //還需要給兩個按鈕添加單擊事件 
        submit.setClickedListener(new Component.ClickedListener() { 
            @Override 
            public void onClick(Component component) { 
                title.setText("點擊了確定按鈕"); 
            } 
        }); 
 
        //取消按鈕也要添加點擊事件 
        cancel.setClickedListener(new Component.ClickedListener() { 
            @Override 
            public void onClick(Component component) { 
                //當點擊取消按鈕之后，把彈框關閉 
                cd.destroy(); 
            } 
        }); 
 
        //此時布局對象和彈框還沒有任何關系 
        //還需要把布局對象交給彈框 
        cd.setContentCustomComponent(dl); 
 
        //讓彈框展示出來 
        cd.show(); 
 
    } 
} 

• 運行：

• 點擊后，就會彈出彈框

• 點擊彈框中的確定按鈕后，文本內容發生改變

• 點擊取消按鈕后，彈框消失，恢復到原界面

3. 優化代碼——抽取彈框工具類

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

• 創建一個彈框的工具類：MyDialog

• 當外界調用了這個方法之后，就會出現一個彈框

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

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

• MainAbilitySlice類中修改如下，直接調用MyDialog中的方法，傳遞參數就行了

• 運行：

• 點擊確定按鈕后，發現Text文本內容是剛剛方法中傳遞過來

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com