属性
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：5
topRight：10
bottomLeft：15
bottomRight：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)
