【鸿蒙实战开发】鸿蒙next版开发基础布局

本文链接：https://blog.youkuaiyun.com/HarmonyOS_001/article/details/140104925

今日核心：

1.设计资源-图标库

2.属性：布局属性、背景属性

3.线性布局

1. 设计资源-图标库

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

使用步骤：设计师提供图标/下载图标 → 使用图标

1.1. 下载图标

●HarmonyOS 图标库
●IconFont 图标库

进入图标库网站，下载 SVG 格式，存储到工程目录：resources/base/media/
在这里插入图片描述

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

1.2. 使用图标

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

@Entry
@Component
struct Index {
build() {
Column() {
  Image($r('app.media.ic_gallery_create'))
    .width(30)
    .aspectRatio(1)
    .fillColor('#f60')}
    .padding(20)
  }
}

2. 布局属性

组件布局
在这里插入图片描述

2.1. 内边距 padding

作用：在组件内添加间距，拉开内容与组件边缘之间的距离
属性：数字或对象{}

●数字：上下左右内边距相同
●对象{}：配合 left、right、top、bottom 单独设置某个方向内边距

@Entry 
@Component 
struct Index { 
  build() { 
    Column() { 
      Row() { 
        Text('文字1') 
          .backgroundColor(Color.Pink) 
          .margin(20) 
        Text('文字2') 
          .backgroundColor(Color.Orange) 
          .margin({ top: 10, right: 20, bottom: 40, left: 80 }) 
        } 
      } 
    } 
  }

2.2. 外边距 margin

作用：在组件外面添加间距，拉开两个组件之间的距离
属性：margin
属性：数字或对象{}

●数字：上下左右内边距相同
●对象{}：配合 left、right、top、bottom 单独设置某个方向内边距

@Entry 
@Component 
struct Index { 
  build() { 
    Column() { 
      Row() { 
        Text('文字1') 
          .backgroundColor(Color.Pink) 
          .margin(20) Text('文字2') 
          .backgroundColor(Color.Orange) 
          .margin({ top: 10, right: 20, bottom: 40, left: 80 
        }) 
      } 
    } 
  } 
}

2.3. 案例-QQ音乐登录

在这里插入图片描述

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