【鸿蒙开发从0到1 day09】

鸿蒙开发基础-ArkUI基本布局

一 .设计资源-图标库
- - 1.阿里矢量图图标库
  - 2.HarmonyOS图标库
二.布局属性
- - 1.内边距
  - 2.外边距
  - 3.边框线
  - 4.边框圆角
三.背景属性
- - 1.背景颜色
  - 2.背景图片
  - - (1)背景图的缩放
    - (2)背景图的显示位置
四.颜色渐变
- - 1.线性渐变
  - 2.径向渐变
五.阴影
六.可选择链操作符(?)
七.总结

一 .设计资源-图标库

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

使用步骡∶设计师提供图标/下载图标→使用图标
我们一般下载都要下载svg格式的图标,因为这种图标放大后不会失真,而且可以改变颜色
下载地址

1.阿里矢量图图标库

阿里矢量图图标库

2.HarmonyOS图标库

HarmonyOS图标库

进入图标库网站，下载 SVG 格式，存储到工程目录：resources/base/media/
HarmonyOS 图标默认命名以 ic_ 开头，其他图标库下载的图标素材建议修改为与 HarmonyOS 命名规则相同。
svg的图标可以使用fillcolor来设置颜色

在这里插入图片描述

二.布局属性

在这里插入图片描述

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

1.内边距

作用:拉开内容和组件边缘的间距

一个取值,四周设置相同的内边距
传入对象,可以给每个方向传入不同的内边距(top,bottom,left,right)

2.外边距

作用：在组件外面添加间距，拉开两个组件之间的距离
属性：margin
属性：数字或对象{}
● 数字：上下左右边外距相同
● 对象{}：配合 left、right、top、bottom 单独设置某个方向外边距
在这里插入图片描述

3.边框线

属性：border()
参数：{width?: 数字, color?: ‘’, style?: BorderStyle}，
● width：边框宽度，边框宽度默认值为0，即不显示边框
● color：边框颜色
● style：边框样式，BorderStyle为枚举类型
○ Solid：实线（默认）
○ Dashed：虚线
○ Dotted：点线
在这里插入图片描述
ps:边框线粗细,颜色,样式可以给每个方向设置不同的,只需要给属性值传入对象,通过方位词设置对应的值,(left,top,bottom,right)

4.边框圆角

属性：borderRadius(圆角半径)
参数：数值或 { }
● topLeft：左上角
● topRight：右上角
● bottomLeft：左下角
● bottomRight：右下角
在这里插入图片描述

三.背景属性

在这里插入图片描述

1.背景颜色

backgroundColor()

枚举取值 Color.颜色例:Color.Pink
十六进制表示法例:#ffffff
rgba表示法例: rgba(0,0,0,透明度)颜色取值0~255
在设置背景色的时候,组件必须有宽度或者内容,背景色才能展现

2.背景图片

backgroundImage(背景图片地址,背景平铺方式)
背景图平铺方式：（可省略）
● NoRepeat：不平铺，默认值
● X：水平平铺
● Y：垂直平铺
● XY：水平垂直均平铺
在这里插入图片描述

(1)背景图的缩放

backgroundImageSize()
作用：背景图缩放
属性：backgroundImageSize
参数：
● 设置背景图宽高尺寸：{width: 数值, height: 数值}（只设置宽或高，另一个尺寸等比例缩放）
● 枚举 ImageSize：
○ Cover：等比例缩放背景图至图片完全覆盖组件范围,图片部分可能会超出组件
○ Contain：等比例缩放背景图，当宽或高与组件尺寸相同则停止缩放,组件可能会有留白的情况
○ Auto：默认，原图尺寸
在这里插入图片描述

(2)背景图的显示位置

作用：调整背景图在组件内的显示位置，默认显示位置为组件左上角
属性：backgroundImagePosition()
参数：
● 位置坐标： {x: 位置, y: 位置}
● 枚举 Alignment
在这里插入图片描述

四.颜色渐变

作用：设置组件颜色渐变效果
分类：线性渐变和径向渐变

1.线性渐变

属性: linearGradienrt()

● angle：线性渐变的起始角度。0点方向顺时针旋转为正向角度，默认值：180
● direction: 线性渐变的方向，设置 angle 后不生效，值为枚举类型 GradientDirection
○ Left：从右向左
○ Top：从下向上
○ Right：从左向右
○ Bottom：从上向下
○ LeftTop：从右下到左上
○ LeftBottom：从右上到左下
○ RightTop：从左下到右上
○ RightBottom：从左上到右下
在这里插入图片描述