基于鸿蒙5.0开发“黑马云音乐”项目全程实录03

（观前提醒：本文仅为笔者作知识点总结笔记使用，在文末附原视频链接）

七、通用属性

属性：给组件添加属性可以设定组件的样式、状态等。属性书写的语法格式为：组件.属性(值)

下面先介绍几个通用属性（任何组件都可以设置）

属性名	作用	属性值
width	设置宽度	数值（默认单位vp）
height	设置高度	数值（默认单位vp）
backgroundColor	设置背景色	色值（内置颜色或十六进制色值）

例6：按要求分别设置下列组件的属性

①添加一个Row组件，给其设置为宽度60vp，高度180vp，背景色为内置红色

②添加一个Text组件，内容自定义，给其设置宽度360vp，高度100vp，背景色为#ff6600

build() {
    Column(){
      Row(){}
        .width(60)
        .height(180)
        // 如果使用内置颜色，在()中直接输入 Color. 之后选择要求颜色即可
        .backgroundColor(Color.Red)

      Text('你好，我是Text组件')
        // tips:在鸿蒙开发中，宽度的最大值为360，即占满整个宽度
        .width(360)
        .height(100)
        // 如果使用十六进制表示颜色，要在()中添加''
        .backgroundColor('#ff6600')
    }
  }

运行结果如下：

八、文本属性

文本属性主要是用来调节文字的大小、颜色、粗细的，具体属性名及其作用如下：

属性名	作用	属性值
fontSize	设置字体大小	数值（默认单位fp）
fontColor	设置文字颜色	色值（内置颜色或十六进制色值）
fontWeight	设置字体粗细	100~900（默认粗细为400）

例7：先使用容器组件布局下列文字，并按各要求设置属性

CSDN专业开发者社区（宽320，大小18）

中国专业IT社区（宽320，大小14，颜色#999999）

build() {
    // 文字纵向排列，所以用Column组件修饰
    Column(){
        Text('CSDN专业开发者社区')
          .width(320)
          .fontSize(18)
        Text('中国专业IT社区')
          .width(320)
          .fontSize(14)
          .fontColor('#999999')
    }
  }

运行结果如下：

九、图像组件

图像组件主要是用为界面添加图片使用的，语法格式为：Image(图像资源路径)；按照图片格式分为本地图片和网络图片，其路径写法不同，具体如下：

①本地图片：即图片存储位置在项目中，一般存放在src/main/resources/base/media文件夹中，具体位置如下图所示，路径写法为：$r('app.media.XXX')

如果将项目中的HarmonyOS.jpg在项目中用代码体现，具体写法为：

build() {
    Column(){
      Image($r('app.media.HarmonyOS'))
    }
  }

运行结果如下：

那此时，就出现一个小小的问题，看起来怎么怪怪的？没错，就是图片尺寸好像太大，一个手机放不下，不过不用担心，在上文提到的通用属性！对咯，就是它！用其中的width属性就可以解决这个问题，修改后的代码如下：

build() {
    Column(){
      Image($r('app.media.HarmonyOS'))
        .width(300)
    }
  }

运行结果如下：

（tips：在实际开发中，图片的宽和高一般不需要同时设置，设置一个后，另一个会按照图片原有的比例进行等比例缩放，所以一般只需要设置一个即可）

②网络图片：直接写链接即可，如下面代码所示（注意要加'）：

图片链接：https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/harmonyos-next/images/hero/harmonyos-next-kv-logo-new.svg

build() {
    Column(){
      Image('https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/harmonyos-next/images/hero/harmonyos-next-kv-logo-new.svg')
        .width(300)
    }
  }

运行结果如下：

十、内外边距

使用内边距(padding)和外边距(margain)调整组件及内容的位置，具体书写的语法格式如下：

组件.padding/margin({top: 数值,bottom:数值,left:数值,right:数值})，分别表示上下左右，如果四个 方向的数值一样，那就可以简化写为组件.padding/margin(数值)

例8：设置一个登录按钮，一个注册按钮，宽度占满屏幕，组件的背景色为#DDDDDD，组件内边距左10，上20，右30，下40，两个按钮之间的距离是20

build() {
    Column(){
      Button('登录')
        .width('100%')
        .margin({
          bottom: 20
        })
      Button('注册')
        .width('100%')
    }
      .backgroundColor('#DDDDDD')
      .padding({
        left: 10,
        top: 20,
        right: 30,
        bottom: 40
      })
  }

 运行结果如下：

原视频地址：BV1gSZvYzEdZ