Harmony OS开发-ArkUI框架速成四

程序员Feri一名12年+的程序员,做过开发带过团队创过业,擅长Java相关开发、鸿蒙开发、人工智能等,专注于程序员搞钱那点儿事,希望在搞钱的路上有你相伴!君志所向,一往无前!


1.图标库

1.1 图标库概述

HarmonyOS 图标库为 HarmonyOS 开发者提供丰富的在线图标资源,涵盖多种使用场景以及风格分类,提供灵活的颜色、大小和格式定义,满足不同角色的下载需求。

1.2 下载图标库

点击即可打开,HarmonyOS 图标库

进入图标库网站,下载 SVG 格式,存储到工程目录:resources/base/media/

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

1.3 使用图标

使用 Image 组件显示图标,添加 fillColor() 属性修改图标颜色

复制代码
@Entry
@Component
struct Index {
  @State message: string = '快速拿下ArkUI框架';

  build() {
    Column() {
      Text(this.message)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .margin(10)
      Row(){
        Text("图标使用:")
        Image($r('app.media.ic_celiakeyboard_cangjie'))
          .width(50)
      }
    }.width("100%")
  }
}

2.布局属性

2.1 常用的布局属性

2.2 内边距 padding

作用:在组件内添加间距,拉开内容与组件边缘之间的距离

属性:数字 或 对象{}

● 数字:上下左右内边距相同

● 对象{}:配合 left、right、top、bottom 单独设置某个方向内边距

复制代码
@Entry
@Component
struct Index {

  build() {
    Column() {
      
      Text('内边距-Feri演示')
        .backgroundColor(Color.Orange)
          // 单值:四个方向padding相同
        .padding(20)
          // 对象:单独设置某个方向
        .padding({
          top: 10,
          right: 20,
          bottom: 40,
          left: 80
        })
    }.width("100%")
  }
}

2.3 外边距 margin

作用:在组件外面添加间距,拉开两个组件之间的距离

属性:margin

属性:数字 或 对象{}

● 数字:上下左右边外距相同

● 对象{}:配合 left、right、top、bottom 单独设置某个方向外边距

复制代码
@Entry
@Component
struct Index {

  build() {
    Column() {
      Row() {
        Text('程序员Feri')
          .backgroundColor(Color.Red)
          .padding(10)
          .margin(20)
        Text('求关注,求点赞')
          .backgroundColor(Color.Blue)
          .padding(10)
          .margin({
            top: 10,
            right: 20,
            bottom: 40,
            left: 80
          })
      }
    }.width("100%")
  }
}

好了,夜已深,本篇就到这里吧,关注我,跟着我搞鸿蒙,搞钱!

相关推荐
一路阳光8512 小时前
开源鸿蒙5.0正式发布 底座及配套能力快速稳定成熟
华为·开源·harmonyos
HMSCore3 小时前
碰一碰,秒更新!游戏近场快传助力多人联机无缝组队
harmonyos
HarmonyOS_SDK3 小时前
碰一碰,秒更新!游戏近场快传助力多人联机无缝组队
harmonyos
鸿蒙小白龙4 小时前
基于 OpenHarmony 6.0 的智能充电桩技术方案与实现
能源·harmonyos·鸿蒙·鸿蒙系统·open harmony
电子小子洋酱4 小时前
BearPi小熊派 鸿蒙入门开发笔记(4)
笔记·华为·harmonyos
熊猫钓鱼>_>4 小时前
【案例实战】鸿蒙分布式智能办公应用的架构设计与性能优化
分布式·华为·harmonyos
鸿蒙小白龙5 小时前
Openharmony应用开发之Ability异常退出与UIAbility数据备份开发实战
harmonyos·鸿蒙·鸿蒙系统·open harmony
Damon小智6 小时前
RedPlayer 视频播放器在 HarmonyOS 应用中的实践
音视频·harmonyos·鸿蒙·小红书·三方库·redplayer
猫林老师17 小时前
HarmonyOS分布式硬件共享:调用手机摄像头的手表应用
华为·交互·harmonyos
前端世界21 小时前
HarmonyOS应用开发指南:Toast无法显示的完整排查流程与实战案例
华为·harmonyos