鴻蒙ArkUI：【編程范式：命令式->聲明式】

命令式

簡單講就是需要開發用代碼一步一步進行布局，這個過程需要開發全程參與。
開發前請熟悉鴻蒙開發指導文檔：[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%")
  
`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

小結

1. 從上面的例子可以看出來，聲明式語法只需要我們描述UI長什么樣就行。不需要做太多布局計算的工作，讓我們少掉一些頭發
2. ArkUI和SwiftUI的語法最像，甚至它們的狀態管理也很像，都是提供了狀態綁定和監聽機制來更新UI樣式

審核編輯 黃宇