鸿蒙星河版笔记来袭！布局元素、边框、圆角等附案例_鸿蒙boder

鸿蒙星河版学习：

• 鸿蒙星河版笔记来袭！开发环境准备到基础函数的学习
• 鸿蒙星河版笔记来袭！对象、联合类型、枚举类型学
• 鸿蒙星河版笔记来袭！界面开发、组件的属性和方法

一、设计资源-svg图标

需求：界面中展示图标→可以使用svg图标（任意放大缩小不失真，可以改颜色）

使用方式：

1.设计师提供：基于项目设计的图标，拷贝到项目目录使用

2.图标库中选取：找到合适图标资源→下载（svg）→拷贝使用

二、布局元素的组成

作用：在组件内添加间距，拉开内容与组件之间的距离

外边距margin

作用：在组件外添加间距，拉开两个组件之间的距离

案例QQ音乐登录

三、边框border

作用：给组件添加边界，进行装饰美化

四、设置组件圆角

属性：.borderRadius(参数)

参数：数值 或 对象 (四个角单独设置)

• topLeft：左上角
• topRight：右上角
• bottomLeft：左下角
• bottomRight：右下角

Text('圆角语法')
  .borderRadius(5) // 四个圆角相同
  .borderRadius({
    topLeft: 5,
    topRight: 10,
    bottomRight: 15,
    bottomLeft: 20
  }) // 四个方向圆角，单独设置

五、特殊形状的圆角设置

六、背景属性

属性：.backgroundImage(背景图地址)

Text()
  .backgroundImage($r('app.media.flower'))

属性：.backgroundImage(背景图地址, 背景图平铺方式-枚举ImageRepeat)

背景图平铺方式：（可省略）

• NoRepeat：不平铺，默认值
• X：水平平铺
• Y：垂直平铺
• XY：水平垂直均平铺

Text('我是文本')
  .backgroundImage($r('app.media.flower'), ImageRepeat.XY)

作用：调整背景图在组件内的显示位置，默认显示位置为组件左上角

属性：.backgroundImagePosition(坐标对象 或 枚举)

参数：

• 位置坐标： { x: 位置坐标, y: 位置坐标 } (单位下一节详细说)
• 枚举 Alignment

Text()
  .backgroundImage($r('app.media.flower'))
  .backgroundImagePosition({ x: 100, y:100 })
  .backgroundImagePosition(Alignment.Center)

单位问题

背景定位默认单位 → px：实际的物理像素点，设备出厂，就定好了【分辨率单位】

宽高默认单位 → vp：虚拟像素，相对于不同的设备会自动转换，保证不同设备视觉一致 （推荐）

函数：vp2px(数值) 将vp进行转换，得到px的数值

属性方法

• 背景色 backgroundColor
• 背景图 backgroundImage
• 背景图位置 backgroundImagePosition
• 背景图尺寸 backgroundImag

作用：背景图缩放

属性：.backgroundImageSize(宽高对象 或 枚举)

参数：

• 背景图宽高：{ width: 尺寸, height: 尺寸 }
• 枚举 ImageSize：
  Contain：等比例缩放背景图，当宽或高与组件尺寸相同停止缩放
  Cover：等比例缩放背景图至图片完全覆盖组件范围
  Auto：默认，原图尺寸

Text()
 .backgroundImage($r('app.media.flower'))
 .backgroundImageSize({ width: 250, height: 100 })
 .backgroundImageSize(ImageSize.Cover)

六、线性布局

线性布局（LinearLayout）通过线性容器 Column 和 Row 创建。

Column 容器：子元素 垂直方向 排列

Row 容器：子元素 水平方向 排列

属性：.justifyContent(枚举FlexAlign) (Row 组件的 justifyContent 属性效果相似)

案例个人中心 – 顶部导航

实现分析：

1、横向布局 Row 组件

2、排布方向水平往右 （主轴）

3、在主轴上两端对齐 spaceBetween

属性：alignItems()

参数：枚举类型

• 交叉轴在水平方向：HorizontalAlign
• 交叉轴在垂直方向：VerticalAlign