从零开始学Hm（二）

最新推荐文章于 2025-03-09 15:37:48 发布

weixin_53527910

最新推荐文章于 2025-03-09 15:37:48 发布

阅读量1.5k

点赞数 37

文章标签：鸿蒙

本文链接：https://blog.csdn.net/weixin_53527910/article/details/136649724

版权

本文详细介绍了HarmonyOS中的各种UI组件，如image组件的网络图片、PixelMap和Resource加载方式，以及文本、按钮、滑动条、进度条等的使用。还涵盖了页面布局、循环渲染、条件判断和列表组件的详细配置，以及公共部分的抽取和样式管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件

通用属性

.width(100)

.height(100)

.bordrRadius(10)//边框圆角

image

声明inmage组件并设置图片源三种方式

1.string 加载网络图片，需要申请网络访问权限 ohos.permission.INTERNET

权限

在官方文档安全中在model.json5添加权限，name必填，其余参考文档选择用户授权或者系统授权，此处internet是系统授权

在model下添加requestPermissions

 "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }

    ],
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "mainElement": "EntryAbility",
    "deviceTypes":

image(‘https://xxx.png’)

2.PixelMap格式，加载像素图，需要传递一个像素图对象

image(pixelMapObject)

3.Resource格式加载本地图片

Image($r(‘app.media.mate60’)) 加载media路径下的图片不需要写后缀

Image($rawfile(‘mate60.png’)) 需要加后缀读rawfile文件夹下的图片

属性

.interpolation(ImageInterpolation.Hight)图片插值参数是枚举类型有三种高中低消除图片放大之后的锯齿

文本

string格式直接写文本内容

resource格式读取本地资源，需要在 en_US zh_CN base 目录下都加上

文本输入框

TextInput

placeHoder：输入框没东西的时候提示文本

text：当前文本内容

属性

.type（）密码

按钮

button(‘点我’)

嵌套其他组件 button(){Image()

}

属性

.type(normal 方形，Capsule 默认的胶囊，circle圆形)

Slider滑动条

min 最小值

max 最大值

value 默认值当前值

step 步长

style:SliderStyle.OutSet 滑块位置在滑动条外（里）

direction Axis.Horizontal 横向滑动或者纵向滑动

reverse: false 是否反向滑动最小值最大值切换位置

属性

.showTips（true）显示百分比

进度条

 Progress({
          value:this.finishTask,//当前
          total:this.totalTask,//总进度
          type:ProgressType.Ring//样式 枚举类型
        })

堆叠容器

Stack 后面覆盖前面

Stack(){
第一个
第二个
}

单选框

Checkbox()
              .select(item.finished)//完成

页面布局

justifyContent 主轴对齐格式 FlexAlign枚举对象

alignItems 交叉轴对齐格式 row容器用VerticalAlign枚举

column容器使用HorizontalAlign枚举对象

column容器列

主轴上下交叉轴左右

HorizontalAlign 左中右

row容器行

VerticalAlign 上中下

交叉轴上下主轴左右

FlexAlign

start 置顶 center 居中 end置底 spacebetween 中间平分

循环渲染

Foreach{

数组名（item：any）=>{ 循环体}

}

ifelse 判断

页表布局 list

一定要设置高度有了高度才可以上下拖动，设置layoutWeight属性可以占有屏幕高度

1.数量过多超出屏幕之后，会自动提供滚动功能

2.纵向横向排列都可以

ListItem（）{ 列表项内容只能包含一个根组件}

list属性

.listDirection(Axis.Vertical) 列表方向，默认纵向（垂直）

（Horizontal）水平方向

.layoutWeight(1) 默认是0，当你是0我是1时，除了你的全是我的，都是1时大家平分

 List({
        space:8
      }){

        ForEach(
          this.goods,
          (good:good)=>{

            ListItem(){

              Row(){
                Image(good.img)
                  .width(100)

                Column({space:4}){
                  if(good.discount){
                    Text(good.name)
                      .fontSize(20)
                      .fontWeight(FontWeight.Bold)

                    Text('原价：￥'+good.price.toString())
                      .fontColor('#ff797777')
                      .fontSize(12)
                      .margin({top:6})
                      .decoration({type:TextDecorationType.LineThrough})
                    Text('折扣价：￥'+(good.price-good.discount).toString())
                      .fontColor('#F36')
                      .fontSize(18)
                      .margin({top:6})
                    Text('补贴：￥'+good.discount.toString())
                      .fontColor('#F36')
                      .fontSize(18)
                      .margin({top:6})

                  }else {
                    Text(good.name)
                      .fontSize(20)
                      .fontWeight(FontWeight.Bold)

                    Text(good.price.toString())
                      .fontColor('#F36')
                      .fontSize(18)
                      .margin({top:6})
                  }

                }.justifyContent(FlexAlign.Start)
                .margin({left:20})

              }.width('100%')
              .margin({left:20})
              .backgroundColor('#ffeaeaea')
            }
          }

        )
      }.width('100%')
      .layoutWeight(1)

//集合居中样式
.alignListItem(ListItemAlign.Center)

引用抽取

抽取出公共部分如头部 export 用import引入

全局构建函数

写在装饰器上方需要加function

//全局自定义构建函数
@Builder function GoodCard(good: good) {
  Row() {
    Image(good.img)
      .width(80)

    Column({ space: 4 }) {
      if (good.discount) {
        Text(good.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)

        Text('原价：￥' + good.price.toString())
          .fontColor('#ff797777')
          .fontSize(12)
          .margin({ top: 3 })
          .decoration({ type: TextDecorationType.LineThrough })
        Text('折扣价：￥' + (good.price - good.discount).toString())
          .fontColor('#F36')
          .fontSize(18)
          .margin({ top: 3 })
        Text('补贴：￥' + good.discount.toString())
          .fontColor('#F36')
          .fontSize(18)
          .margin({ top: 3 })

      } else {
        Text(good.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)

        Text(good.price.toString())
          .fontColor('#F36')
          .fontSize(18)
          .margin({ top: 6 })
      }

    }.justifyContent(FlexAlign.Start)
    .margin({ left: 10 })

  }.width('90%')
  .backgroundColor('#FFF')
  .borderRadius(10)
  .margin({ left: 15 })
}

局部构建函数

只能自己组件内使用，代码相同去掉function引用时需要加this

抽取公共样式

// 全局样式
@Styles function allStyle(){
  .backgroundColor('#efefef')
  .width('100%')
  .height('100%')
  .padding(20)

}
直接.方法名引用，局部不加function

抽取非公共样式

不能写在组件内，只能写在全局位置

@Extend(Text) function 方法名（）{

}