三、ArkUI界面设计2（基础布局）

原创 已于 2024-10-05 09:42:05 修改 · 1k 阅读 · 14 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos

于 2024-10-03 17:14:39 首次发布

此节核心：

  • 1. 设计资源-图标库
  • 2. 属性：布局属性、背景属性
  • 3. 线性布局

240928

1. 设计资源-图标库

1.1 下载图标

进入图标库网站，下载SVG格式，存到项目文件resources/base/media/...

HarmonyOS 图标默认命名以 ic_ 开头，其他图标库下载的图标素材建议修改为与 HarmonyOS 命名规则相同。

1.2 使用图标
使用Image组件显示图标，添加fillColor（）属性修改图标颜色 
@Entry
@Component
struct Index {
  build() {
    Column(){
      //本地设计师给的图片（假如）
      Image($r('app.media.ic_personal'))
        //fillColor填充颜色
        .fillColor(Color.Green)
        .width(50)

      //鸿蒙图标库下载
      Image($r('app.media.ic_contacts_delete'))
        .fillColor(Color.Blue)
        .width(50)

      //阿里图标库下载
      Image($r('app.media.ic_like'))
        .fillColor(Color.Red)
        .width(50)
    }
  }
}

240930

2. 布局属性

组件布局

属性描述
padding内边距
margin外边距
border边框线
borderRadius边框圆角
2.1 内边距 padding

在组件内添加间距，拉开内容于组件边缘之间的距离。

属性：数字或对象{}

  • 数字：上下左右内边距相同
  • 对象{}：left、right、top、bottom可单独设置某个方向上的内边距
@Entry
@Component
struct Index {
  build() {
    Column(){
      Text('内边距padding() test')
        .backgroundColor(Color.Pink)
        .padding(20)
      Text('内边距padding({}) test')
        .backgroundColor(Color.Green)
        .padding({
          top:20,
          left:30,
          right:40,
          bottom:50
        })
    }
  }
}

2.2 外边距 margin

在组件外面添加间距，拉开两个组件之间的距离。

属性：数字或对象{}；使用方法同上padding。

@Entry
@Component
struct Index {
  build() {
    Column(){
      Text('外边距margin() test')
        .backgroundColor(Color.Pink)
        .margin(20)
      Text('外边距margin({}) test')
        .backgroundColor(Color.Green)
        .margin({
          left:30
        })
    }
  }
}

2.3 案例-QQ音乐登录

@Entry
@Component
struct Index {
  build() {
    Column(){
      Image($r('app.media.ic_user'))
        .width(100)
      Text('大王叫我来巡山')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .margin(10)
      Button('QQ登录')
        .fontWeight(FontWeight.Bold)
        .width('100%')
        .margin({
          top:20
        })
      Button('微信登录')
        .fontWeight(FontWeight.Bold)
        .backgroundColor('#ddd')
        .fontColor(Color.Black)
        .width('100%')
        .margin({
          top:10
        })
    }
    .width('100%')
    .padding(20)
  }
}

2.4 边框属性 border
2.4.1 四个方向上边框属性相同

参数：{width ?: 数字 , color ?: ' ', style ?: BorderStyle}

  • width：边框宽度，默认值为0，即不显示边框
  • color：边框颜色，默认黑色
  • style：边框样式，BorderStyle枚举类型；Solid实线（默认），Dashed虚线，Dotted点线
@Entry
@Component
struct Index {
  build() {
    Column(){
      Text('边框属性border test')
        .width(100)
        .height(100)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Pink)
        .border(
          {width: 5,
          color: 'red',
          style: BorderStyle.Dashed})
    }
  }
}

2.4.2 四个方向上边框属性不同

书写方法

.border({
 width: {},
 color: {},
 style: {}
}
width、color、style 均可以通过top、right、bottom、left设置各个方向上的边框外观。 
@Entry
@Component
struct Index {
  build() {
    Column(){
      Text('边框属性border test')
        .width(100)
        .height(100)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Pink)
        .border({
          //左：蓝色点线宽度2；右：橙色虚线宽度3；上下无边框
          width: {left:2,right:3 },
          color: {left:'blue',right:'orange'},
          style: {left:BorderStyle.Dotted,right:BorderStyle.Dashed}
        })
    }
    .padding(10)
  }
}

241001

2.5 边框圆角 borderRadius

参数：数值或{}；topLeft左上角，topRight右上角，bottomLeft左下角，bottomRight右下角

@Entry
@Component
struct Index {
  build() {
    Column(){
      Text('边框圆角test1，四角圆角值相同')
        .width(100)
        .aspectRatio(1)
        .backgroundColor(Color.Orange)
        .borderRadius(20)
        .margin({bottom:5})
      Text('边框圆角test2，四角圆角值不同')
        .width(100)
        .aspectRatio(1)
        .backgroundColor(Color.Brown)
        .margin({bottom:5})
        .borderRadius({
          topLeft:5,
          topRight:10,
          bottomLeft:30,
          bottomRight:50
        })

      Text('边框圆角test3，正圆，圆角值为正方形边长的1/2')
        .width(100)
        .aspectRatio(1)
        .backgroundColor(Color.Orange)
        .borderRadius(50)
        .margin({bottom:5})

      Text('边框圆角test4，胶囊状，圆角值为高度的1/2')
        .width(100)
        .height(40)
        .backgroundColor(Color.Orange)
        .borderRadius(20)
    }
    .padding(10)
  }
}

3. 背景属性

属性描述
backgroundColor背景颜色
backgroundImage背景图片
backgroundImageSize背景图片尺寸
backgroundImagePosition背景图片位置
3.1 背景颜色 backgroundColor
组件添加宽高属性或有内容才能观察到背景颜色。
3.2 背景图片 backgroundImage
属性：backgroundImage（背景图地址，背景图平铺方式ImageRepeat）
背景图平铺方式（可省略）：
  • NoRepeat：不平铺，默认
  • X：水平平铺
  • Y：垂直平铺
  • XY：水平垂直均平铺
@Entry
@Component
struct Index {
  build() {
    Column(){
      Text('背景图片test1，无平埔')
        .width(300)
        .height(200)
        .backgroundColor(Color.Grey)
        .backgroundImage($r('app.media.flower'))
      Text('背景图片test2，平埔方式XY')
        .width(300)
        .height(200)
        .backgroundColor(Color.Orange)
        .backgroundImage($r('app.media.flower'),ImageRepeat.XY)
    }
    .padding(10)
  }
}

3.3 背景图片尺寸 backgroundImageSize

作用：背景图片缩放

参数：

  • 设置背景图宽高尺寸：{width：num，height：num}（单设置宽或高，另一个尺寸等比例缩放）
  • 枚举ImageSize：Cover完全覆盖时停止缩放；Contain，宽或高与组件尺寸相同时停止缩放；Auto，默认原图尺寸。
@Entry
@Component
struct Index {
  build() {
    Column(){
      Text('背景图片尺寸test1，宽高')
        .width(300)
        .height(200)
        .backgroundColor(Color.Grey)
        .backgroundImage($r('app.media.flower'))
        .backgroundImageSize({width:110})
      Text('背景图片尺寸test2，ImageSize.Cover')
        .width(300)
        .height(200)
        .backgroundColor(Color.Orange)
        .backgroundImage($r('app.media.flower'))
        .backgroundImageSize(ImageSize.Cover)
      Text('背景图片尺寸test3，ImageSize.Contain')
        .width(300)
        .height(200)
        .backgroundColor(Color.Pink)
        .backgroundImage($r('app.media.flower'))
        .backgroundImageSize(ImageSize.Contain)
    }
    .padding(10)
  }
}

3.4 背景图片位置 backgroundImagePosition
作⽤：调整背景图在组件内的显示位置，默认显示位置为组件左上⻆。
参数：位置坐标：{x：位置，y：位置}；枚举Alignment
Alignment
TopStart顶部起始端（默认）
Top顶部横向居中
TopEnd顶部尾端
Start起始端纵向居中
Center居中
End尾端纵向居中
BottomStart底部起始端
Bottom底部横向居中
BottomEnd底部尾端
@Entry
@Component
struct Index {
  build() {
    Column(){
      Text('背景图片位置test1，默认位置')
        .width(300)
        .height(200)
        .backgroundColor(Color.Grey)
        .backgroundImage($r('app.media.flower'))
      Text('背景图片位置test2，设置x&y')
        .width(300)
        .height(200)
        .backgroundColor(Color.Orange)
        .backgroundImage($r('app.media.flower'))
        .backgroundImagePosition({x:50,y:100})
        //vp转px vp2px()
        //.backgroundImagePosition({x:vp2px(150),y:vp2px(100)})
      Text('背景图片位置test3，Alignment')
        .width(300)
        .height(200)
        .backgroundColor(Color.Yellow)
        .backgroundImage($r('app.media.flower'))
        .backgroundImagePosition(Alignment.Center)
    }
    .padding(10)
  }
}

241002

4. 线性布局

线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Row和Column构建。Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。根据不同的排列方向，开发者可选择使用Row和Column容器创建线性布局。

4.1 基本概念
  • 布局容器：具有布局能力的容器组件，可以承载其他元素作为其子元素。
  • 布局子元素：布局容器内部的元素。
  • 主轴：线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。Row容器主轴为横向，Column容器主轴为纵向。
  • 交叉轴：垂直于主轴方向的轴线。Row容器交叉轴为纵向，Column容器交叉轴为横向。
  • 间距：布局子元素的间距。
4.2 主轴方向的间距 space

在布局容器内，可以通过space属性设置主轴方向上子元素的间距，使各子元素在主轴方向上有等间距效果。

@Entry
@Component
struct Index {
  build() {
    Column(){
      //Column主轴方向上间距测试
      Column({space:20}){
        Text('test')
          .width(100)
          .height(50)
          .backgroundColor(Color.Pink)
        Text('test')
          .width(100)
          .height(50)
          .backgroundColor(Color.Pink)
        Text('test')
          .width(100)
          .height(50)
          .backgroundColor(Color.Pink)
      }
        .margin({bottom:5})

      //Row主轴方向上间距测试
      Row({space:20}){
        Text('test')
          .width(100)
          .height(50)
          .backgroundColor(Color.Orange)
        Text('test')
          .width(100)
          .height(50)
          .backgroundColor(Color.Orange)
        Text('test')
          .width(100)
          .height(50)
          .backgroundColor(Color.Orange)
      }
    }
    .padding(5)
  }
}

241003

4.3 主轴对齐方式 justifyContent

参数：FlexAlign

Column和Row组件的justifyContent属性效果相似，以下以Column为例。

@Entry
@Component
struct Index {
  build() {
    Column(){
      Column(){
        Text('test')
          .width(100)
          .height(50)
          .backgroundColor(Color.Orange)
        Text('test')
          .width(100)
          .height(50)
          .backgroundColor(Color.Green)
        Text('test')
          .width(100)
          .height(50)
          .backgroundColor(Color.Yellow)
      }
      .width(300)
      .height(300)
      .backgroundColor(Color.Pink)
      .justifyContent(FlexAlign.SpaceAround)
    }
    .padding(5)
  }
}

4.4 交叉轴对齐方式 alignItems

alignItems默认center；参数：枚举类型

  • 交叉轴在水平方向：HorizontalAlign -> Column
  • 交叉轴在垂直方向：VerticalAlign -> Row

注：布局容器在交叉轴要有足够空间，否则无法生效。

4.4.1 Column
@Entry
@Component
struct Index {
  build() {
    Column(){
      Column(){
        Text('test')
          .width(100)
          .height(50)
          .backgroundColor(Color.Orange)
        Text('test')
          .width(100)
          .height(50)
          .backgroundColor(Color.Green)
        Text('test')
          .width(100)
          .height(50)
          .backgroundColor(Color.Yellow)
      }
      .width(300)
      .height(300)
      .backgroundColor(Color.Pink)
      .alignItems(HorizontalAlign.Start)
    }
    .padding(5)
  }
}
4.4.2 Row
@Entry
@Component
struct Index {
  build() {
    Column(){
      Row(){
        Text('test')
          .width(100)
          .height(50)
          .backgroundColor(Color.Orange)
        Text('test')
          .width(100)
          .height(50)
          .backgroundColor(Color.Green)
        Text('test')
          .width(100)
          .height(50)
          .backgroundColor(Color.Yellow)
      }
      .width('100%')
      .height(300)
      .backgroundColor(Color.Pink)
      .alignItems(VerticalAlign.Bottom)
    }
    .padding(5)
  }
}

4.5 单个子元素交叉轴对齐方式 alignSelf

参数：枚举ItemAlign （Stretch拉伸，交叉轴拉伸效果）

@Entry
@Component
struct Index {
  build() {
    Column(){
      Row(){
        Text('test')
          .width(100)
          .height(50)
          .backgroundColor(Color.Orange)
        Text('test')
          .width(100)
          .height(50)
          .backgroundColor(Color.Green)
          //交叉轴拉伸，Stretch常用
          .alignSelf(ItemAlign.Stretch)
        Text('test')
          .width(100)
          .height(50)
          .backgroundColor(Color.Yellow)
      }
      .width('100%')
      .height(300)
      .backgroundColor(Color.Pink)
      .alignItems(VerticalAlign.Bottom)
    }
    .padding(5)
  }
}

4.6 自适应缩放 layoutWeight

layoutWeight是用于指定一个元素在父容器中所占空间的比例。它是一种相对值，表示当父容器有剩余空间时，如何在子元素之间按照权重分配这些空间。（主轴）

@Entry
@Component
struct Index {
  build() {
    Column({space:10}){
      Row(){
        Text('test')
          .width(60)
          .backgroundColor(Color.Orange)
        Text('test')
          .layoutWeight(1)
          .backgroundColor(Color.Green)
      }
      .width('100%')
      .height(100)
      .backgroundColor(Color.Pink)

      Row(){
        Text('test')
          .width(60)
          .backgroundColor(Color.Orange)
        Text('test')
          .layoutWeight(2)
          .backgroundColor(Color.Green)
        Text('test')
          .layoutWeight(1)
          .backgroundColor(Color.Orange)
      }
      .width('100%')
      .height(100)
      .backgroundColor(Color.Pink)
    }
    .padding(5)
  }
}

5. 综合案例-得物探索页

@Entry
@Component
struct Index {
  build() {
    //布局思路：先外后内，先左后右，先上后下
    Column(){
      Row(){
        //左侧：两行文字，竖排
        Column({space:10}){
          Text('玩一玩')
            .fontColor('#14151a')
            .fontWeight(FontWeight.Bold)
            .fontSize(20)
          Text('签到兑礼 | 超多大奖 超好玩')
            .fontSize(14)
            .fontColor('#c4c4d1')
        }
          .alignItems(HorizontalAlign.Start)

        //右侧：两个图片，横排
        Row({space:10}){
          Image($r('app.media.du'))
            .width(80)
            .aspectRatio(1)
            .backgroundColor('#efefef')
            .borderRadius(8)
          Image($r('app.media.ic_public_arrow_right'))
            .width(20)
            .fillColor('#b7b6be')
        }
      }
        .width('100%')
        .height(150)
        .backgroundColor('#fff')
        .padding({left:20,right:10})
        .borderRadius(8)
        .justifyContent(FlexAlign.SpaceBetween)
    }
      .width('100%')
      .height('100%')
      .padding(10)
      .backgroundColor('#f5f4f9')
  }
}

6. 综合案例-得物产品卡片

@Entry
@Component
struct Index {
  build() {
    Column(){
      //产品推荐页面从上到下：图、文字、row（图、文字、图标、数字）
      Column({space:5}){
        //产品图片
        Image($r('app.media.nick'))
          .width('100%')
          .aspectRatio(1)
          .borderRadius({topLeft:8,topRight:8})

        Column({space:5}){
          //产品简单介绍，标题
          Text('今天介绍这个 | 每日穿搭分享鞋子篇')
            .fontSize(18)
            .fontWeight(FontWeight.Medium)
            .fontColor('#414141')

          Row(){
            //发布者个人信息显示
            Row(){
              Image($r('app.media.ic_user'))
                .width(15)
                .aspectRatio(1)
                .borderRadius(10)
              Text('插画师分享聚集地')
                .fontSize(12)
                .fontColor('#787a7d')
            }
            //点赞量显示
            Row(){
              Image($r('app.media.ic_like1'))
                .width(10)
                .fillColor('#c2c0ca')
              Text('2300')
                .fontSize(12)
                .fontColor('#787a7d')
            }
          }
            .width('100%')
            .justifyContent(FlexAlign.SpaceBetween)
        }
          .padding({left:10,right:10,bottom:10})
      }
        .width(250)
        .alignItems(HorizontalAlign.Start)
        .backgroundColor('#fff')
        .borderRadius(8)
    }
      .width('100%')
      .height('100%')
      .padding(10)
      .backgroundColor('#f5f4f9')
  }
}

案例中遇到的问题：Row容器组件未设置主轴方向上width数据，使用主轴对齐方式justifyContent(FlexAlign.SpaceBetween)时无效果，加上width属性问题解决。

二、ArkUI界面设计1（组件-样式-基础）
FXNup的博客
09-23 2118
简单文本属性&图片属性介绍
鸿蒙开发之ArkUI 界面篇 十 边框border
renfujiang的专栏
09-18 1027
鸿蒙的强大远不止于此处，还可以实现单边框,就是说变宽的四个角、四个边都可以随意改成想要的颜色样式，改四个变宽语法。bottom:8},同理改颜色。Text('单边框')
一文彻底搞清楚Harmony NEXT的ArkUI
程序员Feri
12-24 1102
在移动开发领域，长期以来存在着两大阵营：iOS和Android。为了满足不同平台的需求，开发者往往需要分别编写两套代码，这无疑增加了开发成本和维护难度。在这种背景下，跨平台UI框架应运而生，旨在实现“一套代码，多平台运行”。目前主流的跨端开发框架：React Native由Facebook开发Flutter是由Google公司开发的uni-app 是国内的DCloud开发的ArkUI 是华为推出一款跨平台Weex是由阿里巴巴开发的跨平台。
都 2025 了，帧率还卡在 40？ArkUI 渲染性能从“管线”到“落地工具”，一把梭！
最新发布
2501_92698736的博客
11-24 700
《鸿蒙应用性能优化实战指南》摘要： 本文针对鸿蒙应用开发中常见的性能卡顿问题，系统梳理了从问题定位到优化落地的全流程方案。 核心方法论： 渲染管线分析：拆解ArkUI四阶段（Build/Layout/Draw/Composite），明确60Hz/120Hz的时间预算标准 量化诊断工具链：结合ArkUI Profiler与Frame Analyzer，通过红帧定位、火焰图分析、内存监控建立性能基线 典型优化场景： 重建优化：状态粒度控制+LazyForEach缓存 布局抖动：避免循环测量+减少嵌套层次 绘制沉
鸿蒙5.0开发进阶：API ArkUI框架-ArkTS组件（边框设置）
Androidbye的博客
12-20 1072
设置组件边框样式。
HarmonyOS 开发探索： ArkUI常用样式布局
DMZDAMS的博客
07-01 1258
ArkUI支持多种布局方式，包括但不限于Column、Row、Stack、Flex等。
【移动应用开发】ArkUI中Column与Row布局详解：构建精美高效用户界面的设计技巧与实战案例
06-10
内容概要：本文深入探讨了ArkUI框架中Column与Row线性布局容器的使用方法及其重要性。Column负责垂直布局，通过控制子组件的垂直排列、间距和对齐方式，实现信息展示页面的层次分明；Row负责水平布局，通过灵活的...
【鸿蒙应用开发】ArkUI布局结构与元素组成详解：构建高效用户界面的设计指南
06-17
文章详细解析了ArkUI的布局结构，包括Page、Column、Row等基础组件，以及线性布局、层叠布局、弹性布局等多种布局方式，每种布局方式都有其特定的应用场景，如音乐播放应用中的播放列表、电商应用的商品详情页等。...
鸿蒙开发基础 —— ArkUI 页面布局(弹性布局 (Flex)）
guangxishaoji的博客
03-03 1040
弹性布局（ Flex ）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。图1主轴为水平方向的Flex容器示意图。
【鸿蒙应用开发】ArkUI布局指南：探索鸿蒙应用界面构建的核心技术与应用场景
06-10
内容概要：本文档《ArkUI布局指南：解锁鸿蒙应用界面构建的秘密》详细介绍了鸿蒙应用开发中ArkUI框架的基础知识和布局技巧。首先，文章解释了ArkUI的重要性及其提供的两种开发范式：声明式（ArkTS）和类Web开发范式...
【HarmonyOS4.0】第四篇-ArkUI基础实战
weixin_42533732的博客
01-08 3304
ArkUI开发框架是方舟开发框架的简称，它是一套构建 HarmonyOS / OpenHarmony 应用界面的声明式UI开发框架，它使用极简的UI信息语法、丰富的UI组件以及实时界面语言工具，帮助开发者提升应用界面开发效率 30%，开发者只需要使用一套 TS / JS API，就能在多个 HarmonyOS / OpenHarmony 设备上提供既丰富又流畅的用户界面体验。
ArkUI组件
m0_56308072的博客
12-09 2819
方舟开发框架（简称ArkUI）为HarmonyOS应用的UI开发提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能（组件、布局、动画以及交互事件），以及实时界面预览工具等，可以支持开发者进行可视化界面开发。ArkUI提供了非常多的组件供开发者使用，我们在使用时直接去查看官方文档即可。
HarmonyOS开发（ArkUI简单使用）
2301_79568779的博客
10-16 2104
Componentbuild(){//组件UI描述@Componentbuild(){//使用组件Com({title:'标题'})//UI描述@Componentbuild(){@Component//UI描述build(){
鸿蒙学习（二）-ArkUI组件
qq_64669006的博客
12-12 365
1、string格式，直接填写文本内容Text("文本哈哈哈哈")2、Resource格式，读取本地资源文件base是默认目录，里面放普通的内容，en_US和zh_CN是区分国家用的，里面放限定词目录（国家，语言，设备），string.json中放的限定内容，可以使代码在中文设备展示中文，英文设备展示英文，当限定词目录都不匹配，就去限定词目录，所以限定词目录一定要写。
HarmonyOS ArkUI常用布局及组件库介绍
weixin_44640245的博客
01-03 2437
HarmonyOS ArkUI常用布局及组件库介绍
ArkUI跨平台设计【坚果派】
坚果的博客
09-10 9392
研发模型，兼容OpenHarmony应用的Stage开发模型，支持基于ArkTS的声明式开发范式，可跨平台。声明式UI后端引擎，包括布局，渲染，C++ UI组件，事件机制等，可跨平台。API扩展机制，基于NAPI机制，可跨平台。不同平台需要各自扩展具体的API实现。工具链/SDK, 工具链可跨平台，SDK需基于不同平台构建。另外，ArkUI依赖的ArkTS引擎以及图形引擎，也可跨平台。
arkUI：布局的属性（margin、padding、border、borderRadius）
小蜗牛764号的博客
11-05 2061
我们可以在ArkUI 中使用内外边距（padding 和 margin）、边框（border）以及圆角（borderRadius）来调整组件的布局和外观。这些样式是前端开发中常用的布局技巧，能够大幅提升界面的美观性和可用性。每个组件的常见用法都有必要记录一下，后续有不懂的可以回顾查看。毕竟官方文档，有些繁杂的。自己积累自己的文本库。碰到啥记录啥，这些都是经验的积累。没想到不难的内容，编写也要耗费这么多时间。
OpenHarmony开发实战：ArkUI常用布局容器对齐方式（ArkTS
m0_60147147的博客
04-10 1212
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。
Harmony OS开发-ArkUI框架速成四
程序员Feri
01-05 1256
HarmonyOS 图标库为 HarmonyOS 开发者提供丰富的在线图标资源，涵盖多种使用场景以及风格分类，提供灵活的颜色、大小和格式定义，满足不同角色的下载需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值