鸿蒙开发之 ArkTsUI基础组件-编程知识

鸿蒙开发之 ArkTsUI基础组件

介绍

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%')}}