鴻蒙Harmony應用開發—ArkTS聲明式開發(通用屬性:Popup控制)

給組件綁定popup彈窗,并設置彈窗內容,交互邏輯和顯示狀態。

說明:

  • 從API Version 7開始支持。后續版本如有新增內容,則采用上角標單獨標記該內容的起始版本。

  • popup彈窗的顯示狀態在onStateChange事件回調中反饋,其顯隱與組件的創建或銷毀無強對應關系。

bindPopup

bindPopup(show: boolean, popup: PopupOptions | CustomPopupOptions)

給組件綁定Popup彈窗。

系統能力:?SystemCapability.ArkUI.ArkUI.Full

參數:

參數名類型必填說明
showboolean彈窗顯示狀態,默認值為false,隱藏彈窗。
show:?彈窗顯示狀態,默認值為false,隱藏彈窗。popup彈窗必須等待頁面全部構建完成才能展示,因此show不能在頁面構建中設置為true,否則會導致popup彈窗顯示位置及形狀錯誤。
popup:?配置當前彈窗提示的參數。
popupPopupOptions?|?CustomPopupOptions8+配置彈出彈窗的參數。

PopupOptions類型說明

名稱類型必填描述
messagestring彈窗信息內容。
placementOnTop(deprecated)boolean是否在組件上方顯示,默認值為false。
說明:
從 API version 10 開始廢棄,建議使用placement替代。
primaryButton{
value:?string,
action:?()?=>?void
}
第一個按鈕。
value:?彈窗里主按鈕的文本。
action:?點擊主按鈕的回調函數。
secondaryButton{
value:?string,
action:?()?=>?void
}
第二個按鈕。
value:?彈窗里輔助按鈕的文本。
action:?點擊輔助按鈕的回調函數。
onStateChange(event:?{?isVisible:?boolean?})?=>?void彈窗狀態變化事件回調,參數isVisible為彈窗當前的顯示狀態。
arrowOffset9+Lengthpopup箭頭在彈窗處的偏移。箭頭在氣泡上下方時,數值為0表示箭頭居最左側,偏移量為箭頭至最左側的距離,默認居中。箭頭在氣泡左右側時,偏移量為箭頭至最上側的距離,默認居中。如果顯示在屏幕邊緣,氣泡會自動左右偏移,數值為0時箭頭始終指向綁定組件。
showInSubWindow9+boolean是否在子窗口顯示氣泡,默認值為false。
mask10+boolean?|?ResourceColor設置氣泡是否有遮罩層及遮罩顏色。如果設置為false,則沒有遮罩層;如果設置為true,則設置有遮罩層并且顏色為透明色;如果設置為Color,則為遮罩層的顏色。
messageOptions10+PopupMessageOptions設置彈窗信息文本參數。
targetSpace10+Length設置popup與目標的間隙。
placement10+Placement設置popup組件相對于目標的顯示位置,默認值為Placement.Bottom。
如果同時設置了placementOnTopplacement,則以placement的設置生效。
offset10+Position設置popup組件相對于placement設置的顯示位置的偏移。
說明:
不支持設置百分比。
enableArrow10+boolean設置是否顯示箭頭。
默認值:true
popupColor11+Color?|?string?|?number?| ?Resource提示氣泡的顏色。
默認值:透明色TRANSPARENT加模糊背景填充效果COMPONENT_ULTRA_THICK。
autoCancel11+boolean頁面有操作時,是否自動關閉氣泡。
默認值:true
width11+Dimension彈窗寬度。
arrowPointPosition11+ArrowPointPosition氣泡尖角相對于父組件顯示位置,氣泡尖角在垂直和水平方向上有 ”Start“、”Center“、”End“三個位置點可選。以上所有位置點均位于父組件區域的范圍內,不會超出父組件的邊界范圍。

PopupMessageOptions10+類型說明

名稱類型必填描述
textColorResourceColor設置彈窗信息文本顏色。
fontFont設置彈窗信息字體屬性。

CustomPopupOptions8+類型說明

名稱類型必填描述
builderCustomBuilder提示氣泡內容的構造器。
說明:
popup為通用屬性,自定義popup中不支持再次彈出popup。對builder下的第一層容器組件不支持使用position屬性,如果使用將導致氣泡不顯示。builder中若使用自定義組件,自定義組件的aboutToAppear和aboutToDisappear生命周期與popup彈窗的顯隱無關,不能使用其生命周期判斷popup彈窗的顯隱。
placementPlacement氣泡組件優先顯示的位置,當前位置顯示不下時,會自動調整位置。
默認值:Placement.Bottom
popupColorResourceColor提示氣泡的顏色。
API version 10,默認值:'#4d4d4d'
API version 11及以后,默認值:透明色TRANSPARENT加模糊背景填充效果COMPONENT_ULTRA_THICK
enableArrowboolean是否顯示箭頭。
從API Version 9開始,如果箭頭所在方位側的氣泡長度不足以顯示下箭頭,則會默認不顯示箭頭。比如:placement設置為Left,此時如果氣泡高度小于箭頭的寬度(32vp)與氣泡圓角兩倍(48vp)之和(80vp),則實際不會顯示箭頭。
默認值:true
autoCancelboolean頁面有操作時,是否自動關閉氣泡。
默認值:true
說明:
如果要實現點擊氣泡內消失需要在builder中先放一個布局組件,然后再將Popup高級組件放在布局組件里面,再在布局組件的onClick事件中修改的傳入bindPopup的變量(show:?boolean)值。
onStateChange(event:?{?isVisible:?boolean?})?=>?void彈窗狀態變化事件回調,參數為彈窗當前的顯示狀態。
arrowOffset9+Lengthpopup箭頭在彈窗處的偏移。箭頭在氣泡上下方時,數值為0表示箭頭居最左側,偏移量為箭頭至最左側的距離,默認居中。箭頭在氣泡左右側時,偏移量為箭頭至最上側的距離,默認居中。如果顯示在屏幕邊緣,氣泡會自動左右偏移,數值為0時箭頭始終指向綁定組件。
showInSubWindow9+boolean是否在子窗口顯示氣泡,默認值為false。
maskColor(deprecated)ResourceColor設置氣泡遮罩層顏色。
說明:
從 API version 10 開始廢棄,建議使用mask替代。
mask10+boolean?|?ResourceColor設置氣泡是否有遮罩層及遮罩顏色。如果設置為false,則沒有遮罩層;如果設置為true,則設置有遮罩層并且顏色為透明色;如果設置為Color,則為遮罩層的顏色。
targetSpace10+Length設置popup與目標的間隙。
offset10+Position設置popup組件相對于placement設置的顯示位置的偏移。
說明:
不支持設置百分比。
width11+Dimension彈窗寬度。
arrowPointPosition11+ArrowPointPosition氣泡尖角相對于父組件顯示位置,氣泡尖角在垂直和水平方向上有 ”Start“、”Center“、”End“三個位置點可選。以上所有位置點均位于父組件區域的范圍內,不會超出父組件的邊界范圍。

示例

示例1

// xxx.ets
@Entry
@Component
struct PopupExample {@State handlePopup: boolean = false@State customPopup: boolean = false// popup構造器定義彈框內容@Builder popupBuilder() {Row({ space: 2 }) {Image($r("app.media.image")).width(24).height(24).margin({ left: -5 })Text('Custom Popup').fontSize(10)}.width(100).height(50).padding(5)}build() {Flex({ direction: FlexDirection.Column }) {// PopupOptions 類型設置彈框內容Button('PopupOptions').onClick(() => {this.handlePopup = !this.handlePopup}).bindPopup(this.handlePopup, {message: 'This is a popup with PopupOptions',placementOnTop: true,showInSubWindow:false,primaryButton: {value: 'confirm',action: () => {this.handlePopup = !this.handlePopupconsole.info('confirm Button click')}},// 第二個按鈕secondaryButton: {value: 'cancel',action: () => {this.handlePopup = !this.handlePopupconsole.info('cancel Button click')}},onStateChange: (e) => {console.info(JSON.stringify(e.isVisible))if (!e.isVisible) {this.handlePopup = false}}}).position({ x: 100, y: 50 })// CustomPopupOptions 類型設置彈框內容Button('CustomPopupOptions').onClick(() => {this.customPopup = !this.customPopup}).bindPopup(this.customPopup, {builder: this.popupBuilder,placement: Placement.Top,mask: {color:'0x33000000'},popupColor: Color.Yellow,enableArrow: true,showInSubWindow: false,onStateChange: (e) => {if (!e.isVisible) {this.customPopup = false}}}).position({ x: 80, y: 200 })}.width('100%').padding({ top: 5 })}
}

figures/popup.gif

示例2

// xxx.ets
@Entry
@Component
struct PopupExample {@State handlePopup: boolean = falsebuild() {Column() {Button('PopupOptions').onClick(() => {this.handlePopup = !this.handlePopup}).bindPopup(this.handlePopup, {message: 'This is a popup with PopupOptions',messageOptions: {textColor: Color.Red,font: {size: '14vp',style: FontStyle.Italic,weight: FontWeight.Bolder}},placement: Placement.Bottom,enableArrow: false,targetSpace: '15vp',onStateChange: (e) => {console.info(JSON.stringify(e.isVisible))if (!e.isVisible) {this.handlePopup = false}}})}.margin(20)}
}

示例3

// xxx.ets
@Entry
@Component
struct PopupExample {@State customPopup: boolean = false// popup構造器定義彈框內容@Builder popupBuilder() {Row() {Text('Custom Popup Message').fontSize(10)}.height(50).padding(5)}build() {Column() {// CustomPopupOptions 類型設置彈框內容Button('CustomPopupOptions').onClick(() => {this.customPopup = !this.customPopup}).bindPopup(this.customPopup, {builder: this.popupBuilder,targetSpace: '15vp',enableArrow: false,onStateChange: (e) => {if (!e.isVisible) {this.customPopup = false}}})}.margin(20)}
}

示例4

// xxx.ets
@Entry
@Component
struct PopupExample {@State handlePopup: boolean = falsebuild() {Column() {Button('PopupOptions').position({ x: 100, y: 50 }).onClick(() => {this.handlePopup = !this.handlePopup}).bindPopup(this.handlePopup, {width: 300,message: 'This is a popup with PopupOptions',arrowPointPosition: ArrowPointPosition.START,popupColor: Color.Red,autoCancel: true,})}.width('100%').height('100%')}
}

示例5

// xxx.ets
import { Popup , PopupOptions,PopupTextOptions, PopupButtonOptions, PopupIconOptions } from '@ohos.arkui.advanced.Popup';@Entry
@Component
struct PopupExample {@State customPopup: boolean = false@BuilderpopupBuilder() {// popup 自定義高級組件Popup({//PopupIconOptions 類型設置圖標內容icon: {image: $r('app.media.icon'),width:32,height:32,fillColor:Color.White,borderRadius: 16,} as PopupIconOptions,// PopupTextOptions 類型設置文字內容title: {text: 'This is a popup with CustomPopupOptions',fontSize: 20,fontColor: Color.Black,fontWeight: FontWeight.Normal,} as PopupTextOptions,//PopupTextOptions 類型設置文字內容message: {text: 'This is the message',fontSize: 15,fontColor: Color.Black,fontWeight: FontWeight.Normal,} as PopupTextOptions,showClose: false,onClose: () => {console.info('close Button click')this.customPopup = false},// PopupButtonOptions 類型設置按鈕內容buttons: [{text: 'confirm',action: () => {console.info('confirm button click')this.customPopup = false},fontSize: 15,fontColor: Color.Black,},{text: 'cancel',action: () => {console.info('cancel button click')this.customPopup = false},fontSize: 15,fontColor: Color.Black,},] as [PopupButtonOptions?, PopupButtonOptions?],})}build() {Column() {Button('CustomPopupOptions').onClick(() => {this.customPopup = !this.customPopup}).position({ x: 80, y: 200 }).bindPopup(this.customPopup, {builder: this.popupBuilder,width: 300,arrowPointPosition: ArrowPointPosition.END,})}.width('100%').height('100%')}
}

示例6

// xxx.ets@Entry
@Component
struct PopupExample {@State cursorPopup: boolean = falsebuild() {Column() {TextInput({placeholder:'我是提示文本',text:'我是當前文本內容'}).position({ x: 0, y: 350 }).onFocus(() => {this.cursorPopup = !this.cursorPopup}).selectionMenuHidden(true).bindPopup(this.cursorPopup, {width: 300,message: 'This is a pop-up window that appears with the cursor',arrowPointPosition: ArrowPointPosition.CENTER,popupColor: Color.Green,autoCancel: true,})}.width('100%').height('100%')}
}

最后,有很多小伙伴不知道學習哪些鴻蒙開發技術?不知道需要重點掌握哪些鴻蒙應用開發知識點?而且學習時頻繁踩坑,最終浪費大量時間。所以有一份實用的鴻蒙(Harmony NEXT)資料用來跟著學習是非常有必要的。?

這份鴻蒙(Harmony NEXT)資料包含了鴻蒙開發必掌握的核心知識要點,內容包含了ArkTS、ArkUI開發組件、Stage模型、多端部署、分布式應用開發、音頻、視頻、WebGL、OpenHarmony多媒體技術、Napi組件、OpenHarmony內核、Harmony南向開發、鴻蒙項目實戰等等)鴻蒙(Harmony NEXT)技術知識點。

希望這一份鴻蒙學習資料能夠給大家帶來幫助,有需要的小伙伴自行領取,限時開源,先到先得~無套路領取!!

?獲取這份完整版高清學習路線,請點擊→純血版全套鴻蒙HarmonyOS學習資料

鴻蒙(Harmony NEXT)最新學習路線

  • ?HarmonOS基礎技能

  • HarmonOS就業必備技能?
  • ?HarmonOS多媒體技術

  • 鴻蒙NaPi組件進階

  • HarmonOS高級技能

  • 初識HarmonOS內核?
  • 實戰就業級設備開發

有了路線圖,怎么能沒有學習資料呢,小編也準備了一份聯合鴻蒙官方發布筆記整理收納的一套系統性的鴻蒙(OpenHarmony )學習手冊(共計1236頁)鴻蒙(OpenHarmony )開發入門教學視頻,內容包含:ArkTS、ArkUI、Web開發、應用模型、資源分類…等知識點。

獲取以上完整版高清學習路線,請點擊→純血版全套鴻蒙HarmonyOS學習資料

《鴻蒙 (OpenHarmony)開發入門教學視頻》

《鴻蒙生態應用開發V2.0白皮書》

圖片

《鴻蒙 (OpenHarmony)開發基礎到實戰手冊》

OpenHarmony北向、南向開發環境搭建

圖片

?《鴻蒙開發基礎》

  • ArkTS語言
  • 安裝DevEco Studio
  • 運用你的第一個ArkTS應用
  • ArkUI聲明式UI開發
  • .……

圖片

?《鴻蒙開發進階》

  • Stage模型入門
  • 網絡管理
  • 數據管理
  • 電話服務
  • 分布式應用開發
  • 通知與窗口管理
  • 多媒體技術
  • 安全技能
  • 任務管理
  • WebGL
  • 國際化開發
  • 應用測試
  • DFX面向未來設計
  • 鴻蒙系統移植和裁剪定制
  • ……

圖片

《鴻蒙進階實戰》

  • ArkTS實踐
  • UIAbility應用
  • 網絡案例
  • ……

圖片

?獲取以上完整鴻蒙HarmonyOS學習資料,請點擊→純血版全套鴻蒙HarmonyOS學習資料

總結

總的來說,華為鴻蒙不再兼容安卓,對中年程序員來說是一個挑戰,也是一個機會。只有積極應對變化,不斷學習和提升自己,他們才能在這個變革的時代中立于不敗之地。?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/716274.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/716274.shtml
英文地址,請注明出處:http://en.pswp.cn/news/716274.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

opencv內存溢出del釋放變量 (python)

報錯: cv2.error: OpenCV(3.4.17) D:\a\opencv-python\opencv-python\opencv\modules\core\src\alloc.cpp:73: error: (-4:Insufficient memory) Failed to allocate 12211548 bytes in function ‘cv::OutOfMemoryError’ 檢查內存代碼 import psutil# 獲取當前進…

內存空間擔保機制

什么是內存空間擔保機制? 內存空間擔保機制(Memory Space Guarantee)是垃圾回收(Garbage Collection)算法中的一種策略。它用于在進行垃圾回收過程(如Minor GC或Full GC)時,確保老年…

Java項目layui分頁中文亂碼

【問題描述】這部分沒改之前中文亂碼。 【解決辦法】在layui.js或者layui.all.js文件中替換共、頁、條轉換成Unicode碼格式。 字符Unicode共&#x5171頁&#x9875條&#x6761【完美解決】改完之后重新運行項目,瀏覽器F12緩存清除就好了,右鍵

MySQL的單表和多表查詢

我們在前面曾構建過三個用于實驗的表格,下面將基于這三個表進行實踐。 # 建立一個用于實驗的三個表格 mysql> create table emp (-> empno varchar(10),-> ename varchar(50),-> job varchar(50),-> mgr int,-> hiredate timestamp,-&…

課程表系列(BFS)

廣度優先搜索 文章目錄 廣度優先搜索207. 課程表210. 課程表 II思路 630. 課程表 III1462. 課程表 IV547. 省份數量 207. 課程表 207. 課程表 你這個學期必須選修 numCourses 門課程,記為 0 到 numCourses - 1 。 在選修某些課程之前需要一些先修課程。 先修課程…

c++11 標準模板(STL)(std::tuple)(三)

定義于頭文件 <tuple> template< class... Types > class tuple; (C11 起) 類模板 std::tuple 是固定大小的異類值匯集。它是 std::pair 的推廣。 若 (std::is_trivially_destructible_v<Types> && ...) 為 true &#xff0c;則 tuple 的析構函數是…

【AI繪畫】免費GPU Tesla A100 32G算力部署Stable Diffusion

免責聲明 在閱讀和實踐本文提供的內容之前&#xff0c;請注意以下免責聲明&#xff1a; 侵權問題: 本文提供的信息僅供學習參考&#xff0c;不用做任何商業用途&#xff0c;如造成侵權&#xff0c;請私信我&#xff0c;我會立即刪除&#xff0c;作者不對讀者因使用本文所述方法…

Matlab 機器人工具箱 RobotArm類

文章目錄 1 RobotArm1.1 方法1.2 注意2 RobotArm.RobotArm3 RobotArm.cmove4 其他官網:Robotics Toolbox - Peter Corke 1 RobotArm 串聯機械臂類 1.1 方法 方法描述plot顯示機器人的圖形表示teach驅動物理和圖形機器人mirror使用機器人作為從機來驅動圖形</

深入了解Kafka的文件存儲原理

Kafka簡介 Kafka最初由Linkedin公司開發的分布式、分區的、多副本的、多訂閱者的消息系統。它提供了類似于JMS的特性&#xff0c;但是在設計實現上完全不同&#xff0c;此外它并不是JMS規范的實現。kafka對消息保存是根據Topic進行歸類&#xff0c;發送消息者稱為Producer&…

IntelliJ IDEA 常用的插件

IntelliJ IDEA有很多常用的插件&#xff0c;這些插件可以擴展IDE的功能&#xff0c;提高開發效率。以下是一些常用的插件&#xff1a; Maven Helper&#xff1a;這是一款分析Maven依賴沖突的插件。在沒有此插件時&#xff0c;查看Maven的依賴樹和檢查依賴包沖突可能需要輸入命…

梯度下降算法(帶你 原理 實踐)

目錄 一、引言 二、梯度下降算法的原理 三、梯度下降算法的實現 四、梯度下降算法的優缺點 優點&#xff1a; 缺點&#xff1a; 五、梯度下降算法的改進策略 1 隨機梯度下降&#xff08;Stochastic Gradient Descent, SGD&#xff09; 2 批量梯度下降&#xff08;Batch…

LLM分布式訓練第一課(通訊原語)

這個系列作為TFLOPS和顯存消耗的續篇,今天開始正式連載 上一部地址: LLM 參數,顯存,Tflops? 訓練篇(5) (qq.com) 前一篇文章舉了65B模型的訓練所消耗的顯存的案例,如果把條件降低一點,我們看一下7B的模型需要多少顯存? 2byte的模型靜態參數權重(以16bit存儲) = 1…

(一)Python數據分析體系--九五小龐

課程地址&#xff1a;https://space.bilibili.com/387143299/channel/collectiondetail?sid554734 主要內容 知識體系 分析什么樣的數據 為什么使用Python做數據分析 Python近幾年的發展勢頭是有目共睹的&#xff0c;尤其是在科學計算&#xff0c;數據處理&#xff0c;A方面…

駕辰龍跨Llama持Wasm,玩轉Yi模型迎新春

今年新年很特別&#xff0c;AI工具添光彩。今天就來感受下最新的AI神器天選組合“WasmEdgeYi-34B”&#xff0c;只要短短三步&#xff0c;為這個甲辰龍年帶來一份九紫離火運的科技感。 環境準備 這次用的算力是OpenBayes提供的英偉達RTX_4090*1、24GB顯存、20核CPU、80GB內存…

產品營銷展示型wordpress外貿網站模板

工藝品wordpress外貿主題 簡約大氣的wordpress外貿主題&#xff0c;適合做工藝品進出品外貿的公司官網使用。 https://www.jianzhanpress.com/?p5377 餐飲設備wordpress外貿主題 簡潔的wordpress外貿主題&#xff0c;適合食品機械、餐飲設備公司使用。 https://www.jianzh…

Linux 開發工具vim、gcc/g++、makefile

目錄 Linux編輯器-vim 1. 基本概念 2. 基本操作 3. 正常模式命令集 4. 末行模式命令集 5. 其他操作 6. 簡單vim配置 Linux編譯器-gcc/g 1、基本概念 2、程序翻譯的過程 3. gcc如何完成程序翻譯 4、動靜態庫 Linux項目自動化構建工具-make/Makefile 1、背景 2、…

【Qt學習筆記】(四)Qt窗口

Qt窗口 1 菜單欄1.1 創建菜單欄1.2 在菜單欄中添加菜單1.3 創建菜單項1.4 在菜單項之間添加分割線1.5 給菜單項添加槽函數1.6 給菜單項添加快捷鍵 2 工具欄2.1 創建工具欄2.2 設置停靠位置2.3 設置浮動屬性2.4 設置移動屬性2.5 添加 Action 3 狀態欄3.1 狀態欄的創建3.2 在狀態…

2024最新算法:冠豪豬優化算法(CPO)求解23個基準函數

一、冠豪豬優化算法 冠豪豬優化算法(Crested Porcupine Optimizer&#xff0c;CPO)由Mohamed Abdel-Basset等人于2024年提出&#xff0c;該算法模擬冠豪豬的四種不同保護機制&#xff1a;視覺、聽覺、氣味和物理攻擊。第一和第二防御技術&#xff08;視覺和聽覺&#xff09;反…

盤點 | IT行業哪些認證含金量高

微思網絡 廈門微思網絡 作為一名IT人員&#xff0c;誰沒考幾個證 ——值得考的證書擁有的特性 ? 獲政府、企業和從業者認可&#xff1b; ? 持證人數多&#xff0c;業內共識度高&#xff1b; ? 幫持證者加分&#xff0c;快速提薪。 系統網絡方向認證 01 華為認證 華為…

設計模式學習筆記 - 設計原則 - 7.DRY 原則及提高代碼復用性

前言 DRY 原則&#xff0c;英文描述為&#xff1a; Don’t Repeat Yourself。中文直譯&#xff1a;不要重復自己。將它應用在編程中&#xff0c;可理解為&#xff1a;不要寫重讀的代碼。 可能你認為&#xff0c;這個原則很簡單。只要兩段代碼長得一樣&#xff0c;那就是違反 …