0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

HarmonyOS ArkUI 3.0框架试玩初体验

OpenHarmony技术社区 来源:鸿蒙技术社区 作者:木棉花HOS 2021-11-01 14:53 次阅读

HarmonyOS ArkUI 3.0正式到来,今天就给大家分享一下我的 HarmonyOS ArkUI 3.0 框架试玩初体验,以合成 1024 的开发实战,带大家感受一下 HarmonyOS ArkUI 3.0 的极简开发。

创建一个空白的工程

①安装和配置 DevEco Studio

DevEco Studio 下载
https://developer.harmonyos.com/cn/develop/deveco-studio#download

DevEco Studio 安装:

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/software_install-0000001053582415

②创建一个 Empty Ability 应用

DevEco Studio 下载安装成功后,打开 DevEco Studio,点击左上角的 File,点击 New,再选择 New Project,选择 Empty Ability 选项,点击 Next 按钮。

将文件命名为 MyETSApplication(文件名不能出现中文或者特殊字符,否则将无法成功创建项目文件),Project Type 勾选 Application,选择保存路径。

Language 勾选 eTS,选择 API7,设备勾选 Phone,最后点击 Finish 按钮。

③准备工作

在 entry>src>main>config.json 文件中最下方"launchType": "standard"的后面添加以下代码,这样就可以实现去掉应用上方的标签栏了。

config.json 最下方部分代码:
"metaData":{
"customizeData":[
{
"name":"hwc-theme",
"value":"androidhwext:style/Theme.Emui.Light.NoTitleBar",
"extra":""
}
]
}

实现界面布局

①保存图片

将 logo 图片保存到 entry>src>main>resources>base>media 文件中。

②新一代的声明式 UI 开发范式

具体而言,ArkUI 3.0 中的新一代声明式 UI 开发范式,主要特征如下:

(1)基于 TypeScript 扩展的声明式 UI 描述语法,提供了类自然语言的UI描述和组合。

(2)开箱即用的多态组件。多态是指 UI 描述是统一的,UI 呈现在不同类型设备上会有所不同。比如 Button 组件在手机和手表会有不同的样式和交互方式。

(3)多维度的状态管理机制,支持灵活的数据驱动的 UI 变更。

装饰器:用来装饰类、结构体、方法以及变量,赋予其特殊的含义,如上述示例中 @Entry、@Component、@State 都是装饰器。

@Component 表示这是个自定义组件;@Entry 则表示这是个入口组件;@State 表示组件中的状态变量,这个状态变化会引起 UI 变更。

自定义组件:可复用的 UI 单元,可组合其它组件,如上述被 @Component 装饰的 struct Hello。

UI 描述:声明式的方式来描述UI的结构,如上述 build() 方法内部的代码块。

内置组件:框架中默认内置的基础和布局组件,可直接被开发者调用,比如示例中的 Column、Text、Divider、Button。

事件方法:用于添加组件对事件的响应逻辑,统一通过事件方法进行设置,如跟随在 Button 后面的 onClick()。

属性方法:用于组件属性的配置,统一通过属性方法进行设置,如 fontSize()、width()、height()、color() 等,可通过链式调用的方式设置多项属性。

③实现界面

这一次程序用到的装饰器分别有@Entry 、@Component、@State和@Link 。

装饰器@Entry 装饰的自定义组件用作页面的默认入口组件,加载页面时,将首先创建并呈现 @Entry 装饰的自定义组件。

要注意的是:在单个源文件中,最多可以使用 @Entry 装饰一个自定义组件。

装饰器@Component 装饰的 struct 表示该结构体具有组件化能力,能够成为一个独立的组件,这种类型的组件也称为自定义组件。该组件可以组合其他组件,它通过实现 build 方法来描述 UI 结构。 组件生命周期包括:
  • aboutToAppear:函数在创建自定义组件的新实例后,在执行其build函数之前执行。允许在 aboutToAppear 函数中改变状态变量,这些更改将在后续执行build函数中生效。

  • aboutToDisappear:函数在自定义组件析构消耗之前执行。不允许在 aboutToDisappear 函数中改变状态变量,特别是 @Link 变量的修改可能会导致应用程序行为不稳定。

  • onPageShow:当此页面显示时触发一次。包括路由过程、应用进入前后台等场景,仅 @Entry 修饰的自定义组件生效。

  • onPageHide:当此页面消失时触发一次。包括路由过程、应用进入前后台等场景,仅 @Entry 修饰的自定义组件生效。

  • onBackPress:当用户点击返回按钮时触发,,仅 @Entry 修饰的自定义组件生效。

装饰器@State 装饰的变量是组件内部的状态数据,当这些状态数据被修改时,将会调用所在组件的 build 方法进行 UI 刷新。

要注意的是,标记为 @State 的属性不能直接在组件外部修改,必须为所有 @State 变量分配初始值。

装饰器@Link 装饰的变量可以和父组件的 @State 变量建立双向数据绑定。要注意的是,@Link 变量不能在组件内部进行初始化,在创建组件的新实例时,必须使用命名参数初始化所有 @Link 变量。

@Link 变量可以使用 @State 变量或 @Link 变量的引用进行初始化。@State 变量可以通过’$'操作符创建引用。

index.ets:先定义一个方格的背景颜色字典 colors,用以绘制不同数字的背景颜色,和一个全局变量 number,用以 ForEach 的键值生成。

varnumber=1
constcolors={
"0":"#CDC1B4",
"2":"#EEE4DA",
"4":"#ECE0C6",
"8":"#F2B179",
"16":"#F59563",
"32":"#F67C5F",
"64":"#F65E3B",
"128":"#EDCF72",
"256":"#EDCC61",
"512":"#99CC00",
"1024":"#83AF9B",
"2048":"#0099CC",
"4096":"#0099CC",
"8192":"#0099CC"
}

对于 4x4 的方格,如果要一个一个绘制,那么就需要重复绘制 16 个 Text 组件,而且这些 Text 组件除了文本之外,其他属性值都是一样的,这样极其繁琐且没有必要,体现不了 HarmonyOS ArkUI 3.0 的极简开发。

我们可以把 4x4 的方格以每一行定义成一个组件,每一行每一行地绘制,这样能够极大的减少代码量。

对于每一行组件,传统的方式是重复绘制 4 个 Text 组件,而且这些 Text 组件除了文本之外,其他属性值都是一样的,同样极其繁琐且没有必要。

我们可以采用 ForEach 循环渲染来绘制:

第一个参数必须是数组:允许空数组,空数组场景下不会创建子组件。同时允许设置返回值为数组类型的函数。

例如 arr.slice(1, 3),设置的函数不得改变包括数组本身在内的任何状态变量,如 Array.splice、Array.sort 或 Array.reverse 这些原地修改数组的函数。

第二个参数用于生成子组件的 lambda 函数。它为给定数组项生成一个或多个子组件。单个组件和子组件列表必须括在大括号“{…}”中。

可选的第三个参数是用于键值生成的匿名函数。它为给定数组项生成唯一且稳定的键值。

当子项在数组中的位置更改时,子项的键值不得更改,当数组中的子项被新项替换时,被替换项的键值和新项的键值必须不同。

键值生成器的功能是可选的。但是,出于性能原因,强烈建议提供,这使开发框架能够更好地识别数组更改。

如单击进行数组反向时,如果没有提供键值生成器,则 ForEach 中的所有节点都将重建。

使用装饰器 @Component,自定义一个每一行的组件,用装饰器 @Link 定义一个数组 grids。

在 build() 里面添加弹性布局 Flex,使用循环渲染 ForEach 来绘制组件 Text。

对于每一个 Text 组件,文本判断是否为 0,如果值为 0,则不显示,背景颜色采用刚才定义好的背景颜色字典 colors 对应的背景颜色。

文本颜色判断其值是否为 2 或 4,如果为 2 或 4,则采用颜色 #645B52,否则采用背景颜色白色。

@Component
structsetText{
@Linkgrids:number[]

build(){
Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center,direction:FlexDirection.Row}){
ForEach(this.grids,
(item:number)=>Text(item==0?'':item.toString())
.width(70)
.height(70)
.textAlign(TextAlign.Center)
.fontSize(30)
.margin({left:5,top:5,right:5,bottom:5})
.backgroundColor(colors[item.toString()])
.fontColor((item==2||item==4)?'#645B52':'#FFFFFF'),
(item:number)=>(number++)+item.toString())
}
}
}

同理,使用装饰器 @Component,自定义一个按钮 Button 组件,用以绘制上下左右四个按钮。

@Component
structsetButton{
privatedirtext:string
privatedir:string
@LinkGrids:number[][]
@Linkgrid1:number[]
@Linkgrid2:number[]
@Linkgrid3:number[]
@Linkgrid4:number[]

build(){
Button(this.dirtext)
.width(60)
.height(60)
.fontSize(30)
.fontWeight(FontWeight.Bold)
.align(Alignment.Center)
.backgroundColor('#974B31')
.fontColor('#FFFFFF')
.margin({left:5,top:3,right:5,bottom:3})
}
}

在装饰器 @Entry 装饰的结构体的 build() 中,将原来的代码全部删掉。

使用装饰器 @State 定义一个二维数组和四个一维数组,添加垂直布局 Column,宽和高都为 100%,背景颜色为白色。

在其中添加 Image 组件,引用刚才保存好的 logo 图片,再添加一个宽和高都是 320,背景颜色为 #BBADA0 的垂直布局 Column,在其添加四个刚才定义好的行组件 setText。

在外围的垂直布局 Column 中再添加四个刚才定义好的按钮组件 setButton,其中中间两个按钮组件位于弹性布局 Flex 中,最后添加一个 Button 组件,文本内容为“重新开始”。
@Entry
@Component
structIndex{
@Stategrids:number[][]=[[0,0,0,0],
[0,2,0,0],
[0,0,2,0],
[0,0,0,0]]
@Stategrid1:number[]=[this.grids[0][0],this.grids[0][1],this.grids[0][2],this.grids[0][3]]
@Stategrid2:number[]=[this.grids[1][0],this.grids[1][1],this.grids[1][2],this.grids[1][3]]
@Stategrid3:number[]=[this.grids[2][0],this.grids[2][1],this.grids[2][2],this.grids[2][3]]
@Stategrid4:number[]=[this.grids[3][0],this.grids[3][1],this.grids[3][2],this.grids[3][3]]

build(){
Column(){
Image($r('app.media.logo1024')).width('100%').height(140).align(Alignment.Center)
Column(){
setText({grids:$grid1})
setText({grids:$grid2})
setText({grids:$grid3})
setText({grids:$grid4})
}
.width(320)
.height(320)
.backgroundColor("#BBADA0")
setButton({dirtext:'↑',dir:'up',Grids:$grids,grid1:$grid1,grid2:$grid2,grid3:$grid3,grid4:$grid4})
Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center,direction:FlexDirection.Row}){
setButton({dirtext:'←',dir:'left',Grids:$grids,grid1:$grid1,grid2:$grid2,grid3:$grid3,grid4:$grid4})
setButton({dirtext:'→',dir:'right',Grids:$grids,grid1:$grid1,grid2:$grid2,grid3:$grid3,grid4:$grid4})
}
setButton({dirtext:'↓',dir:'down',Grids:$grids,grid1:$grid1,grid2:$grid2,grid3:$grid3,grid4:$grid4})
Button('重新开始')
.width(180)
.height(50)
.fontSize(30)
.align(Alignment.Center)
.backgroundColor('#974B31')
.fontColor('#FFFFFF')
.margin({left:5,top:3,right:5,bottom:3})
}
.width('100%')
.height('100%')
.backgroundColor("#FFFFFF")
.alignItems(HorizontalAlign.Center)
}
}

编写逻辑代码

index.ets:在结构体 setButton 中添加四个函数。
  • addTwoOrFourToGrids():用以随机生成一个新的方格数字,数字为2或4。

  • swipeGrids(direction):用以实现方格的重新生成。

  • changeGrids(direction):用以实现方格的上下左右移动。

  • changeString():用以将二维数组分成四个一维数组。

最后在 Button 组件的属性里添加一个点击事件,依次调用函数 swipeGrids(direction)、addTwoOrFourToGrids() 和 changeString()。

@Component
structsetButton{
privatedirtext:string
privatedir:string
@LinkGrids:number[][]
@Linkgrid1:number[]
@Linkgrid2:number[]
@Linkgrid3:number[]
@Linkgrid4:number[]

addTwoOrFourToGrids(){
letarray=[];
for(letrow=0;row< 4;row++)
for(letcolumn=0;column< 4;column++)
if(this.Grids[row][column]==0)
array.push([row,column]);

letrandomIndes=Math.floor(Math.random()*array.length);
letrow=array[randomIndes][0];
letcolumn=array[randomIndes][1];
if(Math.random()< 0.8){
this.Grids[row][column]=2;
}else{
this.Grids[row][column]=4;
}
}

swipeGrids(direction){
letnewGrids=this.changeGrids(direction);
if(newGrids.toString()!=this.Grids.toString()){
this.Grids=newGrids;
}
}

changeGrids(direction){
letnewGrids=[[0,0,0,0],
[0,0,0,0],
[0,0,0,0],
[0,0,0,0]];

if(direction=='left'||direction=='right'){
letstep=1;
if(direction=='right'){
step=-1;//step作为循环时数组下标改变的方向
}
for(letrow=0;row< 4;row++){//每一层
letarray=[];

letcolumn=0;//如果为left则从0开始right从3开始,
if(direction=='right'){
column=3;
}
for(leti=0;i< 4;i++){
if(this.Grids[row][column]!=0){//把所有非零元依次放入数组中
array.push(this.Grids[row][column]);
}
column+=step;//当direction为left时则从0向3递增,为right时则从3向0递减
}
for(leti=0;i< array.length - 1;i++){//访问当前元素及他的下一个元素,所有循环次数为length-1
if(array[i]==array[i+1]){//判断是否可合并,
array[i]+=array[i+1];//合并,
array[i+1]=0;//合并后参与合并的第二个元素消失
i++;
}
}

column=0;
if(direction=='right'){
column=3;
}

for(constelemofarray){
if(elem!=0){//跳过array里的空元素
newGrids[row][column]=elem;//把合并后的状态赋给新数组grids,
column+=step;
}
}
}
}elseif(direction=='up'||direction=='down'){//同理
letstep=1;
if(direction=='down'){
step=-1;
}

for(letcolumn=0;column< 4;column++){
letarray=[];

letrow=0;
if(direction=='down'){
row=3;
}
for(leti=0;i< 4;i++){
if(this.Grids[row][column]!=0){
array.push(this.Grids[row][column]);
}
row+=step;
}
for(leti=0;i< array.length - 1;i++){
if(array[i]==array[i+1]){
array[i]+=array[i+1];
array[i+1]=0;
i++;
}
}
row=0;
if(direction=='down'){
row=3;
}
for(constelemofarray){
if(elem!=0){
newGrids[row][column]=elem;
row+=step;
}
}
}
}
returnnewGrids;
}

changeString(){
this.grid1=[this.Grids[0][0],this.Grids[0][1],this.Grids[0][2],this.Grids[0][3]]
this.grid2=[this.Grids[1][0],this.Grids[1][1],this.Grids[1][2],this.Grids[1][3]]
this.grid3=[this.Grids[2][0],this.Grids[2][1],this.Grids[2][2],this.Grids[2][3]]
this.grid4=[this.Grids[3][0],this.Grids[3][1],this.Grids[3][2],this.Grids[3][3]]
}

build(){
Button(this.dirtext)
.width(60)
.height(60)
.fontSize(30)
.fontWeight(FontWeight.Bold)
.align(Alignment.Center)
.backgroundColor('#974B31')
.fontColor('#FFFFFF')
.margin({left:5,top:3,right:5,bottom:3})
.onClick((event:ClickEvent)=>{
this.swipeGrids(this.dir)
this.addTwoOrFourToGrids()
this.changeString()
})
}
}

在结构体 index 中文本内容为“重新开始”的按钮添加一个点击事件,用以重新初始化数据。

@Entry
@Component
structIndex{
@Stategrids:number[][]=[[0,0,0,0],
[0,2,0,0],
[0,0,2,0],
[0,0,0,0]]
@Stategrid1:number[]=[this.grids[0][0],this.grids[0][1],this.grids[0][2],this.grids[0][3]]
@Stategrid2:number[]=[this.grids[1][0],this.grids[1][1],this.grids[1][2],this.grids[1][3]]
@Stategrid3:number[]=[this.grids[2][0],this.grids[2][1],this.grids[2][2],this.grids[2][3]]
@Stategrid4:number[]=[this.grids[3][0],this.grids[3][1],this.grids[3][2],this.grids[3][3]]

build(){
Column(){
Image($r('app.media.logo1024')).width('100%').height(140).align(Alignment.Center)
Column(){
setText({grids:$grid1})
setText({grids:$grid2})
setText({grids:$grid3})
setText({grids:$grid4})
}
.width(320)
.height(320)
.backgroundColor("#BBADA0")
setButton({dirtext:'↑',dir:'up',Grids:$grids,grid1:$grid1,grid2:$grid2,grid3:$grid3,grid4:$grid4})
Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center,direction:FlexDirection.Row}){
setButton({dirtext:'←',dir:'left',Grids:$grids,grid1:$grid1,grid2:$grid2,grid3:$grid3,grid4:$grid4})
setButton({dirtext:'→',dir:'right',Grids:$grids,grid1:$grid1,grid2:$grid2,grid3:$grid3,grid4:$grid4})
}
setButton({dirtext:'↓',dir:'down',Grids:$grids,grid1:$grid1,grid2:$grid2,grid3:$grid3,grid4:$grid4})
Button('重新开始')
.width(180)
.height(50)
.fontSize(30)
.align(Alignment.Center)
.backgroundColor('#974B31')
.fontColor('#FFFFFF')
.margin({left:5,top:3,right:5,bottom:3})
.onClick((event:ClickEvent)=>{
this.grids=[[0,0,0,0],
[0,2,0,0],
[0,0,2,0],
[0,0,0,0]]

this.grid1=[this.grids[0][0],this.grids[0][1],this.grids[0][2],this.grids[0][3]]
this.grid2=[this.grids[1][0],this.grids[1][1],this.grids[1][2],this.grids[1][3]]
this.grid3=[this.grids[2][0],this.grids[2][1],this.grids[2][2],this.grids[2][3]]
this.grid4=[this.grids[3][0],this.grids[3][1],this.grids[3][2],this.grids[3][3]]
})
}
.width('100%')
.height('100%')
.backgroundColor("#FFFFFF")
.alignItems(HorizontalAlign.Center)
}
}

写在最后

HarmonyOS ArkUI 3.0 框架还有很多内容在本次程序中没有涉及到,例如页面跳转、数据管理、分布式数据库、分布式流转、分布式协同等等,我会在以后的文章中陆陆续续分享我的实战操作,希望能与各位一起学习相互交流!

责任编辑:haq
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 操作系统
    +关注

    关注

    37

    文章

    6742

    浏览量

    123192
  • 鸿蒙系统
    +关注

    关注

    183

    文章

    2634

    浏览量

    66220
  • HarmonyOS
    +关注

    关注

    79

    文章

    1967

    浏览量

    30025

原文标题:HarmonyOS ArkUI 3.0试玩初体验!

文章出处:【微信号:gh_834c4b3d87fe,微信公众号:OpenHarmony技术社区】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    HarmonyOS NEXT Developer Beta1中的Kit

    HarmonyOS NEXT Developer Preview1(API 11)版本开始,HarmonyOS SDK以Kit维度提供丰富、完备的开放能力,涵盖应用框架、系统、媒体、图形、应用服务
    发表于 06-26 10:47

    鸿蒙开发ArkUI-X基础知识:【ArkUI代码工程及构建介绍】

    ArkUI作为OpenHarmony的默认开发框架,在本项目(ArkUI-X)中需要做到一套代码同时支持多平台构建,所以会采取共仓开发的方式,部分仓直接指向OpenHarmony相关开源仓。
    的头像 发表于 05-25 16:45 1998次阅读
    鸿蒙开发<b class='flag-5'>ArkUI</b>-X基础知识:【<b class='flag-5'>ArkUI</b>代码工程及构建介绍】

    鸿蒙开发ArkUI-X基础知识:【ArkUI跨平台设计总体说明】

    本文档描述ArkUI开发框架跨平台运行能力相关的总体技术方案。
    的头像 发表于 05-24 15:41 1496次阅读
    鸿蒙开发<b class='flag-5'>ArkUI</b>-X基础知识:【<b class='flag-5'>ArkUI</b>跨平台设计总体说明】

    鸿蒙ArkUI-X框架开发:【开发准备】

    本文档适用于ArkUI-X框架开发的初学者。通过环境搭建、代码下载、代码编译、API扩展和使用,快速了解跨平台项目开发流程。
    的头像 发表于 05-23 21:02 436次阅读
    鸿蒙<b class='flag-5'>ArkUI</b>-X<b class='flag-5'>框架</b>开发:【开发准备】

    鸿蒙ArkUI-X跨语言调用说明:【平台桥接(@arkui-x.bridge)】

    平台桥接用于客户端(ArkUI)和平台(Android或iOS)之间传递消息,即用于ArkUI与平台双向数据传递、ArkUI侧调用平台的方法、平台调用ArkUI侧的方法。
    的头像 发表于 05-21 15:09 680次阅读
    鸿蒙<b class='flag-5'>ArkUI</b>-X跨语言调用说明:【平台桥接(@<b class='flag-5'>arkui</b>-x.bridge)】

    鸿蒙ArkUI-X跨平台开发:【SDK目录结构介绍】

    本文档配套ArkUI-X,将OpenHarmony ArkUI开发框架扩展到不同的OS平台,比如Android和iOS平台,让开发者基于ArkUI,可复用大部分的应用代码(UI以及主要
    的头像 发表于 05-20 16:28 775次阅读
    鸿蒙<b class='flag-5'>ArkUI</b>-X跨平台开发:【SDK目录结构介绍】

    鸿蒙ArkUI-X跨平台开发:【 应用工程结构说明】

    本文档配套ArkUI-X,将OpenHarmony ArkUI开发框架扩展到不同的OS平台,比如Android和iOS平台,让开发者基于ArkUI,可复用大部分的应用代码(UI以及主要
    的头像 发表于 05-19 21:05 546次阅读
    鸿蒙<b class='flag-5'>ArkUI</b>-X跨平台开发:【 应用工程结构说明】

    鸿蒙ArkUI-X跨平台技术:【开发初体验

    在DevEco Studio中导入ArkUI-X Sample,快速创建跨平台工程。
    的头像 发表于 05-17 15:54 587次阅读
    鸿蒙<b class='flag-5'>ArkUI</b>-X跨平台技术:【开发<b class='flag-5'>初体验</b>】

    鸿蒙跨平台框架:【ArkUi-X】创建工程

    鸿蒙推出了鸿ArkUi-X 框架所以就写个文章分享一下
    的头像 发表于 05-13 17:48 876次阅读
    鸿蒙跨平台<b class='flag-5'>框架</b>:【<b class='flag-5'>ArkUi</b>-X】创建工程

    鸿蒙ArkUI:【从代码到UI显示的整体渲染流程】

    方舟开发框架(简称ArkUI)是鸿蒙开发的UI框架,提供如下两种开发范式,我们 **只学声明式开发范式**
    的头像 发表于 05-13 16:06 806次阅读
    鸿蒙<b class='flag-5'>ArkUI</b>:【从代码到UI显示的整体渲染流程】

    鸿蒙开发学习:初探【ArkUI-X】

    **简单来说,ArkTS + ArkUI-X 对标的框架为 flutter,一次代码,编译为 native 全平台运行**
    的头像 发表于 05-13 15:58 988次阅读
    鸿蒙开发学习:初探【<b class='flag-5'>ArkUI</b>-X】

    HarmonyOS开发案例:【常用组件与布局】

    HarmonyOS ArkUI提供了丰富多样的UI组件,您可以使用这些组件轻松地编写出更加丰富、漂亮的界面。
    的头像 发表于 05-09 18:20 1173次阅读
    <b class='flag-5'>HarmonyOS</b>开发案例:【常用组件与布局】

    鸿蒙ArkUI开发学习:【渲染控制语法】

    ArkUI开发框架是一套构建 HarmonyOS / OpenHarmony 应用界面的声明式UI开发框架,它支持程序使用 `if/else` 条件渲染, `ForEach` 循环渲染
    的头像 发表于 04-09 16:40 901次阅读
    鸿蒙<b class='flag-5'>ArkUI</b>开发学习:【渲染控制语法】

    2024款鸿蒙OS 最新HarmonyOS Next_HarmonyOS4.0系列教程分享

    Next_HarmonyOS4.0系列教程由业内大神录制于2024年,包括:HarmonyOS ArkTs、ArkUI、ArkTs Api、ArkTs Native、OpenHarmony
    发表于 02-28 10:29

    跨Android、iOS、鸿蒙多平台框架ArkUI-X

    ArkUI是一套构建分布式应用界面的声明式UI开发框架。它使用极简的UI信息语法、丰富的UI组件、以及实时界面预览工具,帮助您提升移动应用界面开发效率30%。您只需使用一套ArkTS API,就能
    的头像 发表于 01-31 14:52 1730次阅读
    跨Android、iOS、鸿蒙多平台<b class='flag-5'>框架</b><b class='flag-5'>ArkUI</b>-X