鸿蒙ArkUI：【编程范式：命令式-＞声明式】

news2025/10/31 11:23:01

命令式

简单讲就是需要开发用代码一步一步进行布局，这个过程需要开发全程参与。
开发前请熟悉鸿蒙开发指导文档：gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。

  • Objective-C
ObjectiveC
复制代码
UIView *cardView = [[UIView alloc] init];
cardView.backgroundColor = [UIColor whiteColor];
cardView.layer.cornerRadius = 16;
cardView.clipsToBounds = YES;
[self.view addSubview:cardView];
[cardView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.mas_equalTo(16);
    make.right.mas_offset(-16);
    make.height.mas_equalTo(116);
    make.top.mas_equalTo(100);
}];
    
NSString *imgUrl = @"https://ke-image.ljcdn.com//110000-inspection//pc1_nBllrJgGj_1.jpg.280x210.jpg";
UIImageView *imgView = [[UIImageView alloc] init];
imgView.backgroundColor = [UIColor lightGrayColor];
[imgView sd_setImageWithURL:[NSURL URLWithString:imgUrl]];
[cardView addSubview:imgView];
[imgView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.bottom.mas_offset(0);
    make.left.mas_equalTo(0);
    make.width.mas_equalTo(107);
}];

UILabel *titleLbl = [[UILabel alloc] init];
titleLbl.font = [UIFont systemFontOfSize:14 weight:UIFontWeightBold];
titleLbl.textColor = [UIColor blackColor];
titleLbl.text = @"万柳书院新一区 南北向满五唯一";
[cardView addSubview:titleLbl];
[titleLbl mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.mas_equalTo(imgView.mas_right).mas_offset(12);
    make.right.mas_offset(-12);
    make.top.mas_equalTo(16);
}];

UILabel *subTitleLbl = [[UILabel alloc] init];
subTitleLbl.textColor = [UIColor blackColor];
subTitleLbl.font = [UIFont systemFontOfSize:12 weight:UIFontWeightRegular];
subTitleLbl.text = @"4室2厅/278.35㎡/南 北/万柳书院";
[cardView addSubview:subTitleLbl];
[subTitleLbl mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.right.mas_equalTo(titleLbl);
    make.top.mas_equalTo(titleLbl.mas_bottom).mas_offset(8);
}];

UILabel *priceLbl = [[UILabel alloc] init];
priceLbl.font = [UIFont systemFontOfSize:14 weight:UIFontWeightBold];
priceLbl.textColor = [UIColor redColor];
priceLbl.text = @"4238万";
[cardView addSubview:priceLbl];
[priceLbl mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.mas_equalTo(titleLbl);
    make.bottom.mas_offset(-16);
}];

UILabel *avgPriceLbl = [[UILabel alloc] init];
avgPriceLbl.textColor = [UIColor lightGrayColor];
avgPriceLbl.font = [UIFont systemFontOfSize:12 weight:UIFontWeightRegular];
avgPriceLbl.text = @"155,445元/平";
[cardView addSubview:avgPriceLbl];
[avgPriceLbl mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.mas_equalTo(priceLbl.mas_right).mas_offset(2);
    make.right.mas_lessThanOrEqualTo(titleLbl.mas_right);
    make.bottom.mas_equalTo(priceLbl);
}];

声明式

声明式则是由开发使用语言描述UI页面长什么样子，之后全权交给引擎去做

  1. 对页面结构进行大的拆解。比如上面卡片分左右两大部分
  2. 选用合适的容器组件进行页面描述
  3. 针对拆解出来的每个部分重复上面的两步，直到无法拆解只能使用基本组件描述为止

比如上面的卡片可以进行如下的拆分

  1. 整体是一个Row容器，分为左右两大部分，左边是图片，右边是一个Column容器
  2. 右边Column容器又拆分为两大部分，上面是标题和描述，下面是价格。两部分按照space-between布局
  3. 上面的标题和描述作为一个整体，里面拆分成Column的两个组件
  4. 下面价格可以直接使用系统组件Text

ReactNative

TypeScript
复制代码
<View
  style={{
    borderRadius: 8,
    marginHorizontal: 16,
    flexDirection: 'row',
    backgroundColor: 'white',
    overflow: 'hidden',
    height: 116,
  }}>
  <Image
    source={{
      uri: 'https://ke-image.ljcdn.com//110000-inspection//pc1_nBllrJgGj_1.jpg.280x210.jpg',
    }}
    style={{width: 107, backgroundColor: '#eee'}}
  />
  <View
    style={{
      marginVertical: 16,
      marginHorizontal: 12,
      flex: 1,
      justifyContent: 'space-between',
    }}>
    <View>
      <Text style={{fontSize: 14, color: '#222', fontWeight: '500'}}>
        万柳书院新一区 南北向满五唯一
      </Text>
      <Text style={{fontSize: 11, color: '#222', marginTop: 8}}>
        4室2厅/278.35㎡/南 北/万柳书院
      </Text>
    </View>
    <View
      style={{flexDirection: 'row', marginTop: 8, alignItems: 'flex-end'}}>
      <Text
        style={{
          fontSize: 17,
          color: '#E62222',
          fontWeight: 'bold',
        }}>
        4238万
      </Text>
      <Text style={{fontSize: 11, color: '#999', marginLeft: 6}}>
        155,445元/平
      </Text>
    </View>
  </View>
</View>

Flutter

flutter
复制代码

SwiftUI

swift
复制代码
HStack(spacing:0) {
    AsyncImage(url: URL(string: "https://ke-image.ljcdn.com//110000-inspection//pc1_nBllrJgGj_1.jpg.280x210.jpg"))
        .frame(width:107)
        .aspectRatio(contentMode: .fill)
        .clipped()

    VStack(alignment: .leading,
           spacing:0) {
        VStack(alignment: .leading,
               spacing:0) {
            Text("万柳书院新一区 南北向满五唯一")
                .lineLimit(1)
                .font(.system(size: 14))
                .foregroundColor(.black)
                .fontWeight(.bold)
            Text("4室2厅/278.35㎡/南 北/万柳书院")
                .lineLimit(1)
                .font(.system(size: 12))
                .foregroundColor(.black)
                .padding(.top, 8)
        }

        Spacer()

        HStack(alignment: .bottom,
               spacing:2) {
            Text("4238万")
                .font(.system(size: 14))
                .foregroundColor(.red)
                .fontWeight(.bold)
            Text("155,445元/平")
                .font(.system(size: 12))
                .foregroundColor(.secondary)
                .padding(.leading, 2)
        }
    }
           .padding(.vertical, 16)
           .padding(.horizontal, 12)

    Spacer()
}
.frame(height: 116)
.background(.white)
.clipShape(RoundedRectangle(cornerRadius: 8))
.padding(.horizontal, 16)
}

ArkUI

typescript
复制代码
  Row() {
    Row() {
      Image("https://ke-image.ljcdn.com//110000-inspection//pc1_nBllrJgGj_1.jpg.280x210.jpg")
        .width(107)
        .height("100%")
        .objectFit(ImageFit.Cover)
      Column() {
        Column() {
          Text("柳书院新一区 南北向满五唯一")
            .fontSize(16)
            .fontColor("#222")
            .maxLines(1)
          Text("4室2厅/278.35㎡/南 北/万柳书院")
            .fontSize(14)
            .fontColor("#222")
            .maxLines(1)
            .margin({ top: 8 })
        }
        .alignItems(HorizontalAlign.Start)

        Row() {
          Text("4238万")
            .fontSize(15)
            .fontColor("#E62222") 
            .fontWeight(FontWeight.Bold)
          Text("155,445元/平")
            .fontSize(13)
            .fontColor("#222")
            .margin({ left: 2 })
        }
        .justifyContent(FlexAlign.Start)
        .alignItems(VerticalAlign.Bottom)
      }
      .width("100%")
      .height("100%")
      .padding({ top: 16, bottom: 16, left: 12, right: 12 })
      .alignItems(HorizontalAlign.Start)
      .justifyContent(FlexAlign.SpaceBetween)
    }
    .borderRadius(8)
    .margin({ left: 16, right: 16 })
    .backgroundColor(Color.White)
    .justifyContent(FlexAlign.Start)
    .clip(true)
  }
  .height(116)
  .width("100%")

搜狗高速浏览器截图20240326151547.png

小结

  1. 从上面的例子可以看出来，声明式语法只需要我们描述UI长什么样就行。不需要做太多布局计算的工作，让我们少掉一些头发
  2. ArkUI和SwiftUI的语法最像，甚至它们的状态管理也很像，都是提供了状态绑定和监听机制来更新UI样式

鸿蒙开发岗位需要掌握那些核心要领？

目前还有很多小伙伴不知道要学习哪些鸿蒙技术？不知道重点掌握哪些？为了避免学习时频繁踩坑，最终浪费大量时间的。

自己学习时必须要有一份实用的鸿蒙（Harmony NEXT）资料非常有必要。 这里我推荐，根据鸿蒙开发官网梳理与华为内部人员的分享总结出的开发文档。内容包含了：【ArkTS、ArkUI、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战】等技术知识点。

废话就不多说了，接下来好好看下这份资料。

如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。鸿蒙OpenHarmony知识←前往。下面是鸿蒙开发的学习路线图。

针对鸿蒙成长路线打造的鸿蒙学习文档。鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，帮助大家在技术的道路上更进一步。

其中内容包含：

《鸿蒙开发基础》鸿蒙OpenHarmony知识←前往

  1. ArkTS语言
  2. 安装DevEco Studio
  3. 运用你的第一个ArkTS应用
  4. ArkUI声明式UI开发
  5. .……

《鸿蒙开发进阶》鸿蒙OpenHarmony知识←前往

  1. Stage模型入门
  2. 网络管理
  3. 数据管理
  4. 电话服务
  5. 分布式应用开发
  6. 通知与窗口管理
  7. 多媒体技术
  8. 安全技能
  9. 任务管理
  10. WebGL
  11. 国际化开发
  12. 应用测试
  13. DFX面向未来设计
  14. 鸿蒙系统移植和裁剪定制
  15. ……

《鸿蒙开发实战》鸿蒙OpenHarmony知识←前往

  1. ArkTS实践
  2. UIAbility应用
  3. 网络案例
  4. ……

最后

鸿蒙是完全具备无与伦比的机遇和潜力的；预计到年底将有 5,000 款的应用完成原生鸿蒙开发，这么多的应用需要开发，也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长，学习鸿蒙势在必行！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1664698.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【C/C++笔试练习】DNS设置文件、应用层、Dos攻击、DNS服务、DNS、子网划分、http状态、路由设置、TCP连接、HTTP状态码、剪花布条、客似云来

【C/C++笔试练习】DNS设置文件、应用层、Dos攻击、DNS服务、DNS、子网划分、http状态、路由设置、TCP连接、HTTP状态码、剪花布条、客似云来

文章目录 C/C笔试练习选择部分&#xff08;1&#xff09;DNS设置文件&#xff08;2&#xff09;应用层&#xff08;3&#xff09;Dos攻击&#xff08;4&#xff09;DNS服务&#xff08;5&#xff09;DNS&#xff08;6&#xff09;子网划分&#xff08;7&#xff09;http状态&am…
阅读更多...
嵌入式C语言高级教程：实现基于STM32的智能健康监测手环

嵌入式C语言高级教程：实现基于STM32的智能健康监测手环

智能健康监测手环能够实时监控用户的生理参数&#xff0c;如心率、体温和活动量&#xff0c;对于健康管理和疾病预防非常有帮助。本教程将指导您如何在STM32微控制器上实现一个基本的智能健康监测手环。 一、开发环境准备 硬件要求 微控制器&#xff1a;STM32L476RG&#xf…
阅读更多...
进程间通信（二）

进程间通信（二）

共享内存 当进程A和进程B有一块共享的内存空间时&#xff0c;这两个进程之间的数据交互就会变的很简单&#xff0c;只需要像读取自己内存空间中的元素一样去读取数据即可。实现共享内存进行数据交互的一般步骤&#xff1a; 创建/打开共享内存内存映射数据交换断开与共享内存的…
阅读更多...
【数组算法】598. 区间加法

【数组算法】598. 区间加法

给你一个 m x n 的矩阵 M 和一个操作数组 op 。矩阵初始化时所有的单元格都为 0 。ops[i] [ai, bi] 意味着当所有的 0 < x < ai 和 0 < y < bi 时&#xff0c; M[x][y] 应该加 1。 在 执行完所有操作后 &#xff0c;计算并返回 矩阵中最大整数的个数 。 示例 1: …
阅读更多...
户籍管理系统的设计与实现

户籍管理系统的设计与实现

【免费】户籍管理系统的设计与实现.zip资源-CSDN文库https://download.csdn.net/download/JW_559/89296790 ​​​​​​​户籍管理系统的设计与实现 摘 要 当今社会人们生活质量越来越高&#xff0c;人们对生活品质的追求不断提升&#xff0c;对于孩子求学&#xff0c;变更住…
阅读更多...
内容安全（AV）

内容安全（AV）

防病毒网关&#xff08;AV&#xff09;简介 基于网络侧 识别 病毒文件&#xff0c;工作范围2~7层。这里的网关指的是内网和外网之间的一个关口&#xff0c;在此进行病毒的查杀。在深信服中就有一个EDR设备&#xff0c;该设备就是有两种部署&#xff0c;一个部署在网关&#xf…
阅读更多...
C# WinForm —— 15 DateTimePicker 介绍

C# WinForm —— 15 DateTimePicker 介绍

1. 简介 2. 常用属性 属性解释(Name)控件ID&#xff0c;在代码里引用的时候会用到,一般以 dtp 开头Format设置显示时间的格式&#xff0c;包含Long&#xff1a; Short&#xff1a; Time&#xff1a; Custom&#xff1a;采用标准的时间格式 还是 自定义的格式CustomFormat自定…
阅读更多...
关于 vs2019 c++ 20规范，STL 库提供的标准分配器 alloctor 及其 traits 及涉及分配器交换的全局函数 _Pocs

关于 vs2019 c++ 20规范，STL 库提供的标准分配器 alloctor 及其 traits 及涉及分配器交换的全局函数 _Pocs

(1) 我们写 c 代码&#xff0c;使用 STL 库中的模板&#xff0c;很少自己写对象的分配器。用 STL 中的分配器也够用。研究 STL 中的分配器也可以为咱们自己写分配器提供参考。 咱们会遇到这样的场景&#xff0c;例如交换两个容器对象&#xff1a; list a ,b ; a .swap (b) ; 这…
阅读更多...
搭建一个Xx431?

搭建一个Xx431?

搭建一个Xx431? 嘿uu们!刚结束了一周六天班感觉如何? 我的状态倒还行,工作生活总能找到乐子,本周整活就是用纸巾和蛋糕托做的油灯,另外想制冷片做个温水冷水可调的杯托,但我还不会搞3d,希望今年能搞起来. 题外话就说到这,这个选题也是因为实际遇到的问题需要这玩意,下班路…
阅读更多...
初识java--javaSE(3)--方法，递归，数组，

初识java--javaSE(3)--方法，递归，数组，

文章目录 一 方法的使用1.1 什么是方法&#xff1f;main方法注意事项 1.2 方法的调用嵌套调用在方法调用时形参与实参的关系&#xff1a; 1.3 方法的重载方法重载的意义&#xff1f;总结方法重载&#xff1a;方法签名&#xff1a; 二 递归什么是递归&#xff1f;递归的精髓&…
阅读更多...
PyQt6--Python桌面开发（8.QPlainTextEdit纯文本控件）

PyQt6--Python桌面开发（8.QPlainTextEdit纯文本控件）

QPlainTextEdit纯文本控件
阅读更多...
做题杂记666

做题杂记666

[XYCTF2024] 铜匠 题目描述&#xff1a; from Crypto.Util.number import * from secrets import flagm bytes_to_long(flag) m1 getRandomRange(1, m) m2 getRandomRange(1, m) m3 m - m1 - m2def task1():e 149p getPrime(512)q getPrime(512)n p * qd inverse(e,…
阅读更多...
C++11：并发新纪元 —— 深入理解异步编程的力量（1）

C++11：并发新纪元 —— 深入理解异步编程的力量（1）

hello &#xff01;大家好呀&#xff01; 欢迎大家来到我的Linux高性能服务器编程系列之《C11&#xff1a;并发新纪元 —— 深入理解异步编程的力量》&#xff0c;在这篇文章中&#xff0c;你将会学习到C新特性以及异步编程的好处&#xff0c;以及其如何带来的高性能的魅力&…
阅读更多...
【学习笔记】HarmonyOS 4.0 鸿蒙Next 应用开发--安装开发环境

【学习笔记】HarmonyOS 4.0 鸿蒙Next 应用开发--安装开发环境

开发前的准备 首先先到官网去下载Devco Studio 这个开发工具&#xff0c;https://developer.harmonyos.com/cn/develop/deveco-studio/#download 提供了WIndows和Mac的开发环境&#xff0c;我自己是Windows的开发环境。 所以下载之后直接点击exe进行安装即可。 如果之前安装过…
阅读更多...
nc生成临时凭证配置

nc生成临时凭证配置

nc生成临时凭证配置 要实现的功能&#xff1a; 审批时生成临时凭证弃审时删除临时凭证 前台配置 后台配置 BillReflectorServiceImpl.java package nc.pubimpl.jych.qtsq.voucher;import java.util.ArrayList; import java.util.Collection; import java.util.HashMap; impo…
阅读更多...
vue3专栏项目 -- 三、使用vue-router 和 vuex（下）

vue3专栏项目 -- 三、使用vue-router 和 vuex（下）

一、添加columnDetail 页面 首页有专栏列表&#xff08;ColumnList组件&#xff09;&#xff0c;专栏列表中有很多专栏&#xff0c;然后点击某个专栏就进入专栏详情页&#xff08;ColumnDetail组件&#xff09;&#xff0c;专栏详情页中有很多文章&#xff0c;点击某个文章就进…
阅读更多...
【案例分享】校园服务小程序开发经验和主要功能，引领校园生活新方式

【案例分享】校园服务小程序开发经验和主要功能，引领校园生活新方式

随着移动互联网的普及&#xff0c;学生们对于校园生活的需求也在不断增长。校园圈子、校园跑腿、校园外卖、校园服务等小程序等应用应运而生&#xff0c;为学生们提供了更加便捷、高效的生活方式。那么&#xff0c;如何开发一款能够满足学生需求的校园服务小程序呢&#xff1f;…
阅读更多...
VTK官方示例

VTK官方示例

VTK官方示例 -vtk字體 #!/usr/bin/env python# noinspection PyUnresolvedReferences import vtkmodules.vtkInteractionStyle # noinspection PyUnresolvedReferences import vtkmodules.vtkRenderingFreeType # noinspection PyUnresolvedReferences import vtkmodules.vtk…
阅读更多...
创新指南 |风险管理：企业如何应对颠覆性创新带来的挑战

创新指南 |风险管理：企业如何应对颠覆性创新带来的挑战

在当今充满变数的商业时代&#xff0c;颠覆性创新是企业突破传统、引领市场的关键。然而&#xff0c;真正的创新之旅并不平坦&#xff0c;充满了挑战和不确定性。文章将快速引导读者了解颠覆性创新的定义、挑战、以及如何通过设计思维、市场洞察、利益相关者沟通和文化变革等关…
阅读更多...
专业数字音频编码器 JR-AE401

专业数字音频编码器 JR-AE401

简介 JR-AE401专业模拟&数字音频编码器采用最为先进的MPEG4 AAC音频压缩算法&#xff0c;在低网络带宽的严酷条件下也具备优异的音频还原性。支持多种音频编码标准&#xff0c;例如AAC-LC,AAC-HE,AAC-HEv2等。 为适应各种复杂的网络音频应用环境JR-AE401提供了丰富的流媒…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023