自适应布局

自适应拉伸布局

@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

巴特西

HarmonyOS基础