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

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. ……

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Linux 环境变量

Linux 环境变量

文章目录 环境变量概念查看环境变量设置环境变量代码获取环境变量补充说明 环境变量概念 定义 &#xff1a;环境变量(environment variables)一般是指在操作系统中用来指定操作系统运行环境的一些参数。 个人理解&#xff1a;Linux下一切皆文件&#xff0c;在Linux中所用的指…
阅读更多...
正则表达式（4）：连续次数的匹配

正则表达式（4）：连续次数的匹配

正则表达式&#xff08;4&#xff09;&#xff1a;连续次数的匹配 小结 本博文转载自 在本博客中&#xff0c;”正则表达式”为一系列文章&#xff0c;如果你想要从头学习怎样在Linux中使用正则&#xff0c;可以参考此系列文章&#xff0c;直达链接如下&#xff1a; 在Linux中…
阅读更多...
uniapp使用vue-i18n国际化多国语言

uniapp使用vue-i18n国际化多国语言

前言&#xff1a;uniapp是自带有i18n这个插件的&#xff0c;如果没有npm安装即可 此插件需要自己去给每一个需要国际化的字符去手动配置key&#xff0c;所以如果是已经完成的项目可能工作量就稍微有点大了 第一步&#xff1a; 语言命名是有规范的不能乱取名&#xff0c;具体可…
阅读更多...
TCP首部格式_基本知识

TCP首部格式_基本知识

TCP首部格式 表格索引: 源端口目的端口 序号 确认号 数据偏移保留 ACK等 窗口检验和紧急指针 TCP报文段首部格式图 源端口与目的端口: 各占16位 序号:占32比特&#xff0c;取值范围0~232-1。当序号增加到最后一个时&#xff0c;下一个序号又回到0。用来指出本TCP报文段数据载…
阅读更多...
Linux下如何运行.sh文件

Linux下如何运行.sh文件

运行环境为ubuntu20.04 如在/home/zoe/map运行.sh文件&#xff1a; 进入到/home/zoe文件夹下&#xff1a; cd /home/zoe/map 第一种运行方式&#xff1a; sh play.sh 结果&#xff1a; 第二种方式&#xff1a; 使用chmod修改文件的执行权限&#xff0c;然后运行 chmod x …
阅读更多...
图书馆智能密集书架怎么用的

图书馆智能密集书架怎么用的

图书馆智能密集书架是一种高密度存储书籍的设备&#xff0c;通过机器控制和操作&#xff0c;实现了对书籍的高效存储和检索。使用专久智能智能密集书架的方法如下&#xff1a; 1.先进行授权认证&#xff0c;确认身份和权限&#xff0c;进行操作前要确保权限正确&#xff0c;以免…
阅读更多...
HTTP请求

HTTP请求

前言 HTTP是应用层的一个协议。实际我们访问一个网页&#xff0c;都会像该网页的服务器发送HTTP请求&#xff0c;服务器解析HTTP请求&#xff0c;返回HTTP响应。如此就是我们获取资源或者上传资源的原理 HTTP请求报头格式 图片来自网络 HTTP请求报头总体有四部分&#xff1a;…
阅读更多...
Gmsh ＜二＞：Mesh generation

Gmsh ＜二＞：Mesh generation

上一节主要涉及Gmsh的使用入门和几何模型构建简介中&#xff0c;我们讲了Gmsh构建几何的一些基本知识&#xff0c;下面主要侧重于Gmsh在网格生成方面的操作。 网格生成的不同算法 在Gmsh中&#xff0c;当几何模型构建完成后&#xff0c;我们可以使用函数gmsh.model.mesh.gene…
阅读更多...
unity 2d入门飞翔小鸟按钮点击功能且场景切换（二）

unity 2d入门飞翔小鸟按钮点击功能且场景切换（二）

1、素材包获取 链接: https://pan.baidu.com/s/1KgCtQ_7wt2mlbGbIaMVvmw 提取码: xxh8 2、将素材全部拉进去 3、创建新的场景 并且将场景添加到build settings里面 4、脚本 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityE…
阅读更多...
Python的海龟 turtle 库使用详细介绍（画任意多边形，全网最详细）

Python的海龟 turtle 库使用详细介绍（画任意多边形，全网最详细）

学Turtle库&#xff0c;其实就是学数学&#xff0c;而且还能提高对数学和学习的兴趣。Turtle库还能够帮助孩子更好地理解几何学和数学概念&#xff0c;比如角度、比例、几何图形的性质等等&#xff0c;是Python中一个很有趣的库。 前言 Turtle库是Python中一个很有趣的库&…
阅读更多...
装修流程篇

装修流程篇

装修流程 https://www.xiaohongshu.com/explore/627ba70d00000000210357b3 https://www.xiaohongshu.com/explore/63b6bc0c000000002203776f 半包装修流程 https://www.xiaohongshu.com/explore/64e5ea3b0000000003021711 户型图 效果 https://www.xiaohongshu.com/ex…
阅读更多...
5G承载网和大客户承载的演进

5G承载网和大客户承载的演进

文章目录 移动4/5G承载网联通和电信4/5G承载网M-OTN&#xff08;Metro-optimized OTN&#xff09;&#xff0c;城域型光传送网PeOTN&#xff08;packet enhanced optical transport network&#xff09;&#xff0c;分组增强型OTN板卡增强型PeOTN集中交叉型PeOTN VC-OTN&#x…
阅读更多...
CoreDNS实战(六)-编译安装unbound插件

CoreDNS实战(六)-编译安装unbound插件

本文主要介绍coredns的unbound插件进行编译安装的过程及常用的配置方法。 coredns官方的unbound文档&#xff1a;unbound unbound插件的github地址&#xff1a;https://github.com/coredns/unbound 注&#xff1a;unbound插件虽然是coredns中的External Plugins&#xff0c;但…
阅读更多...
如何使用llm 制作多模态

如何使用llm 制作多模态

首先将任何非字符的序列信息使用特殊n个token 编码。 具体编码方法以图像为例子说明&#xff1a; 将固定尺寸图像如256256 的图像分割为1616 的子图像块。 将已知的所有图像数据都分割后进行str将其看做是一个长的字符&#xff0c;而后去重后方式一个词表。 使用特殊1024 个tok…
阅读更多...
GNN Maximum Flow Problem (From Shusen Wang)

GNN Maximum Flow Problem (From Shusen Wang)

Maximum Flow Problem ShusenWang 图数据结构和算法课程笔记 Slides Maximum Flow Problem Description Naive Algorithm Residual Capacity - FlowLeft: Original GraphRight: Residual Graph - Bottleneck capacity 2- Iteration 2:- Find an augmenting path: s -&g…
阅读更多...
IntelRealSense深度相机D455在ROS1运行中的消息内容

IntelRealSense深度相机D455在ROS1运行中的消息内容

IntelRealSense深度相机D455在ROS1运行中的消息内容 通过下面命令所有相关信息通过ros topic的方式发布出去rosnode查看rqt_graph查看rostopic查看通过下面命令直接查看RVIZ中点云信息rosnode查看rqt_graph查看rostopic查看 Physical Port:&#xff1a; /sys/devices/pci0000:0…
阅读更多...
线性回归既是一种数据挖掘与建模算法，也是统计学领域、计量经济学领域的常用学术建模方法，有何不同？

线性回归既是一种数据挖掘与建模算法，也是统计学领域、计量经济学领域的常用学术建模方法，有何不同？

一.线性回归的基本形式 线性回归既是一种数据挖掘与建模算法&#xff0c;也是统计学领域、计量经济学领域的常用学术建模方法。在数据挖掘与建模领域&#xff0c;线性回归算法是一种较为基础的机器学习算法&#xff0c;其基本思想是将响应变量&#xff08;因变量、被解释变量&…
阅读更多...
协议栈的内部结构

协议栈的内部结构

上层会向下层逐层委派工作。 最上面的部分是网络应用程序&#xff0c;它们会将收发数据等工作委派给下层的部分来完成。尽管不同的应用程序收发的数据内容不同&#xff0c;但收发数据的操作是共通的。 应用程序的下面是Socket库&#xff0c;其中包括解析器&#xff0c;解析器…
阅读更多...
Java+Swing+Mysql实现超市管理系统

Java+Swing+Mysql实现超市管理系统

一、系统介绍 1.开发环境 操作系统&#xff1a;Win10 开发工具 &#xff1a;IDEA2018 JDK版本&#xff1a;jdk1.8 数据库&#xff1a;Mysql8.0 2.技术选型 JavaSwingMysql 3.功能模块 4.系统功能 1.系统登录登出 管理员可以登录、退出系统 2.商品信息管理 管理员可以对商品信息…
阅读更多...
Windows下安装Git和Git小乌龟

Windows下安装Git和Git小乌龟

目录 Git简介 Git安装 Git小乌龟简介 Git小乌龟安装 Git简介 Git是一个开源的分布式版本控制系统&#xff0c;可以有效、高速地进行从很小到非常大的项目的版本管理。Git支持将本地仓库与远程仓库进行关联&#xff0c;实现多人协作开发。由于具有分布式版本控制、高效性、灵…
阅读更多...
最新文章

Copyright @ 2022~2023