HarmonyOS学习：项目进度列表实战

示例图

一、布局单位

在我们布局中，经常会采用px来作为布局的一个尺寸参考单位，这个单位在浏览器中已经是布局的标准。

在鸿蒙开发中，提出了一些新的单位用于布局。

物理像素：一般用px来表示。

逻辑像素：在布局的时候，底层针对物理像素和屏幕的尺寸关系进行了转化的中间层。

分辨率：代表在屏幕上面到底布局了多少个像素点（发光点）。

// 屏幕尺寸：1680px  分辨率：3560px 
div{
    width: 500px,
    height: 500px
}

这里写的的500px实际上参考3560px像素为布局，但是最终渲染出来的结果，转化为了1680px尺寸的比例。

鸿蒙开发中，要进行布局，我们采用官方提供的单位来实现

代码为：

@Entry
@Component
struct Page01 {
  @State message: string = 'Hello World';
​
  build() {
    Column(){
      Text("文本")
        .fontSize("30fp")  // 与不加单位时效果一样，但是当改变设备字体大小时也会跟着改变
      Row()
        .width("100vp")  // 以屏幕的实际大小为参考布局,与不加单位时效果一样
        .height("100vp")
        .backgroundColor("#ccc")
      Row()
        .width("100lpx")  // 1vp = 2lpx
        .height("100lpx")
        .backgroundColor("red")
    }
    .height('100%')
    .width('100%')
  }
}

总结：

1、如果采用px作为单位，在鸿蒙中参考的物理像素作为布局参考尺寸，物理像素的值可能是动态变化的，即放在不同手机上面，物理像素可能变化。

2、vp作为鸿蒙开发中我们推荐的单位，采用当前设备的屏幕宽度来作为我们布局的参考，不管物理像素到底是多少。可以减少屏幕之间布局差异。不写单位时默认是vp。

3、fp一般用于设置字体大小，不写单位时默认会采用vp作为字体大小单位。fp最大的特点是随着系统字体大小的变化而变化。

4、lpx这个单位要进行换算。当设计稿为720时，在实际宽度为1440物理像素的屏幕上，1lpx为2px大小。

二、Column和Row的布局

Column默认垂直方向为主轴，水平方向为侧轴。

Row默认水平方向为主轴，垂直方向为侧轴。

元素放在这两个容器中，子元素默认会在侧轴方向上面水平居中。

@Entry
@Component
struct Page01 {
  @State message: string = 'Hello World';
​
  build() {
    // 以弹性布局为基础来理解
    Column(){
      Column(){
        Text("你好，小王")
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .fontColor("#12175E")
        Text("测试代码")
      }
      .width("100%")
      .height("50%")
      .backgroundColor(Color.Gray)
      .alignItems(HorizontalAlign.Start) // 侧轴（水平方向）对齐方式
      .justifyContent(FlexAlign.Center) // 主轴（垂直方向）对齐方式
        
      Row(){
        Text("Row1")
        Text("Row2")
      }
      .width("100%")
      .height("50%")
      .backgroundColor(Color.Orange)
      .alignItems(VerticalAlign.Top)  // 侧轴（水平方向）对齐方式
      .justifyContent(FlexAlign.SpaceBetween)  // 主轴（垂直方向）对齐方式
    }
  }
}

在布局过程中这两个组件都可以用alignItems和justifyContent来调整子元素的布局方案。

三、关于颜色配置

Text("你好，小王")
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          // 设置颜色可以允许：英文单词、16进制、egb、枚举
          .fontColor("#12175E")

以后在布局中，但凡遇到需要配置颜色，我们可以采用四个方案来设计

.fontColor("#12175E")
.fontColor("rgb(233,456,12)")
.fontColor("red")
.fontColor(Color.orange) 

可以根据设计师提供的原稿进行颜色吸取并用于布局页面。