鸿蒙应用开发-ArkUI组件

一、构建第一个页面

ts 复制代码
// Index.ets

// 装饰器(带@修饰)。可以用来装饰类结构、方法、变量,如:@Entry、@Component、@State等
@Entry // @Entry 标记当前组件是入口组件,即这个组件代表一个页面可以被独立访问显示。没有这个装饰器的组件就是普通组件,不能单独显示,只能被其它页面引用,做页面元素的封装(相当于子视图)
@Component // @Component 标记这个结构体是一个自定义组件

// 这个结构体在ArkTS中称为,自定义组件:可复用的UI单元
struct Index {
  // @State 用来标记一个变量是状态变量,值变化时会触发UI刷新
  // 声明式UI特点:状态数据变化驱动页面UI自动刷新
  @State message: string = 'Hello World'

  // 构建组件内容,UI描述:其内部以声明式方式描述UI结构
  build() {
    // 内置组件:ArkUI提供的组件
    // 容器组件:用来完成页面布局,例如:Row、Column
    // 基础组件:自带样式和功能的页面元素,例如:Text
    Row() {
      Column() {
        Text(this.message)
          // 属性方法:设置组件的UI样式
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          // 事件方法:设置组件的事件回调(传一个回调函数)
          .onClick(() => {
            // ...处理事件
            this.message = 'Hello ArkTS!'
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

二、Image组件

  1. 组件使用
ts 复制代码
// 需要配置网络访问权限,才能请求网络资源
Image('https://gbres.dfcfw.com/Files/picture/20240107/A647B2359640C398075289DFB100768F_w707h782.jpg')
  // 指定图片宽度,高度会自动按图片宽高比自动缩放
  .width(300) // 数字格式,如:300vp,会有一个默认单位vp(虚拟像素:不是真正屏幕像素,会根据设备像素密度进行换算,确保在不同设备上视觉大小一样)
  //.width('100%') // 字符串格式,如:'100%',百分比模式(根据设备大小自动伸缩)
  1. 访问控制权限申请
    在module.json5文件中添加如下内容:
ts 复制代码
{
  "module": {
    // 配置权限(系统权限、用户权限)
    "requestPermissions": [
      {
        // 配置网络权限(属于系统权限,只需要配置name即可)
        "name": "ohos.permission.INTERNET"
      }
    ],
    ... ...
}

三、Text组件

注意:base目录是默认目录,在读取本地资源文件String时,会优先匹配限定词目录(国际化),匹配不到再去base目录。

四、TextInput组件

ts 复制代码
// 常见数据类型转换
let text = '200'
let num = parseInt(text) // 字符串 转 数字
let string = num.toFixed(0) // 数字 转 字符串(保留0位小数)

五、Button组件

六、Slider组件

七、页面布局组件

  • 容器(列容器,纵向布局,从上到下排列)

  • 容器(行容器,横向布局,从左到右排列)

  • 布局示例

  • justifyContent:子元素在主轴方向的对齐方式

  • alignItems:子元素在交叉轴方向的对齐方式

  • 案例

ts 复制代码
@Entry
@Component

struct ImagePage {
  @State imageWidth: number = 150

  build() {
    Column() {
      Row() {
        Image('https://gbres.dfcfw.com/Files/picture/20240107/A647B2359640C398075289DFB100768F_w707h782.jpg')
          .width(this.imageWidth)
          .interpolation(ImageInterpolation.High)
      }
      .width('100%')
      .height(300)
      .justifyContent(FlexAlign.Center)
      .alignItems(VerticalAlign.Center)
      .backgroundColor('#f1f1f1')

      Row() {
        Text('图片宽度:')
          .fontSize(20)
        TextInput({ placeholder: '请输入图片宽度', text: this.imageWidth.toFixed(0) })
          .type(InputType.Number)
          .onChange(value => {
            this.imageWidth = parseInt(value)
          })
          .backgroundColor('#f1f1f1')
          .fontSize(20)
          .width(200)
      }
      .width('100%')
      .margin({top: 30})
      .padding({left: 15, right: 15})
      .justifyContent(FlexAlign.SpaceBetween)
      .backgroundColor('#f1f1f1')

      // 分割线
      Divider()

      Row() {
        Button('缩小')
          .width(88)
          .fontSize(20)
          .onClick(value => {
            if (this.imageWidth >= 100) {
              this.imageWidth -= 20
            }
          })
        Button('放大')
          .width(80)
          .fontSize(20)
          .onClick(value => {
            if (this.imageWidth <= 300) {
              this.imageWidth += 20
            }
          })
      }
      .width('100%')
      .margin({top: 30})
      .justifyContent(FlexAlign.SpaceEvenly)
      .backgroundColor('#f1f1f1')

      Row() {
        Slider({
          min: 100,
          max: 300,
          value: this.imageWidth,
          step: 20
        })
          .blockColor('#bbccdd')
          .trackThickness(8)
          .showTips(true)
          .showSteps(true)
          .onChange(value => {
            this.imageWidth = value
          })
      }
      .margin({top: 30})
      .backgroundColor('#f1f1f1')
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}
  • 渲染控制(列表渲染、条件渲染)
  • 提示:其中的 index?keyGenerator?是可选参数,可以不写

八、List复杂容器

九、自定义组件

  • @Component 自定义组件:是将代码封装成组件,通过导出导入方式进行使用。方便代码复用,使代码更加简洁。

ts 复制代码
// 自定义一个标题栏组件
@Component

// 导出组件,方便其它文件导入使用
export struct Header {
  // ResourceStr:是 string | Resource的别名。表示既可以直接传字符串,又可以传本地资源字符串(string.json中的内容)
  private title: ResourceStr = ''
  build() {
    Row({space: 8}) {
      Image($r('app.media.icon'))
        .width(30)
      Text(this.title)
        .fontSize(28)
        .fontWeight(FontWeight.Bold)
      Blank() // 空白组件,相当于弹簧效果,撑满剩余空间,将图标挤到最右边去
      Image($r('app.media.icon'))
        .width(30)
    }
    .width('100%')
  }
}

// 在其它文件使用的时候:
// 1.先导入组件,如:import {Header} from '../components/Header'
// 2.直接使用组件,如:Header({title: '商品列表'})
  • @Builder 自定义构建函数:是将代码封装成函数,通过函数调用进行使用。方便代码复用,使代码更加简洁。

    注意:

    1》定义在组件外部的函数是全局函数,因为函数没有在class/struct中,所以定义的时候需要function关键字,使用的时候直接调用即可。

    函数定义格式:@Builder function ItemCard(item: Item) { ... }

    函数调用格式:ItemCard(item)

    2》定义在组件内部的函数是局部函数,定义的时候不需要function关键字,使用的时候需要通过"this.函数名"进行调用

    函数定义格式:@Builder ItemCard2(item: Item) { ... }

    函数调用格式:this.ItemCard2(item)

  • @Styles 扩展组件公共样式:和上面的自定义构建函数一样,将公共样式/属性方法封装成函数,通过函数调用进行使用。

ts 复制代码
// 扩展组件通用属性(适用于所有组件)
// 调用和使用系统的属性方法一样,如:.fillScreen()
@Styles function fillScreen() {
  // 注意点:这里面写的属性必须是所有组件的通用属性
  .width('100%')
  .height('100%')
  .backgroundColor('#f1f1f1')
  .padding(20)
  // 如:字体大小属性不是所有组件的通用属性,写会报错;为了解决这个问题,可以使用 @Extend 来扩展指定组件的样式
  //.fontSize(18)
}
  • @Extend 扩展特定组件样式
ts 复制代码
// 扩展组件特有属性(仅可定义在全局)
@Extend(Text) function titleStyle(fontSize: number = 20) {
  .fontSize(fontSize)
  .fontColor('#333')
}

👀关注公众号:Android老皮!!!欢迎大家来找我探讨交流👀

相关推荐
dawn6 小时前
鸿蒙ArkTS中的获取网络数据
华为·harmonyos
桃花键神6 小时前
鸿蒙5.0时代:原生鸿蒙应用市场引领开发者服务新篇章
华为·harmonyos
鸿蒙自习室6 小时前
鸿蒙多线程开发——并发模型对比(Actor与内存共享)
华为·harmonyos
JavaPub-rodert7 小时前
鸿蒙生态崛起:开发者的机遇与挑战
华为·harmonyos
帅比九日9 小时前
【HarmonyOS Next】封装一个网络请求模块
前端·harmonyos
yilylong11 小时前
鸿蒙(Harmony)实现滑块验证码
华为·harmonyos·鸿蒙
baby_hua11 小时前
HarmonyOS第一课——DevEco Studio的使用
华为·harmonyos
HarmonyOS_SDK11 小时前
融合虚拟与现实,AR Engine为用户提供沉浸式交互体验
harmonyos
- 羊羊不超越 -12 小时前
App渠道来源追踪方案全面分析(iOS/Android/鸿蒙)
android·ios·harmonyos
长弓三石14 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙