一区二区三区三上|欧美在线视频五区|国产午夜无码在线观看视频|亚洲国产裸体网站|无码成年人影视|亚洲AV亚洲AV|成人开心激情五月|欧美性爱内射视频|超碰人人干人人上|一区二区无码三区亚洲人区久久精品

0
  • 聊天消息
  • 系統(tǒng)消息
  • 評論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會員中心
創(chuàng)作中心

完善資料讓更多小伙伴認(rèn)識你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

ArkUI框架新增能力概覽

電子發(fā)燒友開源社區(qū) ? 來源:HarmonyOS官方合作社區(qū) ? 作者:HarmonyOS官方合作社 ? 2022-05-30 09:37 ? 次閱讀
加入交流群
微信小助手二維碼

掃碼添加小助手

加入工程師交流群

ArkUI 是一套 UI 開發(fā)框架,它提供了開發(fā)者進(jìn)行應(yīng)用 UI 開發(fā)時所必須的能力。隨著 OpenAtom OpenHarmony(以下簡稱“OpenHarmony”) 3.1 Release(以下簡稱 v3.1)版本的發(fā)布,ArkUI 框架也增加了許多新能力,接下來跟隨小編一起看看都有哪些新增能力吧。

ArkUI框架新增能力概覽

本次版本更新主要提升了 ArkUI 框架開發(fā)大型應(yīng)用的能力。如圖 1 所示,藍(lán)色模塊是本次新版本 ArkUI 框架的新增/增強(qiáng)能力,它包括:Canvas、OffscreenCanvas、XComponent 組件、Web 組件、鍵盤與鼠標(biāo)以及 eTS 編譯打包與實(shí)時預(yù)覽能力。

a518d018-dfb8-11ec-ba43-dac502259ad0.png

圖1 ArkUI框架新增能力概覽圖

每一次能力的新增,都是為了讓開發(fā)者能夠更加高效、便捷地開發(fā),下面一起了解一下這些新能力都將帶來哪些便捷。

為了便于大家理解,小編將本次新增的能力分成了以下三類:新增聲明式 Canvas 繪制能力、新增混合開發(fā)能力和增強(qiáng) UI 開發(fā)能力。

新增聲明式Canvas繪制能力

新增聲明式 Canvas 繪制能力中包含 Canvas 組件和 OffscreenCanvas 組件。

Canvas組件:為了方便開發(fā)者通過繪制方式實(shí)現(xiàn)自定義 UI 效果,v3.1 版本新增了 Canvas 繪制能力。

OffscreenCanvas組件:為了滿足開發(fā)者離屏繪制開發(fā)場景,v3.1 版本新增了離屏繪制能力。

有了 Canvas 繪制能力后,v3.1 版本便基于 Canvas 移植了 Lottie 的動畫庫供開發(fā)者使用,后文將詳細(xì)介紹。

新增混合開發(fā)能力

新增混合開發(fā)能力中包含了 XComponent 組件和 Web 組件。

XComponent組件:為了便于開發(fā)者在 OpenHarmony 系統(tǒng)上構(gòu)建 C++/TS 應(yīng)用,以滿足類似游戲、地圖等應(yīng)用開發(fā)場景,v3.1 版本提供了 XComponent 組件及其配套的 NDK(native development kit,原生開發(fā)包)。

Web組件:為了滿足開發(fā)者在應(yīng)用內(nèi)加載和訪問 HTML5 網(wǎng)頁的需求,v3.1 版本重點(diǎn)構(gòu)建了 Web 組件,并提供了豐富的 API,可支撐 HTML5 頁面與 TS 頁面進(jìn)行數(shù)據(jù)交互。

增強(qiáng)UI開發(fā)能力

增強(qiáng) UI 開發(fā)能力中包含了鍵盤與鼠標(biāo)的組件統(tǒng)一交互能力增強(qiáng)和開發(fā)工具鏈的 eTS 編譯打包與實(shí)時預(yù)覽能力增強(qiáng)。

鍵盤與鼠標(biāo):新版本中還重點(diǎn)提升了統(tǒng)一交互的操作體驗(yàn),開發(fā)者無需進(jìn)行復(fù)雜適配,即可支持用戶使用鍵盤、鼠標(biāo)進(jìn)行 UI 交互。

eTS編譯打包與實(shí)時預(yù)覽:為了滿足了多種狀態(tài)樣式統(tǒng)一設(shè)置的訴求,v3.1 版本提供了 @Style 裝飾器,優(yōu)化了工具鏈的編譯性能與預(yù)覽性能,實(shí)現(xiàn)了支持多種文件大型應(yīng)用編譯。

看完這些新增能力,你也許會很好奇,它們是如何使用的呢?接下來請跟隨小編的步伐,一起了解一下這些新增能力的使用方法吧。

新增聲明式Canvas繪制能力

聲明式Canvas介紹

首先介紹一下聲明式 Canvas 給大家提供的繪制能力。為了更好地利用現(xiàn)有 Web Canvas 生態(tài),v3.1 版本提供了標(biāo)準(zhǔn)的 W3C Canvas 繪制接口(如圖 2 所示),豐富的繪制方法可以讓開發(fā)者高效繪制出矩形、文本、圖像等。

注:因OffscreenCanvas與Canvas繪制接口相同,都遵循w3c標(biāo)準(zhǔn),故此處不再贅述

a5485e82-dfb8-11ec-ba43-dac502259ad0.png

圖2 W3C Canvas繪制接口

使用方法

下面介紹一個示例,給大家展示聲明式開發(fā)范式中 Canvas 組件的基礎(chǔ)使用方法。

圖 3 是三張圖片疊加的效果,頂層的圖片覆蓋了底層的圖片。通過依次使用 drawImage(x,y, width, height)方法設(shè)置圖片坐標(biāo)及尺寸,后面繪制的圖片自動覆蓋原來的圖像,從而達(dá)到圖片疊加顯示的效果。

a57cadc2-dfb8-11ec-ba43-dac502259ad0.jpg

圖3 圖片疊加

如下代碼所示,首先在 Column() 組件中創(chuàng)建了一塊畫布,并結(jié)合內(nèi)置組件與屬性方法對畫布進(jìn)行聲明式描述。

然后通過 RenderingContext() 獲取命令式的繪圖對象,將聲明式 UI 界面與命令式繪制良好地關(guān)聯(lián)起來。

最后通過 onReady 回調(diào)方法直接使用命令式語法,使用繪制對象在畫布中進(jìn)行繪制。


@Entry@Componentstruct IndexCanvas  {// 然后,獲取繪圖對象    private ctx: RenderingContext = new RenderingContext(this.settings);// 列出所要用到的圖片    private img: ImageBitmap = new ImageBitmap("common/bg.jpg");    build() {        Column() {            // 首先,創(chuàng)建canvas畫布            Canvas(this.ctx)                .width(1500)                .height(900)                .backgroundColor('#ffff00')                // 最后,開始繪制                .onReady(() => {                    this.ctx.drawImage( this.img, 400, 200, 540, 300);                    this.ctx.drawImage( this.img, 500, 300, 540, 300);                    this.ctx.drawImage( this.img, 600, 400, 540, 300);                })        }        .width('100%')        .height('100%')    }}

基于聲明式Canvas的Lottie動畫支持

介紹

Lottie 是業(yè)界常用的動畫格式,它支持通過 Canvas 渲染,OpenHarmony 團(tuán)隊(duì)為大家改造了 Lottie 庫,命名為 lottie-ohos-ets,開發(fā)者可以直接引用該庫,綁定 Canvas 組件后即可顯示動畫。

使用方法

Lottie 動畫的使用主要分為以下四個步驟:

步驟一:準(zhǔn)備 Lottie 文件,作為資源添加(可以使用 AE 工具制作并導(dǎo)出 JSON 文件)

a5a93400-dfb8-11ec-ba43-dac502259ad0.png

步驟二:引入 Lottie-ohos-ets 支持庫

import lottie from ‘lottie-ohos-ets’

步驟三:將 Lottie 動畫與 Canvas 綁定


Canvas(this.context)        .onAppear(() => {          //  隨Canvas布局自動加載動畫          let anim = lottie.loadAnimation({            container: this.context,            renderer: ‘canvas’,            name:‘a(chǎn)nimation’,            path: ‘common/lottie/ventilation_1.json’          })})

步驟四:顯示動畫

a5cb080a-dfb8-11ec-ba43-dac502259ad0.gif

新增混合開發(fā)能力

基于XComponent的C++/TS混合開發(fā)能力

介紹

在應(yīng)用開發(fā)過程中,很多場景是無法直接采用 UI 組合實(shí)現(xiàn)的,例如游戲、地圖這種應(yīng)用需要依賴 C++、 SDK 進(jìn)行獨(dú)立渲染,又如相機(jī)、視頻播放器這種應(yīng)用是需要使用相機(jī)進(jìn)行預(yù)覽顯示的,因此就需要框架能提供一種可以在 C++ 側(cè)進(jìn)行繪制的組件,于是 v3.1 版本就推出了 XComponent 組件,它可以支持 C++/TS 混合開發(fā)。

如圖 4 所示,系統(tǒng)分為應(yīng)用層、框架層和系統(tǒng)服務(wù)層,藍(lán)色模塊是新增能力。v3.1 版本在框架層部分提供了聲明式的 XComponent 組件,以便開發(fā)者在應(yīng)用頁面中進(jìn)行使用。

a5ee3bea-dfb8-11ec-ba43-dac502259ad0.png

圖4 XComponent的C++/TS混合開發(fā)

使用方法

在應(yīng)用層中,開發(fā)者可以使用系統(tǒng) NDK 提供的標(biāo)準(zhǔn)庫進(jìn)行應(yīng)用動態(tài)庫的開發(fā),標(biāo)準(zhǔn)庫中為應(yīng)用繪制提供了標(biāo)準(zhǔn)的 EGL/OpenGLES 接口,可以支持三方 SDK 直接引入使用,再結(jié)合框架層的 XComponent 提供的接口即可對 C++ 進(jìn)行渲染。

基于 XComponent 組件的 C++/TS 混合開發(fā)主要分為以下幾個步驟:

步驟一:首先是開發(fā) C++ 動態(tài)庫?;?NDK 編譯工具,將開發(fā)者編寫的 CPP 文件編譯成 .so 文件。

開發(fā)者僅需要引入頭文件,并覆蓋 OnSurfaceCreate 方法進(jìn)行繪制即可使用 NDK 提供的 OpenGLES 接口,實(shí)現(xiàn)繪制效果。代碼如下:


// C++ 渲染模塊#include #include #include #include // NDKvoid OnSurfaceCreate(OH_NativeXComponent* component, void* nativewindow)  {         mEglWindow = static_cast(nativewindow);    mEGLSurface = eglCreateWindowSurface        (mEGLDisplay, mEGLConfig, mEglWindow, winAttribs);    // GLES Logic……    eglSwapBuffers(display, eglsurface);}

步驟二:然后通過 XComponent 組件加載動態(tài)庫。調(diào)用 TS 接口,通過 TS 控制 C++ 邏輯,傳入數(shù)據(jù)與事件,即可對 C++ 邏輯進(jìn)行渲染。

XComponent 組件的使用也極其簡單,設(shè)置參數(shù)對應(yīng)動態(tài)庫名稱即可實(shí)現(xiàn)加載。代碼如下:

XComponent({ id: 'xcomponentId', type: 'texture',  libraryname: 'mynativerender'})

基于Web組件的HTML5/TS混合開發(fā)能力

介紹

有些應(yīng)用開發(fā)場景是在應(yīng)用中嵌入網(wǎng)頁,網(wǎng)頁可能是本地頁面,也可能是網(wǎng)絡(luò)頁面,且需要在 HTML5 頁面中與原生組件之間進(jìn)行數(shù)據(jù)傳遞。針對以上開發(fā)場景,v3.1 版本提供了基于 Web 組件的 HTML5/TS 混合開發(fā)能力。

使用方法

Web 組件的使用方法主要分為以下幾個步驟:

步驟一:首先提前準(zhǔn)備好 HTML5 頁面文件或者網(wǎng)絡(luò)地址

步驟二:然后用 Web 組件加載 HTML5 頁面

步驟三:最后就可以顯示出頁面內(nèi)容

下面通過一個例子,來為大家展示 Web 組件加載頁面的使用步驟。如圖 5 所示,這是一個常見的 Web 組件使用場景,首先是準(zhǔn)備好網(wǎng)絡(luò)地址 https://openharmony.cn 并將 Web 組件與其他組件在同一頁面中共同縱向布局排列,然后用 Web 組件通過 src 指定首頁鏈接并加載頁面,最后頁面就構(gòu)建完成了。

a6124314-dfb8-11ec-ba43-dac502259ad0.png

a6363512-dfb8-11ec-ba43-dac502259ad0.png

a65896e8-dfb8-11ec-ba43-dac502259ad0.png

圖5 Web組件的HTML5/TS混合開發(fā)

Web 組件還提供了將 HTML5 頁面與原生 TS 頁面進(jìn)行交互的能力,它可以支持在原生組件頁面中執(zhí)行 HTML5 頁面中定義的 JavaScript 方法,也可以支持在 HTML5 頁面中使用原生頁面中注入的 JavaScript 對象。由于篇幅有限,此處不再針對上述能力展開介紹,開發(fā)者可以自行訪問社區(qū)開發(fā)文檔,基于 runJavaScript 方法和 registerJavaScriptProxy 方法的示例,構(gòu)建出能力更強(qiáng)的 Web 應(yīng)用。

社區(qū)開發(fā)文檔

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md

增強(qiáng)UI開發(fā)能力

鍵盤與鼠標(biāo)的組件統(tǒng)一交互能力增強(qiáng)

在 v3.1 版本中,ArkUI 框架增強(qiáng)了統(tǒng)一交互能力,它讓應(yīng)用開發(fā)更加化繁為簡。如圖 6 所示,v3.1 版本將鼠標(biāo)、鍵盤在組件層面進(jìn)行了統(tǒng)一,通過相同事件回調(diào)屏蔽了輸入設(shè)備類型的差異,因此開發(fā)者無需關(guān)心具體的輸入設(shè)備類型。

a699431e-dfb8-11ec-ba43-dac502259ad0.png

圖6 組件統(tǒng)一交互

開發(fā)工具鏈的eTS編譯打包與實(shí)時預(yù)覽

開發(fā)工具鏈 DevEco Studio 也跟隨 v3.1 版本的更新做了能力的增強(qiáng),能力增強(qiáng)后的工具實(shí)現(xiàn)了支持多種文件大型應(yīng)用編譯、擁有亞秒級的實(shí)時預(yù)覽效果、組件雙向預(yù)覽能力、可以實(shí)時查看組件的屬性,且實(shí)時查看的效果已與業(yè)界持平。歡迎開發(fā)者更新最新的 DevEco Studio 進(jìn)行使用體驗(yàn)。

最后介紹一下 v3.1 版本為大家提供的新裝飾器 @Style。該裝飾器可以將樣式統(tǒng)一設(shè)置,樣式復(fù)用,同時 v3.1 版本針對多態(tài)效果,提供了一次性設(shè)置接口,該能力能夠最大化復(fù)用樣式設(shè)置。如圖 7 所示,左邊通過 @Style 分別定義三種樣式集合,之后通過右邊 stateStyles 屬性方法,同時設(shè)置給 UI 組件,即可實(shí)現(xiàn)圖 8 中三種效果,分別為正常狀態(tài)效果、按壓狀態(tài)效果和禁用狀態(tài)效果。

a6bf83ee-dfb8-11ec-ba43-dac502259ad0.png

圖7 樣式集合

a6df6934-dfb8-11ec-ba43-dac502259ad0.png

圖8 效果圖

結(jié)語

以上就是本期 ArkUI 框架新能力的全部介紹啦,歡迎大家踴躍嘗鮮。同時 ArkUI 框架未來會進(jìn)一步提升動態(tài)布局能力和推出跨 OS 平臺部署等相關(guān)能力,各位開發(fā)者敬請期待!

審核編輯 :李倩


聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請聯(lián)系本站處理。 舉報(bào)投訴
  • 開發(fā)
    +關(guān)注

    關(guān)注

    0

    文章

    373

    瀏覽量

    41488
  • 框架
    +關(guān)注

    關(guān)注

    0

    文章

    404

    瀏覽量

    17874

原文標(biāo)題:ArkUI 框架又有哪些新增能力?

文章出處:【微信號:HarmonyOS_Community,微信公眾號:電子發(fā)燒友開源社區(qū)】歡迎添加關(guān)注!文章轉(zhuǎn)載請注明出處。

收藏 人收藏
加入交流群
微信小助手二維碼

掃碼添加小助手

加入工程師交流群

    評論

    相關(guān)推薦
    熱點(diǎn)推薦

    【HarmonyOS next】ArkUI-X新聞熱搜聚合App【進(jìn)階】

    API,展示了多平臺榜單數(shù)據(jù)并支持網(wǎng)頁詳情查看。項(xiàng)目采用ArkUI框架開發(fā),現(xiàn)通過ArkUI-X實(shí)現(xiàn)iOS平臺的無縫遷移。 1.2 核心技術(shù)棧 HarmonyOS:原生開發(fā)平臺 ArkUI
    發(fā)表于 06-28 21:43

    【HarmonyOS next】ArkUI-X休閑益智兒童拼圖【進(jìn)階】

    項(xiàng)目,我們驗(yàn)證了ArkUI-X框架的強(qiáng)大跨端能力。無論是華為的鴻蒙系統(tǒng),還是iOS平臺,都能保持90%以上代碼復(fù)用率,真正實(shí)現(xiàn)了\"一次開發(fā),多端部署\"的理想狀態(tài)。期待
    發(fā)表于 06-28 21:41

    【HarmonyOS next】ArkUI-X休閑益智猜字謎【基礎(chǔ)】

    下圖是在iOS中的運(yùn)行效果 下圖是在HarmonyOS中的運(yùn)行效果 今天咱們來聊聊如何用ArkUI-X這個新興框架實(shí)現(xiàn)跨端開發(fā),通過一個猜字謎小游戲帶大家感受它的開發(fā)魅力。本文不僅能讓你看到
    發(fā)表于 06-26 20:01

    ArkUI介紹

    ArkUI(方舟UI框架)為應(yīng)用的UI開發(fā)提供了完整的基礎(chǔ)設(shè)施,包括簡潔的UI語法、豐富的UI功能(組件、布局、動畫以及交互事件),以及實(shí)時界面預(yù)覽工具等,可以支持開發(fā)者進(jìn)行可視化界面開發(fā)
    發(fā)表于 06-24 06:41

    ArkUI-X案例解析

    實(shí)現(xiàn)的,應(yīng)首先符合ArkUI-X框架的規(guī)格要求. 在應(yīng)用UI方面存在的差異,是無法借助Bridge能力來彌補(bǔ)的。在此建議使用ArkUI-X框架
    發(fā)表于 06-23 22:40

    ArkUI-X平臺橋接Bridge說明

    。 使用場景及能力 使用場景 平臺橋接主要用于這樣的場景:應(yīng)用需要復(fù)用平臺的代碼,而在OpenHarmony中沒有對應(yīng)的跨平臺API(不包括UI相關(guān))實(shí)現(xiàn)。 具體可用于以下場景: 1、ArkUI與平臺雙向
    發(fā)表于 06-19 23:12

    ArkUI-X應(yīng)用工程結(jié)構(gòu)說明

    簡介 本文檔配套ArkUI-X,將OpenHarmony ArkUI開發(fā)框架擴(kuò)展到不同的OS平臺,比如Android和iOS平臺,讓開發(fā)者基于ArkUI,可復(fù)用大部分的應(yīng)用代碼(UI以
    發(fā)表于 06-19 23:11

    ArkUI-X跨平臺應(yīng)用改造指南

    Android、IOS平臺。 通過ArkUI-X框架Bridge能力實(shí)現(xiàn)ArkTS與原生平臺交互。 方案說明 依據(jù)分層架構(gòu)設(shè)計(jì)理念,分三部分闡述。 產(chǎn)品定制層(products) 由于不同操作系統(tǒng)之間的數(shù)據(jù)
    發(fā)表于 06-16 23:05

    ArkUI-X與Android聯(lián)動編譯開發(fā)指南

    \" android_systemRes_path=\"$project_path/.arkui-x/android/app/src/main/assets/arkui-x/systemres\" 編譯腳本目錄 .arkui-x
    發(fā)表于 06-16 22:55

    ArkUI-X在Android平臺動態(tài)化開發(fā)指南

    本文介紹如何在Android平臺進(jìn)行ArkUI-X動態(tài)化開發(fā),包括動態(tài)化目錄規(guī)則及約束。 適用場景 動態(tài)化主要包括兩個典型場景: 場景1:框架動態(tài)化,為了降低應(yīng)用ROM體積占用,及滿足動態(tài)升級框架
    發(fā)表于 06-15 23:33

    ArkUI-X框架LogInterface使用指南

    ArkUI-X框架支持日志攔截能力,Android側(cè)提供原生接口,用于注入LogInterface接口,框架日志及ts日志通過該接口輸出,本文的核心內(nèi)容是介紹如何在Android平臺上
    發(fā)表于 06-15 23:20

    ArkUI-X與Android消息通信

    平臺橋接用于客戶端(ArkUI)和平臺(Android或iOS)之間傳遞消息,即用于ArkUI與平臺雙向數(shù)據(jù)傳遞、ArkUI側(cè)調(diào)用平臺的方法、平臺調(diào)用ArkUI側(cè)的方法。本文主要介紹A
    發(fā)表于 06-08 22:15

    ArkUI-X中Plugin生命周期開發(fā)指南

    ArkUI-X插件用于拓展ArkUI應(yīng)用的能力,提供管理插件生命周期的能力。本文主要介紹Android平臺的ArkUI-X插件生命周期的使用
    發(fā)表于 06-04 22:36

    ArkUI-X跨平臺框架接入指南

    ArkUI跨平臺框架(ArkUI-X)進(jìn)一步將ArkUI開發(fā)框架擴(kuò)展到了多個OS平臺:目前支持OpenHarmony、Android、 iO
    發(fā)表于 05-18 18:21

    HarmonyOS開發(fā)指導(dǎo)類文檔更新速遞(上)

    、媒體相關(guān)能力新增、優(yōu)化文檔,方便開發(fā)者更加高效使用文檔。 ArkUI(方舟UI框架ArkUI(方舟UI
    的頭像 發(fā)表于 12-30 09:50 ?1030次閱讀
    HarmonyOS開發(fā)指導(dǎo)類文檔更新速遞(上)