鸿蒙开发之 ArkTsUI基础组件

jiojio冲冲冲

已于 2024-06-04 16:20:44 修改

阅读量564

点赞数 2

分类专栏：鸿蒙开发文章标签： harmonyos 华为

于 2024-02-26 14:05:50 首次发布

本文链接：https://blog.csdn.net/weixin_42268006/article/details/136165183

版权

鸿蒙开发专栏收录该内容

12 篇文章 1 订阅

订阅专栏

介绍

ArkTS是鸿蒙生态的应用开发语言。它在保持TypeScript（简称TS）基本语法风格的基础上，对TS的动态类型特性施加更严格的约束，引入静态类型。同时，提供了声明式UI、状态管理等相应的能力，让开发者可以以更简洁、更自然的方式开发高性能应用。
之前前端开发需要掌握html css javascript 三种不同的语言，现在只需要ArkTS

ArkUI组件—Image组件

图片打包和模拟机上显示不出来需要配置授权申请
地址

@Entry
@Component
struct Index {
  @State message: string = 'hello world'
  build() {
   Row(){
    Column() {
       Image($r('app.media.icon'))
       .width(250)
       .interpolation(ImageInterpolation.High)
    }
    .width('100%')
   }
   .height('100%')
  }
 }

ArkUI组件—text组件

@Entry
@Component
struct Index {
  @State message: string = 'hello world'
  build() {
   Row(){
    Column() {
       Image($r('app.media.icon'))
       .width(250)
       .interpolation(ImageInterpolation.High)
       Text($r('app.string.width_label'))
       .fontSize(20)
       .fontWeight(FontWeight.Bold)
    }
    .width('100%')
   }
   .height('100%')
  }
 }

en_US/element/string.json

   {
      "name": "width_label",
      "value": "Image Width: "
    },

zh_CN/element/string.json

     {
      "name": "width_label",
      "value": "图片宽度: "
    }

ArkUI组件—textInput

@Entry
@Component
struct Index {
  @State message: string = 'hello world'
  build() {
   Row(){
    Column() {
       Image($r('app.media.icon'))
       .width(250)
       .interpolation(ImageInterpolation.High)
       Text($r('app.string.width_label'))
       .fontSize(20)
       .fontWeight(FontWeight.Bold)
       TextInput({text:'1234'})
       .width(150)
       .backgroundColor('#36D')
       .type(InputType.Password)
    }
    .width('100%')
   }
   .height('100%')
  }
 }