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

本文介绍: 本篇文章将会教会如何使用ArkUI组件的基本使用，将上方示例进行拆解实现组件封装~1.将顶部栏进行封装,新建文件进行编写，或者在内部编写封装，这里我封装成公用的@Co mp on ent build(){Row(){Text(‘返回‘)Blan k()Text(‘刷新‘)引入直接使用即可再将列表封装，这里就直接封装成自定义构建函数

ArkUI组件使用

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

Im a g e

Text

TextInput

Button

Slide r

Column&&Row

Li st

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

Im a ge

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

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

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

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

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

Text

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

在这里插入图片描述

TextInput

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

Normal：基本输入

Pass word：密码输入

Em ail: 邮箱输入

Num ber:数字输入
-PhoneNum ber: 电话号码输入

在这里插入图片描述
通过onChange事件可以实现自己想要的交互

Button

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

Cap sule:胶囊性

Ci rcle: 圆形

Normal:普通按钮

在这里插入图片描述

Slide r

滑块组件使用

在这里插入图片描述
通过上方属性可以进行配置使用，在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&amp;w=250&amp;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()
  }
}