女人自慰AV免费观看内涵网,日韩国产剧情在线观看网址,神马电影网特片网,最新一级电影欧美,在线观看亚洲欧美日韩,黄色视频在线播放免费观看,ABO涨奶期羡澄,第一导航fulione,美女主播操b

0
  • 聊天消息
  • 系統消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發帖/加入社區
會員中心
創作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示

鴻蒙ArkUI開發-應用添加彈窗

jf_46214456 ? 來源:jf_46214456 ? 作者:jf_46214456 ? 2024-01-24 17:22 ? 次閱讀

在我們日常使用應用的時候,可能會進行一些敏感的操作,比如刪除聯系人,這時候我們給應用添加彈窗來提示用戶是否需要執行該操作,如下圖所示:

彈窗是一種模態窗口,通常用來展示用戶當前需要的或用戶必須關注的信息或操作。在彈出框消失之前,用戶無法操作其他界面內容。ArkUI為我們提供了豐富的彈窗功能,彈窗按照功能可以分為以下兩類:

  • 確認類:例如警告彈窗AlertDialog
  • 選擇類:包括文本選擇彈窗TextPickerDialog 、日期滑動選擇彈窗DatePickerDialog、時間滑動選擇彈窗TimePickerDialog等。

您可以根據業務場景,選擇不同類型的彈窗。部分彈窗效果圖如下:

此外,如果上述彈窗還不能滿足您的需求,或者需要對彈窗的布局和樣式進行自定義,您還可以使用自定義彈窗CustomDialog。 下文將分別介紹AlertDialog 、TextPickerDialog 、DatePickerDialog以及CustomDialog的使用。

警告彈窗

警告彈窗AlertDialog由以下三部分區域構成,對應下面的示意圖:

  1. 標題區:為可選的。
  2. 內容區:顯示提示消息。
  3. 操作按鈕區:用戶做”確認“或者”取消“等操作。

以下示例代碼,演示了如何使用AlertDialog 實現上圖所示的警告彈窗。AlertDialog可以設置兩個操作按鈕,示例代碼中分別使用primaryButton和secondaryButton實現了“取消”和“刪除”操作按鈕,操作按鈕可以通過action響應點擊事件。

Button('點擊顯示彈窗')
  .onClick(() = > {
    AlertDialog.show(
      {
        title: '刪除聯系人', // 標題
        message: '是否需要刪除所選聯系人?', // 內容
        autoCancel: false, // 點擊遮障層時,是否關閉彈窗。
        alignment: DialogAlignment.Bottom, // 彈窗在豎直方向的對齊方式
        offset: { dx: 0, dy: -20 }, // 彈窗相對alignment位置的偏移量
        primaryButton: {
          value: '取消',
          action: () = > {
 console.info('Callback when the first button is clicked');
          }
        },
        secondaryButton: {
          value: '刪除',
          fontColor: '#D94838',
          action: () = > {
 console.info('Callback when the second button is clicked');
          }
        },
        cancel: () = > { // 點擊遮障層關閉dialog時的回調
 console.info('Closed callbacks');
        }
      }
    )
  })

此外,您還可以使用AlertDialog,構建只包含一個操作按鈕的確認彈窗,使用confirm響應操作按鈕回調。

AlertDialog.show(
  {
    title: '提示',
    message: '提示信息',
    autoCancel: true,
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -20 },
    confirm: {
      value: '確認',
      action: () = > {
 console.info('Callback when confirm button is clicked');
      }
    },
    cancel: () = > {
 console.info('Closed callbacks')
    }
  }
)

選擇類彈窗

選擇類彈窗用于方便用戶選擇相關數據,比如選擇喜歡吃的水果、出生日期等等。下面我們以TextPickerDialog和DatePickerDialog為例,來介紹選擇類彈窗的使用。

文本選擇彈窗

TextPickerDialog為文本滑動選擇器彈窗,根據指定的選擇范圍創建文本選擇器,展示在彈窗上,例如下面這段示例代碼使用TextPickerDialog實現了一個水果選擇彈窗。示例代碼中使用selected指定了彈窗的初始選擇項索引為2,對應的數據為“香蕉”。當用戶點擊“確定”操作按鈕后,會觸發onAccept事件回調,在回調中將選中的值,傳遞給宿主中的select變量。

@Entry
@Component
struct TextPickerDialogDemo {
 @State select: number = 2;
 private fruits: string[] = ['蘋果', '橘子', '香蕉', '獼猴桃', '西瓜'];
 
 build() {
 Column() {
      Button('TextPickerDialog')
        .margin(20)
        .onClick(() = > {
          TextPickerDialog.show({
 range: this.fruits, // 設置文本選擇器的選擇范圍
 selected: this.select, // 設置初始選中項的索引值。
 onAccept: (value: TextPickerResult) = > { // 點擊彈窗中的“確定”按鈕時觸發該回調。
 // 設置select為按下確定按鈕時候的選中項index,這樣當彈窗再次彈出時顯示選中的是上一次確定的選項
 this.select = value.index;
 console.info("TextPickerDialog:onAccept()" + JSON.stringify(value));
            },
 onCancel: () = > { // 點擊彈窗中的“取消”按鈕時觸發該回調。
 console.info("TextPickerDialog:onCancel()");
            },
 onChange: (value: TextPickerResult) = > { // 滑動彈窗中的選擇器使當前選中項改變時觸發該回調。
 console.info('TextPickerDialog:onChange()' + JSON.stringify(value));
            }
          })
        })
    }
    .width('100%')
  }
}

效果圖如下:

日期選擇彈窗

下面我們介紹另一種常用的選擇類彈窗DatePickerDialog,它是日期滑動選擇器彈窗,根據指定的日期范圍創建日期滑動選擇器,展示在彈窗上。DatePickerDialog的使用非常廣泛,比如當我們需要輸入個人出生日期的時候,就可以使用DatePickerDialog。下面的示例代碼實現了一個日期選擇彈窗:

@Entry
@Component
struct DatePickerDialogDemo {
 selectedDate: Date = new Date('2010-1-1');
 
 build() {
 Column() {
      Button("DatePickerDialog")
        .margin(20)
        .onClick(() = > {
          DatePickerDialog.show({
 start: new Date('1900-1-1'), // 設置選擇器的起始日期
 end: new Date('2023-12-31'), // 設置選擇器的結束日期
 selected: this.selectedDate, // 設置當前選中的日期
 lunar: false,
 onAccept: (value: DatePickerResult) = > { // 點擊彈窗中的“確定”按鈕時觸發該回調
 // 通過Date的setFullYear方法設置按下確定按鈕時的日期,這樣當彈窗再次彈出時顯示選中的是上一次確定的日期
 this.selectedDate.setFullYear(value.year, value.month, value.day)
 console.info('DatePickerDialog:onAccept()' + JSON.stringify(value))
            },
 onCancel: () = > { // 點擊彈窗中的“取消”按鈕時觸發該回調
 console.info('DatePickerDialog:onCancel()')
            },
 onChange: (value: DatePickerResult) = > { // 滑動彈窗中的滑動選擇器使當前選中項改變時觸發該回調
 console.info('DatePickerDialog:onChange()' + JSON.stringify(value))
            }
          })
        })
    }
    .width('100%')
  }
}

效果圖如下:

自定義彈窗

自定義彈窗的使用更加靈活,適用于更多的業務場景,在自定義彈窗中您可以自定義彈窗內容,構建更加豐富的彈窗界面。自定義彈窗的界面可以通過裝飾器@CustomDialog定義的組件來實現,然后結合CustomDialogController來控制自定義彈窗的顯示和隱藏。下面我們通過一個興趣愛好的選擇框來介紹自定義彈窗的使用。

從上面的效果圖可以看出,這個選擇框是一個多選的列表彈窗,我們可以使用裝飾器@CustomDialog,結合List組件來完成這個彈窗布局,實現步驟如下:

  1. 初始化彈窗數據。先準備好資源文件和數據實體類。其中資源文件stringarray.json創建在resources/base/element目錄下,文件根節點為strarray。
{
 "strarray": [
    {
 "name": "hobbies_data",
 "value": [
        {
 "value": "Soccer"
        },
        {
 "value": "Badminton"
        },
        {
 "value": "Travelling"
        },
        ... 
      ]
    }
  ]
}

實體類HobbyBean用來封裝自定義彈窗中的"興趣愛好"數據。

export default class HobbyBean {
 label: string;
 isChecked: boolean;
}

然后創建一個ArkTS文件CustomDialogWidget,用來封裝自定義彈窗,使用裝飾器@CustomDialog修飾CustomDialogWidget表示這是一個自定義彈窗。使用資源管理對象manager獲取數據,并將數據封裝到hobbyBeans。

@CustomDialog
export default struct CustomDialogWidget {
 @State hobbyBeans: HobbyBean[] = [];
 
 aboutToAppear() {
 let context: Context = getContext(this);
 let manager = context.resourceManager;
    manager.getStringArrayValue($r('app.strarray.hobbies_data'), (error, hobbyResult) = > {
      ...
      hobbyResult.forEach((hobbyItem: string) = > {
 let hobbyBean = new HobbyBean();
        hobbyBean.label = hobbyItem;
        hobbyBean.isChecked = false;
 this.hobbyBeans.push(hobbyBean);
      });
    });
  }
 
 build() {...}
}
  1. 創建彈窗組件。controller對象用于控制彈窗的控制和隱藏,hobbies表示彈窗選中的數據結果。setHobbiesValue方法用于篩選出被選中的數據,賦值給hobbies。
@CustomDialog
export default struct CustomDialogWidget {
 @State hobbyBeans: HobbyBean[] = [];
 @Link hobbies: string;
 private controller?: CustomDialogController;
 
 aboutToAppear() {...}
 
 setHobbiesValue(hobbyBeans: HobbyBean[]) {
 let hobbiesText: string = '';
    hobbiesText = hobbyBeans.filter((isCheckItem: HobbyBean) = >
    isCheckItem?.isChecked)
      .map((checkedItem: HobbyBean) = > {
 return checkedItem.label;
      }).join(',');
 this.hobbies = hobbiesText;
  }
 
 build() {
 Column() {
      Text($r('app.string.text_title_hobbies'))...
 List() {
        ForEach(this.hobbyBeans, (itemHobby: HobbyBean) = > {
 ListItem() {
 Row() {
              Text(itemHobby.label)...
              Toggle({ type: ToggleType.Checkbox, isOn: false })...
                .onChange((isCheck) = > {
                  itemHobby.isChecked = isCheck;
                })
            }
          }
        }, itemHobby = > itemHobby.label)
      }
 
 Row() {
        Button($r('app.string.cancel_button'))...
          .onClick(() = > {
 this.controller?.close();
          })
        Button($r('app.string.definite_button'))...
          .onClick(() = > {
 this.setHobbiesValue(this.hobbyBeans);
 this.controller?.close();
          })
      }
    }
  }
}
  1. 使用自定義彈窗。在自定義彈窗的使用頁面HomePage中先定義一個變量hobbies,使用裝飾器@State修飾,和自定義彈窗中的@Link 裝飾器修飾的變量進行雙向綁定。然后我們使用alignment和offset設置彈窗的位置在屏幕底部,并且距離底部20vp。最后我們在自定義組件TextCommonWidget(具體實現可以參考《構建多種樣式彈窗》Codelab源碼)的點擊事件中,調用customDialogController的open方法,用于顯示彈窗。
@Entry
@Component
struct HomePage {
 customDialogController: CustomDialogController = new CustomDialogController({
 builder: CustomDialogWidget({
 onConfirm: this.setHobbiesValue.bind(this),
    }),
 alignment: DialogAlignment.Bottom,
 customStyle: true,
 offset: { dx: 0,dy: -20 }
  });
 
 setHobbiesValue(hobbyArray: HobbyBean[]) {...}
 
 build() {
    ...
      TextCommonWidget({
        ...
 title: $r('app.string.title_hobbies'),
 content: $hobby,
 onItemClick: () = > {
 this.customDialogController.open();
        }
      })
    ...
  }
}

審核編輯 黃宇

聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。 舉報投訴
  • 鴻蒙
    +關注

    關注

    59

    文章

    2532

    瀏覽量

    43790
  • OpenHarmony
    +關注

    關注

    27

    文章

    3835

    瀏覽量

    18179
收藏 人收藏

    評論

    相關推薦
    熱點推薦

    HarmonyOS實戰:首頁多彈窗順序彈出終極解決方案

    鏈設計模式和建造者設計模式,通過將不同的彈窗添加彈窗處理類,然后按顯示順序。 實現方案 先定義基礎彈窗接口 DialogIntercept,統一
    的頭像 發表于 06-09 16:47 ?55次閱讀
    HarmonyOS實戰:首頁多<b class='flag-5'>彈窗</b>順序彈出終極解決方案

    ArkUI-X中Plugin生命周期開發指南

    ; } } } 添加ArkUI-X插件 在StageActivity中,新增addPlugin11+方法,并以字符串形式提供IArkUIXPlugin的實現類的完整包名,用于將開發者實現
    發表于 06-04 22:36

    ArkUI-X添加到現有Android項目中

    本教程主要講述如何利用ArkUI-X SDK完成Android AAR開發,實現基于ArkTS的聲明式開發范式在android平臺顯示。包括: 1.跨平臺Library工程開發介紹 2
    發表于 06-04 22:35

    鴻蒙5開發寶藏案例分享---一多開發實例(購物比價)

    鴻蒙開發寶藏案例大公開!】手把手教你用\"一多\"能力打造跨端購物比價App 小伙伴們好呀!今天要和大家分享一個鴻蒙開發的隱藏寶典——官方購物比價應用
    發表于 06-03 16:07

    鴻蒙5開發寶藏案例分享---一多開發實例(銀行理財)

    ? 鴻蒙開發寶藏案例大放送!今天手把手帶你玩轉\"一多\"銀行理財應用 ? 嘿,各位鴻蒙開發者!今天在官方文檔里挖到一個大寶藏,原來HarmonyOS藏了這么多超
    發表于 06-03 16:04

    ArkUI-X添加到現有Android項目中

    本教程主要講述如何利用ArkUI-X SDK完成Android AAR開發,實現基于ArkTS的聲明式開發范式在android平臺顯示。包括: 1.跨平臺Library工程開發介紹 2
    發表于 05-28 22:44

    DialogHub上線OpenHarmony開源社區,高效開發鴻蒙應用彈窗

    作為鴻蒙應用開發者,在使用ArkUI現有能力進行彈窗開發時,總會遇到一些讓人糾結的交互問題:應用內進行消息提示時,既要求消息內容支持圖文混排
    發表于 04-03 17:30

    Get這個秘籍,鴻蒙原生應用頁面滑動絲滑無比

    鴻蒙應用開發中,部分應用頁面在滑動時會出現白塊或白屏的問題,不僅困擾開發者,還直接影響用戶體驗。針對這一痛點,華為近期分別推出了針對鴻蒙原生應用A
    發表于 03-06 14:41

    HarmonyOS開發指導類文檔更新速遞(上)

    、媒體相關能力新增、優化文檔,方便開發者更加高效使用文檔。 ArkUI(方舟UI框架) ArkUI(方舟UI框架)是一個簡潔、高性能、支持跨設備的UI框架,提供了豐富的應用界面開發所需
    的頭像 發表于 12-30 09:50 ?850次閱讀
    HarmonyOS<b class='flag-5'>開發</b>指導類文檔更新速遞(上)

    鴻蒙原生開發手記:01-元服務開發

    同樣的使用方法。 服務卡片 元服務可以添加服務卡片,詳細介紹見《鴻蒙原生開發手記:02-服務卡片開發開發測試 在 DevEco 點擊運
    發表于 11-14 17:28

    Taro 鴻蒙技術內幕系列(二):如何讓 W3C 標準的 CSS跑在鴻蒙

    作者:京東零售 馬銀濤 ? 基于 Taro 打造的京東鴻蒙 APP 已跟隨鴻蒙 Next 系統公測,本系列文章將深入解析 Taro 如何實現使用 React 開發高性能鴻蒙應用的技術內
    的頭像 發表于 10-31 10:54 ?453次閱讀
    Taro <b class='flag-5'>鴻蒙</b>技術內幕系列(二):如何讓 W3C 標準的 CSS跑在<b class='flag-5'>鴻蒙</b>上

    Taro鴻蒙技術內幕系列(一):如何將React代碼跑在ArkUI

    基于 Taro 打造的京東鴻蒙 APP 已跟隨鴻蒙 Next 系統公測,本系列文章將深入解析 Taro 如何實現使用 React 開發高性能鴻蒙應用的技術內幕。
    的頭像 發表于 10-25 17:24 ?667次閱讀
    Taro<b class='flag-5'>鴻蒙</b>技術內幕系列(一):如何將React代碼跑在<b class='flag-5'>ArkUI</b>上

    鴻蒙Flutter實戰:07混合開發

    # 鴻蒙Flutter實戰:混合開發 鴻蒙Flutter混合開發主要有兩種形式。 ## 1.基于har 將flutter module打包成har包,在原生
    發表于 10-23 16:00

    瑞芯微RK3588開發板Linux系統添加自啟動命令的方法,深圳觸覺智能Arm嵌入式鴻蒙硬件方案商

    本文適用所有Linux系統的開發板、主板添加自啟動命令的方法,本次使用了觸覺智能的EVB3588開發板演示,搭載了瑞芯微RK3588旗艦芯片,深圳觸覺智能Arm嵌入式硬件方案商,專注工控、國產化、
    的頭像 發表于 09-19 09:32 ?1829次閱讀
    瑞芯微RK3588<b class='flag-5'>開發</b>板Linux系統<b class='flag-5'>添加</b>自啟動命令的方法,深圳觸覺智能Arm嵌入式<b class='flag-5'>鴻蒙</b>硬件方案商

    鴻蒙開發Ability Kit程序訪問控制:安全控件概述

    安全控件是系統提供的一組系統實現的ArkUI組件,應用集成這類組件就可以實現在用戶點擊后自動授權,而無需彈窗授權。它們可以作為一種“特殊的按鈕”融入應用頁面,實現用戶點擊即許可的設計思路。
    的頭像 發表于 07-03 09:22 ?745次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>開發</b>Ability Kit程序訪問控制:安全控件概述