HarmonyOS 鸿蒙Next ArkUI eTS小试牛刀

HarmonyOS 鸿蒙Next ArkUI eTS小试牛刀

基于初始化Hello World页面，使用资源改造页面，代码如下：

@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背景颜色
  }
}

竖屏手机，中文语言环境，浅色模式：效果如下图所示：

竖屏手机，英文语言环境，浅色模式：效果如下图所示：

竖屏手机，中文语言环境，深色模式：效果如下图所示：

手机横屏，深色模式，如下图所示：

折叠屏，竖屏，浅色模式，如下图所示：

折叠屏，横屏，深色模式，如下图所示：

平板，横屏，浅色模式，如下图所示：

平板，竖屏，深色模式，如下图所示：

车机显示效果，如下图所示：

源码下载：https://developer.huawei.com/consumer/cn/blog/topic/03877549022190007