鸿蒙开发系列教程（二十六）--样式处理（二）

huazi99

已于 2024-03-19 14:16:31 修改

阅读量581

点赞数 9

分类专栏：鸿蒙文章标签： harmonyos 华为

于 2024-03-19 13:59:22 首次发布

本文链接：https://blog.csdn.net/huazi99/article/details/136839775

版权

鸿蒙专栏收录该内容

29 篇文章 2 订阅

订阅专栏

本文介绍了HarmonyOS中的图标库下载、图片资源的使用方法，包括本地图片、资源文件夹和网络图片的引用，以及网络图片的权限要求。此外，文章还详细讲解了样式复用的两种方式(@Styles和@Extends)，以及如何通过封装原生组件来增强功能。

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

1、图标库

官网：https://developer.harmonyos.com/cn/design/harmonyos-icon/

在这里插入图片描述

可以下载不同类型
在这里插入图片描述

2、图片资源

（1）image本地图片
图片放到放置到ets目录下-可创建文件夹：如assets文件
在这里插入图片描述
引用： Image(‘/assets/abc.png’).width(80).height(80)

（2）Resource\media下图片
放到resource\media目录下
在这里插入图片描述
引用：Image($r(‘app.media.a6’)).width(80).height(80)

（3）Resource\rawfile下图片
在这里插入图片描述
引用：Image($rawfile(“a8.jpeg”)).width(80).height(80)

(4)网络图片

Image(“https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png”).width(80).height(80)

重点：网络图片，在preview中时，可以预览
但在模拟器和真实环境中，必须申请网络权限

网络权限：moddule.json5
{
“module”: {
“name”: “entry”,
…
“requestPermissions”: [{
“name”:“ohos.permission.INTERNET”
}]
}
}

3、样式@Styles

@Styles 可以进行样式复用，解决在开发过程中会出现大量代码重复样式设置问题

全局定义：

**@Styles function textStyle () {
  .width(100)
  .height(150)
  .backgroundColor(Color.Yellow)
  .borderRadius(25)
}**

@Entry
@Component
struct StyleRepeat {
  build() {
    Row() {
      Column({ space: 15 }) {
        Text("测试11")
          .textStyle()
          .textAlign(TextAlign.Center)
        Text("测试22")
          .textStyle()
          .textAlign(TextAlign.Center)
      }
      .width('100%')
    }
    .height('100%')
  }
}

局部定义：

@Entry
@Component
struct StyleRepeat {
  **@Styles
  textStyle () {
    .width(200)
    .height(50)
    .backgroundColor(Color.Pink)
    .borderRadius(25)
   
  }**
  build() {
    Row() {
      Column({ space: 15 }) {
        Text("测试11")
          .textStyle()
          .textAlign(TextAlign.Center)
        Text("测试22")
          .textStyle()
          .textAlign(TextAlign.Center)
      }
      .width('100%')
    }
    .height('100%')
  }
}

4、样式@Extends

使用Extend来修饰一个全局的方法
一般对原生组件进行封装

@Entry
@Component
struct ExtendCase {
  build() {
    Row() {
      Column({ space: 20 }) {
        Text("测试")
          .textStyle()
        Button("按钮")
          .btnStyle()
        
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Extend(Text) function textStyle () {
  .width(120)
  .height(160)
  .borderRadius(30)
  .backgroundColor(Color.Red)
  .textAlign(TextAlign.Center)
  .fontSize(20)
}
@Extend(Button) function btnStyle () {
  .width(120)
  .height(60)
  .borderRadius(30)
  .backgroundColor(Color.Pink)
  .fontSize(20)
}