HarmonyOS4.0开发应用——【ArkUI组件使用】

news2025/10/31 19:25:11

ArkUI组件使用

这里会详细演示以下组件使用:

  • Image
  • Text
  • TextInput
  • Button
  • Slider
  • Column&&Row
  • List
  • 自定义组件以及相关函数使用

Image

可以是网络图片、可以是本地图片、也可以是像素图

 Image("https://ts1.cn.mm.bing.net/th?id=OIP-C.cYA-_PINA-ND9OeBaolDTwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2")
          .width(200)
          .interpolation(ImageInterpolation.High)

加载网络图片真机上需要申请网络访问权限: 在module.json5文件中module对象中编写

"requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ],

这样真机才能加载网络图片

Text

用于显示文本，支持直接填写、也支持读取本地资源文件(用于多语言)

TextInput

输入框,通过设置type属性可以是密码输入框、数字输入框、文本输入框等

  • Normal：基本输入
  • Password：密码输入
  • Email: 邮箱输入
  • Number:数字输入 -PhoneNumber: 电话号码输入

通过onChange事件可以实现自己想要的交互

Button

按钮,通过设置type属性可以是不同的按钮类型

  • Capsule:胶囊性
  • Circle: 圆形
  • Normal:普通按钮

Slider

滑块组件使用

通过上方属性可以进行配置使用，在onChange方法内可以实现自己的交互

Column&&Row布局

通过这个可以实现位置布局

  • justifyContent:设置子元素在主轴方向的对齐格式
  • alignItem:设置子元素在交叉轴方向的对齐格式

Column

Row

布局案例(控制图片大小)

Divider分割线

@Entry
@Component
struct Index {
  @State imageWidth: number = 30

  build() {
    Column() {
      Row(){

        Image("https://i2.hdslb.com/bfs/archive/6c8d928748fcfa5b3366d141f7f3b08008fdd416.jpg@672w_378h_1c_!web-home-common-cover.webp")
          .width(this.imageWidth)
          .interpolation(ImageInterpolation.High)
      }
      .width('100%')
      .height(400)
      .justifyContent(FlexAlign.Center)
      Row(){
        Text($r('app.string.width_label'))
          .fontSize(30)
          .fontWeight('bold')
        TextInput({placeholder:"请输入图片宽度",text:this.imageWidth.toString()})
          .width(200)
          .backgroundColor("red")
          .type(InputType.Number)
          .onChange(value=>{
            this.imageWidth=parseInt(value)
          })
      }
      .width("100%")
      .padding({left:14,right:14})
      .justifyContent(FlexAlign.SpaceBetween)
      Divider()
        .width("91%")
        .margin(20)
      Row(){
        Button('缩小')
          .width(80)
          .fontSize(20)
          .onClick(()=>{
            this.imageWidth-=5;
          })
        Button('放大')
          .width(80)
          .fontSize(20)
          .onClick(()=>{
            this.imageWidth+=5;
          })
      }
      .justifyContent(FlexAlign.SpaceEvenly)
      .width('100%')
      Divider()
        .width("91%")
        .margin(20)
      Slider({min:100,max:300,value:this.imageWidth,step:10})
        .width("100%")
        .blockColor("red")
        .trackThickness(8)
        .showTips(true)
        .onChange(val=>{
          this.imageWidth=val
        })
    }
    .width('100%')
    .height('100%')
  }
}

List

列表组件，超出可滚动组件

  • 使用之前了解一下渲染控制
  • forEach
  • if-else

通过以上可遍历多个item展示，不通过list无法超出滚动 以下通过List修饰实现一个订单列表(通过if-else决定条件渲染)：

  private items:Array<ItemList>=[
    new ItemList('华为Mate60','https://ts1.cn.mm.bing.net/th?id=OIP-C.cYA-_PINA-ND9OeBaolDTwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',99),
    new ItemList('华为Mate61','https://ts1.cn.mm.bing.net/th?id=OIP-C.cYA-_PINA-ND9OeBaolDTwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',199,20),
    new ItemList('华为Mate62','https://ts1.cn.mm.bing.net/th?id=OIP-C.cYA-_PINA-ND9OeBaolDTwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',39),
    new ItemList('华为Mate62','https://ts1.cn.mm.bing.net/th?id=OIP-C.cYA-_PINA-ND9OeBaolDTwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',39),
    new ItemList('华为Mate62','https://ts1.cn.mm.bing.net/th?id=OIP-C.cYA-_PINA-ND9OeBaolDTwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',39),
    new ItemList('华为Mate62','https://ts1.cn.mm.bing.net/th?id=OIP-C.cYA-_PINA-ND9OeBaolDTwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',39)
  ]
  build() {
    Column() {
      //头部
      Row(){
        Text("商品列表")
          .fontSize(30)
          .fontWeight("bold")
      }
      .width('100%')
      .height(30)
      .margin({bottom:20})
      List({space:8}){
        ForEach(
          this.items,
          (item: ItemList)=>{
            ListItem() {
              Row({space:10}){
                Image(item.image)
                  .width(100)
                Column({space:4}){
                  if(item.discount){
                    Text(item.name)
                      .fontSize(20)
                      .fontWeight('bold')
                    Text(`原价：￥${item.price}`)
                      .fontSize(14)
                      .fontColor('#CCC')
                      .decoration({type:TextDecorationType.LineThrough})
                    Text(`折扣价：￥${item.price-item.discount}`)
                      .fontSize(18)
                      .fontWeight('bold')
                      .fontColor('red')
                    Text(`补贴：￥${item.discount}`)
                      .fontSize(18)
                      .fontColor('red')
                  }else{
                    Text(item.name)
                      .fontSize(20)
                      .fontWeight('bold')
                    Text(`￥${item.price}`)
                      .fontSize(18)
                      .fontColor('red')
                  }

                }
                .height('100%')
                .alignItems(HorizontalAlign.Start)
              }
              .width("100%")
              .backgroundColor('#FFF')
              .borderRadius(20)
              .height(120)
              .padding(10)
              .borderRadius(10 )
              .margin(20)
            }
          }
        )
      }
      .width("100%")
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#EFEFEF')
    .padding(20)
  }
}

自定义组件以及相关函数使用

将上方示例进行拆解实现组件封装~

1.将顶部栏进行封装,新建文件进行编写，或者在内部编写封装，这里我封装成公用的


@Component
export struct Header{
  private title:ResourceStr
  build(){
    Row(){
      Text('返回')
        .fontSize(25)
      Text(this.title)
        .fontSize(30)
        .fontWeight("bold")

      Blank()
      Text('刷新')
        .fontSize(25)
        .fontWeight('bold')
    }
    .width('100%')
    .height(30)
  }
}

使用:

import {Header} from "../components/Headers"

引入直接使用即可 再将列表封装，这里就直接封装成自定义构建函数

//全局自定义构建函数
@Builder function ItemCard(item:ItemList){
  Row({space:10}){
    Image(item.image)
      .width(100)
    Column({space:4}){
      if(item.discount){
        Text(item.name)
          .fontSize(20)
          .fontWeight('bold')
        Text(`原价：￥${item.price}`)
          .fontSize(14)
          .fontColor('#CCC')
          .decoration({type:TextDecorationType.LineThrough})
        Text(`折扣价：￥${item.price-item.discount}`)
          .fontSize(18)
          .fontWeight('bold')
          .fontColor('red')
        Text(`补贴：￥${item.discount}`)
          .fontSize(18)
          .fontColor('red')
      }else{
        Text(item.name)
          .fontSize(20)
          .fontWeight('bold')
        Text(`￥${item.price}`)
          .fontSize(18)
          .fontColor('red')
      }

    }
    .height('100%')
    .alignItems(HorizontalAlign.Start)
  }
  .width("100%")
  .backgroundColor('#FFF')
  .borderRadius(20)
  .height(120)
  .padding(10)
  .borderRadius(10 )
  .margin(20)
}

再封装个全局的公共样式函数

//全局公共样式函数
@Styles function fillScreen(){
  .width('100%')
  .height('100%')
  .backgroundColor('#EFEFEF')
  .padding(20)
}

最后整合代码

class ItemList{
  name:string
  image: ResourceStr
  price: number
  discount: number

  constructor(name:string,image: ResourceStr,price:number,discount:number=0) {
    this.name=name
    this.image=image
    this.price=price
    this.discount=discount
  }
}
import {Header} from "../components/Headers"

//全局自定义构建函数
@Builder function ItemCard(item:ItemList){
  Row({space:10}){
    Image(item.image)
      .width(100)
    Column({space:4}){
      if(item.discount){
        Text(item.name)
          .fontSize(20)
          .fontWeight('bold')
        Text(`原价：￥${item.price}`)
          .fontSize(14)
          .fontColor('#CCC')
          .decoration({type:TextDecorationType.LineThrough})
        Text(`折扣价：￥${item.price-item.discount}`)
          .fontSize(18)
          .fontWeight('bold')
          .fontColor('red')
        Text(`补贴：￥${item.discount}`)
          .fontSize(18)
          .fontColor('red')
      }else{
        Text(item.name)
          .fontSize(20)
          .fontWeight('bold')
        Text(`￥${item.price}`)
          .fontSize(18)
          .fontColor('red')
      }

    }
    .height('100%')
    .alignItems(HorizontalAlign.Start)
  }
  .width("100%")
  .backgroundColor('#FFF')
  .borderRadius(20)
  .height(120)
  .padding(10)
  .borderRadius(10 )
  .margin(20)
}
//全局公共样式函数
@Styles function fillScreen(){
  .width('100%')
  .height('100%')
  .backgroundColor('#EFEFEF')
  .padding(20)
}
@Entry
@Component
struct ItemPage {
  private items:Array<ItemList>=[
    new ItemList('华为Mate60','https://ts1.cn.mm.bing.net/th?id=OIP-C.cYA-_PINA-ND9OeBaolDTwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',99),
    new ItemList('华为Mate61','https://ts1.cn.mm.bing.net/th?id=OIP-C.cYA-_PINA-ND9OeBaolDTwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',199,20),
    new ItemList('华为Mate62','https://ts1.cn.mm.bing.net/th?id=OIP-C.cYA-_PINA-ND9OeBaolDTwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',39),
    new ItemList('华为Mate62','https://ts1.cn.mm.bing.net/th?id=OIP-C.cYA-_PINA-ND9OeBaolDTwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',39),
    new ItemList('华为Mate62','https://ts1.cn.mm.bing.net/th?id=OIP-C.cYA-_PINA-ND9OeBaolDTwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',39),
    new ItemList('华为Mate62','https://ts1.cn.mm.bing.net/th?id=OIP-C.cYA-_PINA-ND9OeBaolDTwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',39)
  ]
  build() {
    Column() {
      //头部
      Header({title:"商品列表"})
      .margin({bottom:20})
      List({space:8}){
        ForEach(
          this.items,
          (item: ItemList)=>{
            ListItem() {
              ItemCard(item)
            }
          }
        )
      }
      .width("100%")
      .layoutWeight(1)
    }
    .fillScreen()
  }
}

这样即可实现组件式开发，学过前端的基本都有这样的概念

总结自定义组件使用

通过以上内容即可学会ArkUI组件的基本使用了。

为了能让大家更好的学习鸿蒙 (Harmony OS) 开发技术，这边特意整理了《鸿蒙 (Harmony OS)开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙 (Harmony OS)开发学习手册》

入门必看：https://qr21.cn/FV7h05

  1. 应用开发导读(ArkTS)
  2. 应用开发导读(Java)

HarmonyOS 概念：https://qr21.cn/FV7h05

  1. 系统定义
  2. 技术架构
  3. 技术特性
  4. 系统安全

如何快速入门：https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. 构建第一个JS应用
  4. ……

开发基础知识：https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发：https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1286869.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

初识Linux——基本指令（详解）1

初识Linux——基本指令（详解）1

呀哈喽&#xff0c;我是结衣。 在学习数据结构的同时&#xff0c;也不要忘了Linux的学习啊。今天我们开始Linux的教学&#xff0c;在学习之前我们肯定要会搭建Linux的学习环境&#xff0c;在我们的以前的博客里是有讲解的&#xff0c;所以所以这里我们就不在多说&#xff0c;我…
阅读更多...
怎样实现燃气产业的数字化转型之路？

怎样实现燃气产业的数字化转型之路？

关键词&#xff1a;智慧燃气、燃气数字化、智慧燃气建设、智慧燃气解决方案、智慧燃气平台 燃气产业不仅是我国能源的支柱产业&#xff0c;更是推进经济建设与生态保护协同发展的主战场。数字技术与企业生产、经营及管理深度融合是驱动企业转型升级的重要路径。基于产业融合视…
阅读更多...
在Word中移动页面主要靠导航窗格，有了它，移动页面就事半功倍

在Word中移动页面主要靠导航窗格，有了它，移动页面就事半功倍

本文包括有关在Microsoft Word 2019、2016和Office 365中使用导航窗格移动页面以及复制和粘贴页面的说明。 如何设置导航窗格以重新排列页面 Microsoft Word并不将文档视为单独页面的集合，而是将其视为一个长页面。正因为如此，重新排列Word文档可能会很复杂。在Word中移动页…
阅读更多...
springcloud整合Oauth2自定义登录/登出接口

springcloud整合Oauth2自定义登录/登出接口

我使用的是password模式&#xff0c;并配置了token模式 一、登录 (这里我使用的示例是用户名密码认证方式) 1. Oath2提供默认登录授权接口 org.springframework.security.oauth2.provider.endpoint.postAccess; Tokenpublic ResponseEntity<OAuth2AccessToken> pos…
阅读更多...
Linux 环境下的性能测试——top与stress

Linux 环境下的性能测试——top与stress

对于Linux 环境&#xff0c;top命令是使用频繁且信息较全的命令&#xff0c; 它对于所有正在运行的进行和系统负荷提供实时更新的概览信息。stress是个简单且全面的性能测试工具。通过它可以模拟各种高负载情况。 通过top与stress这两个命令的结合使用&#xff0c;基本可以达到…
阅读更多...
我的隐私计算学习——国密SM2和国密SM4算法

我的隐私计算学习——国密SM2和国密SM4算法

此篇是我笔记目录里的安全保护技术&#xff08;七&#xff09;&#xff0c;前篇可见&#xff1a; 隐私计算安全保护技术&#xff08;一&#xff09;&#xff1a;我的隐私计算学习——混淆电路-CSDN博客 隐私计算安全保护技术&#xff08;二&#xff09;&#xff1a;我的隐私计…
阅读更多...
C++学习之路（十九）C++ 用Qt5实现一个工具箱（用SQLite数据库来管理粘贴板数据）- 示例代码拆分讲解

C++学习之路（十九）C++ 用Qt5实现一个工具箱（用SQLite数据库来管理粘贴板数据）- 示例代码拆分讲解

上篇文章&#xff0c;我们用 Qt5 实现了在小工具箱中添加了《点击按钮以新窗口打开功能面板》功能。今天我们把粘贴板功能用SQLite数据库来管理&#xff0c;用SQLite来实现增删改查。下面我们就来看看如何来规划开发这样的小功能并且添加到我们的工具箱中吧。 老规矩&#xff…
阅读更多...
30个Python小游戏，小白练手，我都能玩一天【内附源码】

30个Python小游戏，小白练手，我都能玩一天【内附源码】

给大家带来30个 Python 小游戏&#xff0c;一定要收藏&#xff01; 文末获取完整代码 有手就行 1、吃金币 import os import cfg import sys import pygame import random from modules import *游戏初始化 def initGame():# 初始化pygame, 设置展示窗口pygame.init()screen…
阅读更多...
全面解析修复msvcr120.dll缺失问题的方法，msvcr120.dll丢失的原因

全面解析修复msvcr120.dll缺失问题的方法，msvcr120.dll丢失的原因

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中最常见的就是“msvcr120.dll丢失”。这个错误通常会导致某些程序无法正常运行&#xff0c;给用户带来很大的困扰。那么&#xff0c;当我们遇到这个问题时&#xff0c;应该如何修复呢&#xff1f;本文…
阅读更多...
忽略python运行出现的大量警告

忽略python运行出现的大量警告

添加以下代码即可 import warnings warnings.filterwarnings(ignore)
阅读更多...
使用rust slint开发桌面应用

使用rust slint开发桌面应用

安装QT5&#xff0c;过程省略 安装rust&#xff0c;过程省略 创建工程 cargo new slint_demo 在cargo.toml添加依赖 [dependencies] slint "1.1.1" [build-dependencies] slint-build "1.1.1" 创建build.rs fn main() {slint_build::compile(&quo…
阅读更多...
DFT(离散傅里叶变换)的通俗理解

DFT(离散傅里叶变换)的通俗理解

本文包含了博主对离散傅里叶变换&#xff0c;负频率&#xff0c;实信号与复信号频谱的理解&#xff0c;如有不妥&#xff0c;欢迎各位批评指正与讨论。 文章目录 DFT的理解信号的频谱实信号的频谱复信号的频谱 DFT的理解 傅里叶变换是一种将信号从时域转换到频域的数学工具。…
阅读更多...
使用消息队列遇到的问题—kafka

使用消息队列遇到的问题—kafka

目录 1 分区2 消费者3 Kafka 如何保证消息的消费顺序&#xff1f;3.1 方案一3.2 方案二 在项目中使用kafka作为消息队列&#xff0c;核心工作是创建生产者—包装数据&#xff1b;创建消费者----包装数据。 欠缺一些思考&#xff0c;特此梳理项目中使用kafka遇到的一些问题和解决…
阅读更多...
探索Selenium的规避检测策略

探索Selenium的规避检测策略

Selenium之规避检测 背景 ​ 目前很多大网站有对selenium采取了监测机制。在正常情况下我们用浏览器访问相关网站的window.navigator.webdriver的值为 undefined或者为false。而使用selenium访问则该值为true。我们如何伪装&#xff0c;防止被检测出来呢&#xff1f; ​ 这是…
阅读更多...
【Maven】依赖管理

【Maven】依赖管理

1. 依赖管理 1.1 依赖配置 依赖&#xff1a;指当前项目运行所需要的jar包。一个项目中可以引入多个依赖。 依赖引入步骤&#xff1a;在pom.xml中编写标签&#xff0c;在标签中使用引入坐标&#xff0c;定义坐标的 groupId、artifactId、version&#xff0c;最后点击刷新&…
阅读更多...
FluxMQ—2.0.8版本更新内容

FluxMQ—2.0.8版本更新内容

FluxMQ—2.0.8版本更新内容 前言 FLuxMQ是一款基于java开发&#xff0c;支持无限设备连接的云原生分布式物联网接入平台。FluxMQ基于Netty开发&#xff0c;底层采用Reactor3反应堆模型&#xff0c;具备低延迟&#xff0c;高吞吐量&#xff0c;千万、亿级别设备连接&#xff1…
阅读更多...
WIN10下解决HIVE 初始化MYSQL表报错：Unknown version specified for initialization

WIN10下解决HIVE 初始化MYSQL表报错：Unknown version specified for initialization

今天本地WINDOWS装HIVE&#xff0c;走到最后一步初始化数据库死活不通过&#xff1a; D:\hive\hive-rel-release-3.1.3\bin\ext>hive --service schematool -dbType mysql -initSchema --verbose SLF4J: Class path contains multiple SLF4J bindings. SLF4J: Found bind…
阅读更多...
基于JSDoc实现TypeScript类型安全的实践报告

基于JSDoc实现TypeScript类型安全的实践报告

在FEDay 2023中我讲了《从JS到TS无缝迁移的实践报告》【视频在这里在这里】&#xff0c;是将一个传统的JS项目&#xff08;mochajs/mocha&#xff09;迁移到TypeScript环境的全程。其中提到了一件事情&#xff0c;就是“可以通过JSDoc/TSDoc来生成.d.ts”&#xff0c;从而实现T…
阅读更多...
【C语言：自定义类型（结构体、位段、共用体、枚举）】

【C语言：自定义类型（结构体、位段、共用体、枚举）】

文章目录 1.结构体1.1什么是结构体1.2结构体类型声明1.3结构体变量的定义和初始化1.4结构体的访问 2.结构体对齐2.1如何对齐2.2为什么存在内存对齐&#xff1f; 3.结构体实现位段3.1什么是位段3.2位段的内存分配3.3位段的跨平台问题3.4位段的应用3.5位段使用注意事项 4.联合体4…
阅读更多...
全国规模最大！玻色量子加入算力并网行动！

全国规模最大！玻色量子加入算力并网行动！

8月19日&#xff0c;在2023中国算力大会主论坛上&#xff0c;中国移动携手多个超算中心、智算中心&#xff0c;以及云服务商&#xff0c;共同发起全国规模最大的“百川”算力并网行动&#xff0c;打造算力类型最全、规模最大、覆盖最广的“百川”算力并网平台&#xff0c;加快推…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023