【鸿蒙开发从0到1 day09】

一 .设计资源-图标库

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：从左上 到 右下

2.径向渐变

属性：radialGradient()

• center: 径向渐变的中心点坐标,
• radius: 径向渐变的半径,
• colors: [[颜色1, 颜色1所处位置], [颜色2, 颜色2所处位置], …],
• repeating?: 是否重复着色
  

五.阴影

作用：为组件添加阴影效果
属性：shadow()
参数：{}
参数写法
{
radius: 模糊半径,
type?: 阴影类型,
color: 阴影颜色,
offsetX?: X轴偏移,
offsetY?: Y轴偏移,
fill?: 是否内部填充
}

六.可选择链操作符(?)

就是我们在创建对象前创建的接口,如果接口属性需要根据情况去选择填和不填,那么我们就可以在属性名的后面加一个?,这样在创建对象的时候就可以选择不写这个属性,不会强行要求必填

七.总结

本章主要学习了ArkUI中的布局属性,内外边距,边框及边框圆角,背景属性包含背景颜色,背景图片,颜色渐变中的线性渐变和径向渐变,以及阴影效果的设置,最后还解释了我们传入对象时候,为什么有些属性可以选填