联系于不同的开辟会自动鼎新IOS

一、策画资源-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交叉轴在垂直标的：VerticalAlignIOS