属性
1.1.设计资源-svg图标
需求：界面中展示图标→可以使用的svg图标(任意放大缩小不失真、可以改变颜色)
使用方式：
①设计师提供：基于项目的图标，拷贝到项目目录使用
Image($r('app.media.ic_dianpu'))
.width(40)
fillColor('#b0473d')②图标库中选取：找合适的图标资源 → 下载svg →拷贝使用
地址：https://developer.huawei.com/consumer/cn/design/harmonyos-icon/
示例
@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {
Column(){//特点：1、任意放大缩小不失真//2、可以修改颜色Image($r("app.media.ic_public_add_filled")).width(200).fillColor(Color.Red)
}}
}1.2.布局元素的组成
1.2.1.内边距padding
作用：在组件内添加间距，拉开内容与组件边缘之间的距离
Text('内边距padding')
.padding(20)//四个方向内边距均为20
//Text ('内边距padding')
.padding({top:10,right:20,bottom:40,left:80
})//四个方向内边距分别设置示例
@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column(){Text('Alika').backgroundColor(Color.Pink).padding({left:10,top:30,right:5,bottom:30})}}
}运行效果
1.2.2.外边距margin
作用：在组件外添加间距，拉开两个组件之间的距离
案例
@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column(){Row(){Text('刘备').backgroundColor(Color.Orange)Text('关羽').backgroundColor(Color.Pink)//.margin(30)//一次性设置四个方向的margin外边距.margin({left:30,top:10})Text('张飞').backgroundColor(Color.Green)}Column(){Text('刘备').backgroundColor(Color.Orange)Text('关羽').backgroundColor(Color.Pink)//.margin(30)//一次性设置四个方向的margin外边距.margin({left:30,top:50})Text('张飞').backgroundColor(Color.Green)}}}运行结果
1.3.QQ音乐--登录案例
@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column() {Image($r('app.media.tomato')).width(100)Text('一颗西红柿').fontSize(30).margin({bottom:50})Button('QQ登录').width('100%').margin({bottom:20})Button('微信登录').width('100%').backgroundColor('#ddd').fontColor('#000')}.width('100%').padding(30)}
}运行效果
1.4.边框border
作用：给组件添加边界，进行装饰美化。
Text('边框语法').border({width:1, //宽度（必须设置）color:'#3274f6',//颜色style:BorderStyle.solid//样式
}) //四个方向相同
//Text('边框语法').border({width:{left:1,right:2
},color:{left:Color.Red,right:Color.Blur
},
style:{left:BorderStyle.Dashed,right:BorderStyle.Dotted
}
})//top、right、bottom、left示例：
@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column() {Text('待完善').padding(5).margin(10).border({width:1,//宽度（必须）color:Color.Red,//颜色style:BorderStyle.Dotted//点线})Text('单边框').padding(5).margin(15).border({width:{top:2,bottom:3,right:20},color:{left:Color.Red,right:Color.Green},style:{left:BorderStyle.Dotted,right:BorderStyle.Solid}})运行效果：
1.5.设置组件圆角
属性：.borderRadius（参数）
参数：数值或对象（四个角单独设置）
topLeft：左上角
topRight：右上角
bottomLeft：左下角
bottomRight：右下角Text('圆角语法')
.borderRadius(5)//四个圆角相同
.borderRadius({topLeft：5topRight：10bottomLeft：15bottomRight：20
})//四个方向圆角，单独设置示例：
@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column() {Text('没有圆角').width(100).height(60).backgroundColor(Color.Pink).margin(20)//添加圆角：//1、.borderRadius(数值)四个角圆角相同//2、.borderRadius({方位词：值})单独个某个角设置圆角Text('添加圆角').width(100).height(60).backgroundColor(Color.Orange).margin(20).borderRadius({topLeft:20,bottomLeft:10,topRight:40,bottomRight:30})}}
}运行效果
1.6.特殊形状的圆角设置
1.6.1.正圆
Text('正圆')
.width(100) //宽高一样
.height(100)
.borderRadius(50)//圆角是宽或高的一半1.6.2.胶囊按钮（左右半圆）
Text('胶囊按钮')
.width(150) //宽大高小
.height(50)
.borderRadius(25)//圆角是高的一半示例
@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column() {//1、正圆(一般用于头像)Image($r('app.media.tomato')).width(100).height(100).borderRadius(50)//2、胶囊按钮Text('今天要来个西红柿嘛').height(50).width(150).borderRadius(25).backgroundColor(Color.Pink)}.padding(20)}
}运行效果
1.7.背景属性
| 属性方法 | 属性 |
| 背景图 | backgroundColor |
| 背景色 | backgroundImage |
| 背景图位置 | backgroundImagePostition |
| 背景图尺寸 | backgroundImageSize |
1.7.1.背景图
属性：.backgroundImage(背景图地址，背景图平铺方式-枚举ImageRepeat)Text().backgroundImage($r('app.media.image'))背景图平铺方式：（可省略）
- NoRepeat：不平铺，默认值
- X：水平平铺
- Y：垂直平铺
- XY：水平垂直平铺
示例
@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column() {Text('今天吃点什么腻~~').width(200).height(500).backgroundColor(Color.Pink)//backgroundImage(加载的背景图片，是否平铺ImageRepeat枚举).backgroundImage($r('app.media.kitchen'),ImageRepeat.Y)}.padding(20)}
}1.7.2.背景图位置
作用：调整背景图在组件内的显示位置，默认显示位置为组件左上角
属性：.backgroundImagePosition（坐标对象或枚举）
参数：
- 位置坐标：{ x : 位置坐标, y : 位置坐标 }
- 枚举：Alignment
@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column() {Text('今天吃点什么腻~~').width(200).height(200).backgroundColor(Color.Pink)//backgroundImage(加载的背景图片，是否平铺ImageRepeat枚举).backgroundImage($r('app.media.tomato'),ImageRepeat.Y)//.backgroundImagePosition({x : 100, y : 100}).backgroundImagePosition(Alignment.Center)}.padding(20)}
}1.7.3.背景定位
背景图位置的单位问题：
背景定位默认的单位→px：实际的物理像素点，设置出厂，就定好了【分辨率单位】
宽高默认单位→vp：虚拟像素，相对不同的设备会自动转换，保证不同设备视觉一致（推荐）
函数：vp2px(数值)将vp进行转换，得到px的数值
.backgroundImagePosition({x : vp2px(2), y : vp2px(2)})1.7.4.背景尺寸
作用：背景图缩放
属性：.backgroundImageSize(宽高对象 或 枚举)
参数：
- 背景图宽高：{ width : 尺寸, height : 尺寸}
- 枚举ImageSize:
- Contain：等比例缩放背景图，当宽或高与组件尺寸相同时停止缩放
- Cover：等比例缩放背景图至图片完全覆盖组件范围
- Auto：默认，原图尺寸
.backgroundImageSize(ImageSize.Contain)
