目录

• 自适应布局
  • 自适应拉伸布局
  • 自适应缩放
  • 自适应延伸
• 组件多态
• ArkUI开发框架
• 基础组件
  • Text组件和Span组件

---

参考

• 参考：harmonyos3: 鸿蒙ArkUI eTS教程配套源码
• 参考：《ArkUI实战》

---

日志

• 2022年07月15日17:50:14 初版

---

自适应布局

自适应拉伸布局

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  aboutToAppear() {
  }

  build() {
    Column({ space: 8 }) { // 根容器（本例使用垂直布局容器作为根容器）
      Row() { // 水平布局容器
        Text(this.message)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%') // 相对于父级容器Column的宽度（占满）
      .padding(10)
      .backgroundColor('#FFFFFF')
    }
    .width('100%') // 相对于手机屏幕的宽度（占满）
    .height('100%') // 相对于手机屏幕的宽度（占满）
    .padding({ top: 48, bottom: 24, left: 24, right: 24 }) // 屏幕内边距
    .backgroundColor('#F1F3F5')
  }
}

自适应拉伸布局下设置子组件大小和位置的两个技巧：

• 技巧一：子组件不可以设置宽度或者设置绝对宽度值。子组件之间使用Blank组件填充。使得Text组件和Button组件贴近左、右边缘。

  @Entry
  @Component
  struct Index {
    @State message: string = 'Hello World'
  
    aboutToAppear() {
    }
  
    build() {
      Column({ space: 8 }) { // 根容器（本例使用垂直布局容器作为根容器）
        Row() { // 水平布局容器
          Text(this.message)
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
        }
        .width('100%') // 相对于父级容器Column的宽度（占满）
        .padding(10)
        .backgroundColor('#FFFFFF')
  
        Row() { // 水平布局容器
          Text(this.message)
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
          Blank()
          Button("订阅"); // 相较于Text组件和Button组件贴近左、右
        }
        .width('100%') // 相对于父级容器Column的宽度（占满）
        .padding(10)
        .backgroundColor('#FFFFFF')
      }
  
      .width('100%') // 相对于手机屏幕的宽度（占满）
      .height('100%') // 相对于手机屏幕的宽度（占满）
      .padding({ top: 48, bottom: 24, left: 24, right: 24 }) // 屏幕内边距
      .backgroundColor('#F1F3F5')
    }
  }
  

• 技巧二：子组件不设置宽度，但通过layoutWeight设置该组件在父级容器中宽度权重比例。
  layoutWeight仅适用于Flex/Row/Column布局组件下的子组件。

  @Entry
  @Component
  struct Index {
    @State message: string = 'Hello World'
  
    aboutToAppear() {
    }
  
    build() {
      Column({ space: 8 }) { // 根容器（本例使用垂直布局容器作为根容器）
        Row() { // 水平布局容器
          Text(this.message)
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
        }
        .width('100%') // 相对于父级容器Column的宽度（占满）
        .padding(10)
        .backgroundColor('#FFFFFF')
  
        Row() { // 水平布局容器
          Text(this.message)
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
          Blank()
          Button("订阅"); // 相较于Text组件和Button组件贴近左、右
        }
        .width('100%') // 相对于父级容器Column的宽度（占满）
        .padding(10)
        .backgroundColor('#FFFFFF')
  
        Row() {
          Column().layoutWeight(1).height('100%').backgroundColor('#564AF7')
          Column().layoutWeight(2).height('100%').backgroundColor('#46B1E3')
          Column().layoutWeight(1).height('100%').backgroundColor('#564AF7')
        }
        .width('100%')
        .height(100)
      }
      .width('100%') // 相对于手机屏幕的宽度（占满）
      .height('100%') // 相对于手机屏幕的宽度（占满）
      .padding({ top: 48, bottom: 24, left: 24, right: 24 }) // 屏幕内边距
      .backgroundColor('#F1F3F5')
    }
  }
  

自适应缩放

{
    ...
    Image('../../resources/base/media/Snipaste_2022-07-16_09-40-16.png')
    .width('100%')
    .aspectRatio(1.5) // 制定当前组件的宽高比
}

自适应延伸

自适应延伸的要点在于不设置父级容器宽度。由子组件将父容器撑开。当不同设备的屏幕宽度发生变化时，组件随之发生自适应延伸显示更多数量。

{
    ...
    Row() {
      Column().width(120).height('100%').backgroundColor('#564AF7')
      Column().width(120).height('100%').backgroundColor('#46B1E3')
      Column().width(120).height('100%').backgroundColor('#564AF7')
      Column().width(120).height('100%').backgroundColor('#46B1E3')
    }
    .height(100)
}

组件多态

在组件开发中，追求组件在多设备、多语言及“深色模式/浅色模式”的差异性。组件在不同环境中呈现差异化的表现，称之为“多态”。

实现组件多态的关键技巧在于使用资源。

• 通过$r('app.type.name')的形式引用资源。

  • $r表示resource目录。
  • app表示应用内定义的资源。
  • type表示资源类型（或资源的存放位置），可以取“color”、“float”、“string”、“media”等。
  • name表示资源命名，由开发者定义资源时确定。

• 引用rawfile下资源时使用$rawfile('filename')的形式，当前rawfile仅支持Image控件引用图片资源，filename需要表示未rawfile目录下的文件相对路径，文件名需要包含后缀，路径开头不可以以"/"开头。

ArkUI开发框架

• 参考：Gitee Cloudev/HUI

目前（2022年7月16日）ArkUI eTS暂时仅支持手机、折叠屏、平板和车机。

@Entry
@Component
struct Index {
  build() {
    Column({ space: 8 }) {
      Text($r("app.string.entry_MainAbility")) // 使用字符串资源输入文字
        .fontColor($r("app.color.fgLevel1")) // 文字颜色，适配深色模式/浅色模式
        .fontSize($r("app.float.fontSizeH6")) // 设置字号为6号标题
        .fontWeight(Number($r("app.float.fontWeightH6"))) // 设置6号标题的字重

      Text($r("app.string.mainability_description")) // 设置正文文本
        .fontColor($r("app.color.fgLevel2")) // 子标题采用辅助色
        .fontSize($r("app.float.fontSizeSubTitle1")) // 设置子标题字号
        .fontWeight(Number($r("app.float.fontWeightSubTitle1"))) // 设置子标题字重

      Image($r("app.media.cover")) // 使用媒体资源
        .width("100%")
        .aspectRatio(1.5)
        .borderRadius($r("app.float.radius_L")) // 图片圆角

      Text($r("app.string.specialColumn")) // 设置正文文本
        .fontColor($r("app.color.fgLevel1")) // 文字颜色
        .fontSize($r("app.float.fontSizeBody1")) // 设置正文字号
        .fontWeight(Number($r("app.float.fontWeightBody1"))) // 设置正文字重
    }
    .width('100%')
    .height('100%')
    .padding({
      top: $r("app.float.spaceTop"),
      bottom: $r("app.float.spaceBottom"),
      left: $r("app.float.spaceLeft"),
      right: $r("app.float.spaceRight")
    }) // 屏幕边缘间隔
    .backgroundColor($r("app.color.appBg")) // App背景颜色
  }
}

基础组件

Text组件和Span组件

• 参考：Gitee Cloudev/harmonyos3 > BaseComponent

标签：width,Column,100%,基础,HarmonyOS,backgroundColor,组件,app
来源： https://www.cnblogs.com/zyjhandsome/p/16483583.html