鸿蒙星河版笔记来袭！布局元素、边框、圆角等附案例
赞
踩
鸿蒙星河版学习：
一、设计资源-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
