HarmonyOS4.0开发应用(三)【ArkUI组件使用】

news2024/11/19 23:40:29

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组件的基本使用了，开发个纯前端的页面应该是没什么问题了✌

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

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

相关文章

查看电脑cuda版本

查看电脑cuda版本

1.找到NVODIA控制面板 输入NVIDIA搜索即可 出现NVIDIA控制面板 点击系统信息 2.WINR 输入nvidia-smi 检查了一下&#xff0c;电脑没用过GPU&#xff0c;连驱动都没有 所以&#xff0c;装驱动…… 选版本&#xff0c;下载 下载后双击打开安装 重新输入nvidia-smi 显示如下…
阅读更多...
【Lidar】Python实现点云CSF布料滤波算法提取地面点

【Lidar】Python实现点云CSF布料滤波算法提取地面点

这两天会持续更新一下Python处理点云数据的教程&#xff0c;大家可以点个关注。今天给大家分享一下点云的经典算法&#xff1a;CSF布料模拟算法。 1 CSF算法简介 CSF算法&#xff0c;全称为Cloth Simulation Filtering&#xff0c;是一种基于欧几里得空间中最小生成树思想的聚类…
阅读更多...
iPaaS架构深入探讨

iPaaS架构深入探讨

在数字化时代全面来临之际&#xff0c;企业正面临着前所未有的挑战与机遇。技术的迅猛发展与数字化转型正在彻底颠覆各行各业的格局&#xff0c;不断推动着企业迈向新的前程。然而&#xff0c;这一数字化时代亦衍生出一系列复杂而深奥的难题&#xff1a;各异系统之间数据孤岛、…
阅读更多...
生成式人工智能在采购场景落地 隆道AI产品亮相甲子引力年终盛典

生成式人工智能在采购场景落地 隆道AI产品亮相甲子引力年终盛典

11月30日&#xff0c;以“致追风赶月的你”为主题的“2023甲子引力年终盛典”在北京举办。北京隆道网络科技有限公司总裁吴树贵受邀出席本次会议&#xff0c;并在企业数字化专场会议中做主题发言&#xff0c;探讨了人工智能在采购业务场景中的应用&#xff0c;重点向参会人员介…
阅读更多...
老电脑重置后能连上WIFI但是打开360网页老是提示该网址不是私密连接

老电脑重置后能连上WIFI但是打开360网页老是提示该网址不是私密连接

看了一下可以忽略这次提示&#xff0c;能够上网&#xff0c;但是每次打开新网页都会有“该网址不是私密连接”提示&#xff0c;这个提示非常大&#xff0c;严重影响上网。 强行下载了谷歌浏览器并打开后&#xff0c;提示“您的时钟慢了”&#xff0c;然后看了一下电脑右下角日期…
阅读更多...
UDP实现群聊

UDP实现群聊

代码&#xff1a; import java.awt.*; import java.awt.event.*; import javax.swing.*; import java.net.*; import java.io.IOException; import java.lang.String;public class liaotian extends JFrame{private static final int DEFAULT_PORT8899;private JLabel stateLB…
阅读更多...
JAVA实现敏感词高亮或打码过滤：sensitive-word

JAVA实现敏感词高亮或打码过滤：sensitive-word

练手项目中实现发表文章时检测文章是否带有敏感词&#xff0c;以及对所有敏感词的一键过滤功能 文章目录 效果预览实现步骤 效果预览 随便复制一篇内容到输入框 机器审核文章存在敏感词&#xff0c;弹消息提示并进入人工审核阶段&#xff08;若机器审核通过&#xff0c;则无需审…
阅读更多...
helm或者k8s部署pod时遇到pod一直处于pending状态

helm或者k8s部署pod时遇到pod一直处于pending状态

问题 我在使用helm部署一个mysql主从复制的数据库时遇到了一些问题&#xff0c;具体如下&#xff1a; 这是我使用的配置文件 # ruoyi-mysql.yaml auth:rootPassword: "123456"database: ry-vueinitdbScriptsConfigMap: ruoyi-init-sqlprimary:persistence:size: 2G…
阅读更多...
CleanMyMac X2024最新版本软件实用性测评

CleanMyMac X2024最新版本软件实用性测评

信大多数MAC用户都较为了解&#xff0c;Mac虽然有着许多亮点的性能&#xff0c;但是让用户叫苦不迭的还其硬盘空间小的特色&#xff0c;至于很多人因为文件堆积以及软件缓存等&#xff0c;造成系统空间内存不够使用的情况。于是清理工具就成为了大多数MAC用户使用频率较高的实用…
阅读更多...
使用Caliper对Fabric地basic链码进行性能测试

使用Caliper对Fabric地basic链码进行性能测试

如果你需要对fabric网络中地合约进行吞吐量、延迟等性能进行评估&#xff0c;可以使用Caliper来实现&#xff0c;会返回给你一份网页版的直观测试报告。下面是对test-network网络地basic链码地测试过程。 目录 1. 建立caliper-workspace文件夹2. 安装npm等3. calipe安装4. 创建…
阅读更多...
[wp]“古剑山”第一届全国大学生网络攻防大赛 Web部分wp

[wp]“古剑山”第一届全国大学生网络攻防大赛 Web部分wp

“古剑山”第一届全国大学生网络攻防大赛 群友说是原题杯 哈哈哈哈 我也不懂 我比赛打的少 Web Web | unse 源码&#xff1a; <?phpinclude("./test.php");if(isset($_GET[fun])){if(justafun($_GET[fun])){include($_GET[fun]);}}else{unserialize($_GET[…
阅读更多...
Rust的eBFP框架Aya(一) - Linux内核网络基础

Rust的eBFP框架Aya(一) - Linux内核网络基础

前言 在我的Rust入门及实战系列文章中已经说明&#xff0c; Rust是一门内存安全的高性能编程语言&#xff0c;从它的这些优秀特性来看&#xff0c;就是一门专为系统开发而诞生的语言。至于很多使用Rust来进行web开发的行为&#xff0c;不能说它们不好&#xff0c;只能说是杀鸡…
阅读更多...
CPU密集型和IO密集型与CPU内核之间的关系

CPU密集型和IO密集型与CPU内核之间的关系

CPU密集型和IO密集型与CPU内核之间的关系 一、CPU密集型 介绍 CPU密集型&#xff0c;也叫计算密集型&#xff0c;是指需要大量CPU计算资源&#xff0c;例如大量的数学运算、图像处理、加密解密等。这种类型的任务主要依赖于CPU的计算能力&#xff0c;会占用大量的CPU时间片&am…
阅读更多...
ALNS的MDP模型| 还没整理完12-08

ALNS的MDP模型| 还没整理完12-08

有好几篇论文已经这样做了&#xff0c;先摆出一篇&#xff0c;然后再慢慢更新 第一篇 该篇论文提出了一种称为深增强ALNS&#xff08;DR-ALNS&#xff09;的方法&#xff0c;它利用DRL选择最有效的破坏和修复运营商&#xff0c;配置破坏严重性参数施加在破坏算子上&#xff0c…
阅读更多...
备忘录模式 rust和java的实现

备忘录模式 rust和java的实现

文章目录 备忘录模式介绍实现javarustrust仓库 备忘录模式 备忘录&#xff08;Memento&#xff09;模式的定义&#xff1a;在不破坏封装性的前提下&#xff0c;捕获一个对象的内部状态&#xff0c;并在该对象之外保存这个状态&#xff0c;以便以后当需要时能将该对象恢复到原先…
阅读更多...
解决Flutter运行报错Could not run build/ios/iphoneos/Runner.app

解决Flutter运行报错Could not run build/ios/iphoneos/Runner.app

错误场景 更新了IOS的系统版本为最新的17.0, 运行报以下错误 Launching lib/main.dart on iPhone in debug mode... Automatically signing iOS for device deployment using specified development team in Xcode project: GN3DCAF71C Running Xcode build... Xcode build d…
阅读更多...
C++_命名空间（namespace）

C++_命名空间（namespace）

目录 1、namespace的重要性 2、 namespace的定义及作用 2.1 作用域限定符 3、命名空间域与全局域的关系 4、命名空间的嵌套 5、展开命名空间的方法 5.1 特定展开 5.1 部分展开 5.2 全部展开 结语&#xff1a; 前言&#xff1a; C作为c语言的“升级版”&#xff0c;其在…
阅读更多...
深度模型训练时CPU或GPU的使用model.to(device)

深度模型训练时CPU或GPU的使用model.to(device)

一、使用device控制使用CPU还是GPU device torch.device("cuda:0" if torch.cuda.is_available() else "cpu") # 单GPU或者CPU.先判断机器上是否存在GPU&#xff0c;没有则使用CPU训练 model model.to(device) data data.to(device)#或者在确定有GPU的…
阅读更多...
帆软报表决策报表改变屏幕大小后出现字体大小或滚动条异常解决方案：双向自适应

帆软报表决策报表改变屏幕大小后出现字体大小或滚动条异常解决方案：双向自适应

帆软报表决策报表改变屏幕大小后出现字体大小或滚动条异常。 解决方案&#xff1a;在模板和报表块中配置双向自适应 在每一个报表块中设置&#xff1a;
阅读更多...
【C/PTA —— 15.结构体2（课外实践）】

【C/PTA —— 15.结构体2（课外实践）】

C/PTA —— 15.结构体2&#xff08;课外实践&#xff09; 7-1 一帮一7-2 考试座位号7-3 新键表输出7-4 可怕的素质7-5 找出同龄者7-6 排队7-7 军训 7-1 一帮一 #include<stdio.h> #include<string.h>struct student {int a;char name[20]; };struct student1 {int …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023