命令式
簡單講就是需要開發(fā)用代碼一步一步進(jìn)行布局,這個過程需要開發(fā)全程參與。
開發(fā)前請熟悉鴻蒙開發(fā)指導(dǎo)文檔:[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md
]
- Objective-C
ObjectiveC
復(fù)制代碼
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 = @"萬柳書院新一區(qū) 南北向滿五唯一";
[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);
}];
聲明式
聲明式則是由開發(fā)使用語言描述UI頁面長什么樣子,之后全權(quán)交給引擎去做
- 對頁面結(jié)構(gòu)進(jìn)行大的拆解。比如上面卡片分左右兩大部分
- 選用合適的容器組件進(jìn)行頁面描述
- 針對拆解出來的每個部分重復(fù)上面的兩步,直到無法拆解只能使用基本組件描述為止
比如上面的卡片可以進(jìn)行如下的拆分
- 整體是一個Row容器,分為左右兩大部分,左邊是圖片,右邊是一個Column容器
- 右邊Column容器又拆分為兩大部分,上面是標(biāo)題和描述,下面是價格。兩部分按照space-between布局
- 上面的標(biāo)題和描述作為一個整體,里面拆分成Column的兩個組件
- 下面價格可以直接使用系統(tǒng)組件Text
ReactNative
TypeScript
復(fù)制代碼
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'}} >
萬柳書院新一區(qū) 南北向滿五唯一
/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
復(fù)制代碼
SwiftUI
swift
復(fù)制代碼
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("萬柳書院新一區(qū) 南北向滿五唯一")
.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
復(fù)制代碼
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("柳書院新一區(qū) 南北向滿五唯一")
.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%")
`HarmonyOS與OpenHarmony鴻蒙文檔籽料:mau123789是v直接拿`
小結(jié)
- 從上面的例子可以看出來,聲明式語法只需要我們描述UI長什么樣就行。不需要做太多布局計(jì)算的工作,讓我們少掉一些頭發(fā)
- ArkUI和SwiftUI的語法最像,甚至它們的狀態(tài)管理也很像,都是提供了狀態(tài)綁定和監(jiān)聽機(jī)制來更新UI樣式
審核編輯 黃宇
聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請聯(lián)系本站處理。
舉報投訴
-
開發(fā)
+關(guān)注
關(guān)注
0文章
359瀏覽量
40745 -
代碼
+關(guān)注
關(guān)注
30文章
4674瀏覽量
67819 -
鴻蒙
+關(guān)注
關(guān)注
57文章
2272瀏覽量
42526
發(fā)布評論請先 登錄
相關(guān)推薦
鴻蒙:我來了!安卓:那我走?
(簡稱TS)/JavaScript(簡稱JS)為主要編程語言的聲明式UI框架(ArkUI 3.0)。同時,ArkCompiler 3.0增加了對TS/JS語言的支持,HarmonyOS
發(fā)表于 11-05 15:51
HarmonyOS應(yīng)用開發(fā)-ArkUI聲明式UI工程體驗(yàn)與分享
聲明式UI工程體驗(yàn)1. 創(chuàng)建工程說明:聲明式UI工程目前僅在API7才能使用 選擇 選擇eTS語言 創(chuàng)建完成后,這是該目錄,其中common目錄和model目錄需要自行創(chuàng)建即
發(fā)表于 12-08 10:22
HarmonyOS應(yīng)用開發(fā)-ArkUI聲明式UI頁面布局、跳轉(zhuǎn)與返回的實(shí)現(xiàn)
頁面跳轉(zhuǎn)聲明式UI范式提供了兩種機(jī)制來實(shí)現(xiàn)頁面間的跳轉(zhuǎn):1. 路由容器組件Navigator,包裝了頁面路由的能力,指定頁面target后,使其包裹的子組件都具有路由能力。2. 路由
發(fā)表于 12-09 11:42
課程預(yù)告丨12月15日官方直播帶你領(lǐng)略ArkUI的聲明式開發(fā)范式之美
方舟開發(fā)框架(ArkUI)的聲明式開發(fā)范式有什么優(yōu)勢?Java/JS/eTS(extended TypeScript)三種語言,用哪種語言更好?12月15日 19:00-20:30,H
發(fā)表于 12-10 17:52
Hello HarmonyOS學(xué)習(xí)筆記:分布式新聞客戶端實(shí)戰(zhàn)(JS、eTS)
開發(fā)框架(ArkUI),其中JAVA UI框架是基于Java拓展的命令式開發(fā),方舟開發(fā)框架是基于JS拓展的類Web開發(fā)范式(俗稱響應(yīng)式)或T
發(fā)表于 06-23 20:08
4天帶你上手HarmonyOS ArkUI開發(fā)——《HarmonyOS ArkUI入門訓(xùn)練營之健康生活實(shí)戰(zhàn)》
開發(fā)者快速提升技能實(shí)力進(jìn)階。目標(biāo)學(xué)員入門開發(fā)者(計(jì)算機(jī)專業(yè)相關(guān))學(xué)習(xí)鏈接:https://t.elecfans.com/c2241.html訓(xùn)練營目標(biāo)通過學(xué)習(xí)ArkUI入門訓(xùn)練營課程,了解聲明式UI開發(fā)
發(fā)表于 01-05 11:49
HarmonyOS/OpenHarmony應(yīng)用開發(fā)-ArkTS的聲明式開發(fā)范式
基于ArkTS的聲明式開發(fā)范式的方舟開發(fā)框架是一套開發(fā)極簡、高性能、跨設(shè)備應(yīng)用的UI開發(fā)框架,支持開發(fā)者高效的構(gòu)建跨設(shè)備應(yīng)用UI界面?;A(chǔ)能力使用基于ArkTS的聲明
發(fā)表于 01-17 15:09
HarmonyOS/OpenHarmony應(yīng)用開發(fā)-聲明式開發(fā)范式組件匯總
組件是構(gòu)建頁面的核心,每個組件通過對數(shù)據(jù)和方法的簡單封裝,實(shí)現(xiàn)獨(dú)立的可視、可交互功能單元。組件之間相互獨(dú)立,隨取隨用,也可以在需求相同的地方重復(fù)使用。聲明式開發(fā)范式目前可供選擇的組件如下表所示。組件
發(fā)表于 01-19 11:14
2022年HarmonyOS/OpenHarmony生態(tài)觀察
持續(xù)基于聲明式開發(fā)體系和三大理念長期演進(jìn),全方面發(fā)展鴻蒙應(yīng)用生態(tài)。在整體流程上,華為從設(shè)計(jì)>開發(fā)&
發(fā)表于 01-19 13:10
OpenHarmony應(yīng)用開發(fā)-ArkUI方舟開發(fā)框架簡析
構(gòu)建UI,主要基于以下幾點(diǎn)考慮:
開發(fā)效率: 聲明式開發(fā)范式更接近自然語義的編程方式,開發(fā)者可以直觀地描述UI,無需關(guān)心如何實(shí)現(xiàn)UI繪制和渲染,開發(fā)高效簡潔。
應(yīng)用性能: 如下圖所示,
發(fā)表于 04-23 09:35
JavaScript JavaScript是什么語言
JavaScript是屬于開發(fā)Web頁面的腳本編程語言,是一種具有函數(shù)優(yōu)先的輕量級編程語言。JavaScript基于原型編程、多范式的動態(tài)腳本語言,并且支持面向語言、
華為推出新聲明式 UI 開發(fā)框架(ArkUI)
今年的 HDC 華為開發(fā)者大會 2021,華為又雙叒推出新的聲明式 UI 開發(fā)框架(ArkUI),咋說呢,學(xué)無止境啊,更新速度堪比坐火箭。
HarmonyOS基于 ArkUI 中 TS 擴(kuò)展聲明式開發(fā)范式
本來計(jì)劃要做一個本地數(shù)據(jù)庫存儲相關(guān)的項(xiàng)目,但是官方的小伙伴給我說,ArkUI 數(shù)據(jù)庫目前不支持最新的模擬器,所以只能另想其他的。
評論