HarmonyOS4.0组件

橙子baba

已于 2024-01-30 13:44:05 修改

阅读量160

点赞数 2

文章标签： harmonyos 华为 typescript 开发语言

于 2024-01-29 22:48:47 首次发布

本文链接：https://blog.csdn.net/qq_52363482/article/details/135920758

版权

本文介绍了在Ohos框架中声明和使用Image和Text组件的方法，包括图片的三种加载方式（URL、PixeMap和Resource），以及它们的属性设置，如宽度、高度、边框圆角和图片插值。同时展示了如何在Text组件中应用文本样式和网络访问权限的要求。

摘要由CSDN通过智能技术生成

Image

1.声明Image图片并设置图片源

Image(src: string|PixeMap|Resource)

① string格式，用来加载图片，需要申请网络访问权限：ohos.permission.INTERNET

Image('https://xxx.png')

②PixeMap格式，可以加载像素图，通常用于图片编辑

Image(pixeMapObiect)

③Resource格式，加载本地图片，推荐使用

//图片存放的目录不同，引用的格式不同
Image($r('app.media.icon'))
Image($rawfile('icon.png'))

2.图片属性

Image($rawfile('icon.png'))
.width(100)//宽度
.hieght(120)//高度
.borderRadius(10)//边框圆角
interpolation(ImageInterpolation.High)//图片插值，低分辨率图片放大图片时会有锯齿，设置后弥补锯齿

3.实例

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .fontColor('#36D')
          .onClick(() => {
            this.message = '你好'
          })
        Image('https://static.firefoxchina.cn/202204/Rpw0Dz7BhwO4gyh28jduu7MqX6JrKKx4r7vkjAKZ.png')
          .width(250)
        // Image($r('app.media.icon'))
        //   .width(200)
        Image($rawfile('icon.png'))
          .interpolation(ImageInterpolation.High)
          .width(300)
      }
      .width('100%')
    }
    .height('100%')
  }
}

Text

1.声明text组件并设置文本内容

Text(content?: string|Resource)

①string格式，直接填写文本内容

Text('你好')

②Resource格式，读取本地资源文件

Text($r('app.string.width_label'))

2.添加文本属性

        Text('我是橙子')
          .lineHeight(32)//行高
          .fontSize(20)//字体大小
          .fontColor('#ff1876f8')//字体颜色
          .fontWeight(FontWeight.Medium)//字体粗细

实例

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

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


        Image($rawfile('icon.png'))
          .interpolation(ImageInterpolation.High)
          .width(300)
        Text($r('app.string.width_label'))
          .fontColor('red')
          .fontWeight(FontWeight.Bolder)
          .fontSize(50)
      }
      .width('100%')
    }
    .height('100%')
  }
}