HarmonyOS Next星河版笔记--界面开发（3）

属性

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)