鸿蒙应用开发-ArkUI组件

最新推荐文章于 2024-09-23 00:15:00 发布
最新推荐文章于 2024-09-23 00:15:00 发布
阅读量1.5k 收藏 22
点赞数 19
文章标签： harmonyos 华为 鸿蒙 鸿蒙系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/datian1234/article/details/135656838
版权

一、构建第一个页面

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

三、Text组件

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

四、TextInput组件

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

五、Button组件

六、Slider组件

七、页面布局组件

  • 容器（列容器，纵向布局，从上到下排列）

  • 容器（行容器，横向布局，从左到右排列）

  • 布局示例

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

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

  • 案例

@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 自定义组件：是将代码封装成组件，通过导出导入方式进行使用。方便代码复用，使代码更加简洁。

// 自定义一个标题栏组件
@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 扩展组件公共样式：和上面的自定义构建函数一样，将公共样式/属性方法封装成函数，通过函数调用进行使用。

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

最后

小编特别准备了一份联合鸿蒙官方发布笔记整理收纳的《鸿蒙开发学习笔记》以及学习路线图，内容包含ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

【有需要的朋友，可以扫描下方二维码免费领取！！！】

在这里插入图片描述

快速入门

  • 开发准备
  • 构建第一个ArkTS应用（Stage模型）
  • 构建第一个ArkTS应用（FA模型）
  • 构建第一个JS应用（FA模型）
    在这里插入图片描述

开发基础知识

  • 应用程序包基础知识
  • 应用配置文件（Stage模型）
  • 应用配置文件概述（FA模型）
    在这里插入图片描述

资源分类与访问

  • 资源分类与访问
  • 创建资源目录和资源文件
  • 资源访问
    在这里插入图片描述

学习ArkTs语言

  • 初识ArkTS语言
  • 基本语法
  • 状态管理
  • 其他状态管理
  • 渲染控制
    在这里插入图片描述

基于ArkTS声明式开发范式

  • UI开发（ArkTS声明式开发范式）概述
  • 开发布局
  • 添加组件
  • 显示图片
  • 使用动画
  • 支持交互事件
  • 性能提升的推荐方法

在这里插入图片描述

兼容JS的类Web开发范式

  • 概述
  • 框架说明
  • 构建用户界面
  • 常见组件开发指导
  • 动效开发指导
  • 自定义组件
    在这里插入图片描述

Web组件

  • 概述
  • 设置基本属性和事件
  • 并发
  • 窗口管理
  • WebGL
  • 媒体
  • 安全
  • 网络与连接
  • 电话服务
  • 数据管理
  • …
    在这里插入图片描述

应用模型

  • 概述
  • Stage模型开发指导
  • FA模型开发指导
    在这里插入图片描述
【有需要的朋友，可以扫描下方二维码免费领取！！！】
datian1234
关注
鸿蒙应用开发（基础篇）之列表组件
xiangzhihong8的专栏
09-12 3194
List是很常用的滚动类容器组件，一般和子组件ListItem一起使用，List列表中的每一个列表项对应一个ListItem组件。Grid组件为网格容器，是一种网格列表，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。Grid组件一般和子组件GridItem一起使用，Grid列表中的每一个条目对应一个GridItem组件。
鸿蒙HarmonyOS实战-ArkUI组件（页面路由）_arkui 怎么实现页面跳转(3)
2401_84181070的博客
04-21 1156
/ 弹出自定义的询问框message: ‘您还没有完成支付，确定要返回吗？’,buttons: [text: ‘取消’,},text: ‘确认’,// 用户点击了“取消”按钮// 用户点击了“确认”按钮// 调用router.back()方法，返回上一个页面})@Entry@Componentbuild() {Column() {Row(){Row(){})
鸿蒙(HarmonyOS)--声明式UI、自定义组件
最新发布
hqy1989的博客
09-23 3805
说明自定义变量不能与基础通用属性/事件名重复。装饰器： 用于装饰类、结构、方法以及变量，并赋予其特殊的含义。如上述示例中@Entry、@Component和@State都是装饰器@Component表示自定义组件@Entry表示该自定义组件为入口组件@State表示组件中的状态变量状态变量变化会触发UI刷新。UI描述：以声明式的方式来描述UI的结构，例如build()方法中的代码块。自定义组件：可复用的UI单元，可组合其他组件，如上述被@Component装饰的struct Hello。
关于鸿蒙组件
m0_61305804的博客
08-14 357
由于px在不同手机上的大小不同，差别较大，适配性太差，不建议使用。由于手机分辨率不同，应用中用到的图片某个固定尺寸大小的图片，或某个固定字号的文本就会因手机分辨力不同而出现失真或变形的情况，为了更好的适配不同的手机，故而就有了不依赖与像素的单位sp与dp。padding-（top，right，left，bottom），不写的话就是上下左右都是，ef：设置好左右，上下的一边即可确定。margin-（top，right，left，bottom），不写的话就是上下左右都是。不同组件边框之间的距离（上下左右）...
鸿蒙-组件
m0_66469301的博客
08-19 303
组件
【鸿蒙基础系列】鸿蒙基础组件
zhaochen1127的博客
08-16 5210
组件（Component）是鸿蒙系统ArkUI声明式开发范式中界面搭建与显示的最小单位。鸿蒙系统为开发者提供了丰富多样的UI组件，这些组件可以根据功能分为五大类：基础组件、容器组件、媒体组件、绘制组件和画布组件。基础组件是视图层的基本组成单元，包括Text、Image、TextInput、Button等，它们是构建用户界面的基础。Image组件是鸿蒙UI框架中不可或缺的一部分，它提供了加载和展示图片的基本功能，并通过丰富的样式设置选项和高级应用技巧，使开发者能够轻松实现各种复杂的图片展示效果。
鸿蒙HarmonyOS实战-ArkUI组件（Tabs）_harmonyos tabs，鸿蒙开发面试基础
2301_82241698的博客
04-16 1045
自定义导航栏是指在应用开发中，开发者使用自己定制的视图代替系统自带的导航栏，以实现更加自由、灵活和符合应用风格的导航栏。自定义导航栏可以包括各种 UI 元素，例如按钮、文本、图片、标签等，以满足不同应用的需求。自定义导航栏可以帮助应用创建独特的风格和品牌形象，提高用户体验和应用的可用性。Column() {Column(){Text(‘我的内容’)
鸿蒙HarmonyOS实战-ArkUI组件（Row Column）_arkui 设置控件高度自适应(1)
2401_84182073的博客
04-16 1207
HarmonyOS的布局组件是一组用于构建用户界面布局的组件，包括线性布局、相对布局、网格布局等。这些组件帮助开发者以简单和灵活的方式管理和组织应用程序中的视图，并支持多种不同的设备屏幕尺寸和方向。使用HarmonyOS的布局组件可以提高应用程序的可读性和可维护性，并帮助快速构建适应不同设备的用户界面。
鸿蒙HarmonyOS实战-ArkUI组件（Canvas）_鸿蒙 canvas，文末领取面试资料
2401_84181986的博客
04-14 1093
Entry@Component//用来配置CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。true表明开启抗锯齿//用来创建OffscreenCanvasRenderingContext2D对象，width为离屏画布的宽度，height为离屏画布的高度。通过在canvas中调用OffscreenCanvasRenderingContext2D对象来绘制。build() {
鸿蒙ArkUI开发-Video组件的使用
m0_62167422的博客
01-23 1639
在手机、平板或是智慧屏这些终端设备上，媒体功能可以算作是我们最常用的场景之一。无论是实现音频的播放、录制、采集，还是视频的播放、切换、循环，亦或是相机的预览、拍照等功能，媒体组件都是必不可少的。以视频功能为例，在应用开发过程中，我们需要通过ArkUI提供的Video组件为应用增加基础的视频播放功能。借助Video组件，我们可以实现视频的播放功能并控制其播放状态。常见的视频播放场景包括观看网络上的较为流行的短视频，也包括查看我们存储在本地的视频内容。
【HarmonyOS NEXT】组件状态：@State/@Prop/@Link/@Provide/@Observed
weixin_71403100的博客
02-19 2804
在声明式UI编程框架中，UI是程序状态的运行结果，用户构建了一个UI模型，其中应用的运行时的状态是参数。当参数改变时，UI作为返回结果，也将进行对应的改变。这些运行时的状态变化所带来的UI的重新渲染，在ArkUI中统称为状态管理机制。说明：@State装饰器标记的变量必须初始化，不能为空值@State支持Object、class、string、number、boolean、enum类型以及这些类型的数组嵌套类型以及数组中的对象属性无法触发视图更新。
HarmonyOS鸿蒙开发常用组件详细说明（图片、文本、按钮、弹窗、进度条、文本框）
qq_36255346的博客
03-20 5117
HarmonyOS鸿蒙开发常用组件详细说明（图片、文本、按钮、弹窗、进度条、文本框）
鸿蒙开发-UI
中年程序员
01-03 1695
前面系列文章学习了鸿蒙应用的运行机制，偏原理，枯燥乏味。本篇文章开始，侧重鸿蒙应用的开发，偏代码开发。本文主要学习记录了鸿蒙应用UI开发相关的知识，了解了ArkUI开发框架提供能力，简单学习了ArlTS开发语言已经开发规范。后续文章会继续鸿蒙UI开发的学习。2024年，新年新气象，亲朋好友欢聚一堂、开开心心的，让我短暂的忘却了A股带给我的痛苦。但是2024年开年来的A股却没有新气象，一如既往的稳定，稳定的下跌。我的亏损额度持续扩大，给我带来的痛苦让我都有点绝望，什么时候才能改变这种的状态呢？
鸿蒙基础知识-组件概述
程序猿中的小白
02-20 1945
1.概述 应用的Ability在屏幕上将显示一个用户界面，该界面用来显示所有可被用户查看和交互的内容。应用中所有的用户界面元素都是由Component和ComponentContainer对象构成。Component是绘制在屏幕上的一个对象，用户能与之交互。ComponentContainer是一个用于容纳其他Component和ComponentContainer对象的容器。 Java UI框架提供了一部分Component和ComponentContainer的具体子类，即创建用户界面（UI）的各类
鸿蒙应用开发之UI框架方舟ArkUI使用参考
sinat_30844883的博客
08-07 1254
HarmonyOS提供了⼀套UI开发框架，即⽅⾈开发框架（ArkUI框架）。⽅⾈开发框架可为开发者提供应⽤UI开发所必需的能⼒，⽐如多种组件、布局计算、动画能⼒、UI交互、绘制等。
harmonyOS杂谈 - 自定义组件生命周期
weixin_42861217的博客
12-21 1350
自定义组件的创建：自定义组件的实例由ArkUI框架创建。初始化自定义组件的成员变量：通过本地默认值或者构造方法传递参数来初始化自定义组件的成员变量，初始化顺序为成员变量的定义顺序。如果开发者定义了aboutToAppear，则执行aboutToAppear方法。在首次渲染的时候，执行build方法渲染系统组件，如果子组件为自定义组件，则创建自定义组件的实例。状态变量 -> UI组件（包括ForEach和if）。
鸿蒙开发学习——基本组件
Blackoutdragon的博客
01-04 1171
* 最近在学习鸿蒙系统开发，然后对着文档看还是有很多问题，这里结合官方给的demo进行学习，结合代码逐个介绍相关组件。
鸿蒙ArkUI：跨平台应用开发框架解析
ArkUI学习指南 ArkUI的学习路径和关键点声明式编程与响应式UI 声明式编程是ArkUI的一大特色，它让...对于开发者而言，掌握ArkUI技能不仅能助力他们在HarmonyOS平台上开发出色的应用，也是把握未来技术趋势的关键。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值