网站建设+廊坊,学历提升机构哪家好,购物小程序源码,咸宁网站建设哪家专业属性
1.1.设计资源-svg图标
需求#xff1a;界面中展示图标→可以使用的svg图标(任意放大缩小不失真、可以改变颜色)
使用方式#xff1a;
①设计师提供#xff1a;基于项目的图标#xff0c;拷贝到项目目录使用
Image($r(app.media.ic_dianpu))
.width(40)
fillColor…属性
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({topLeft5topRight10bottomLeft15bottomRight20
})//四个方向圆角单独设置
示例
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)
