序言:
随着国家政府的支持,越来越多的高校把安卓课程替换为鸿蒙开发课程,目前已有23家985高校、46家211高校已开设或即将开设HarmonyOS相关课程。未来IOS、安卓、鸿蒙大有三分天下的局势。
作为软件工程系学生,或许鸿蒙开发语言并不像Java、C++这种经典的编程语言可以直接找到如单独使用Java语言工作的开发岗位,但技多不压身,鸿蒙开发语言的火热是大势所趋,学会鸿蒙至少可以起到锦上添花的作用。
笔者也是跟着B站黑马的课程一步步学习,学习的过程中添加部分自己的想法整理为笔记分享出来,如有代码错误或笔误,欢迎指正。
B站黑马的课程链接:鸿蒙课程介绍_哔哩哔哩_bilibili
往期笔记:
【01】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-ArkTs基础语法与界面开发基础-CSDN博客
目录
一.设计资源-svg图标
需求:界面中展示图标→可以使用svg图标(任意放大缩小不失真,可以改颜色)
使用方法:
1.设计师提供:基于项目涉及的图标,拷贝到项目目录使用
2.图标库中选取:找到合适的图标资源→下载(svg)→拷贝使用
官方图标库地址:设计资源-HarmonyOS设计-开发者联盟
使用案例:
build() {
Column(){
//特点
//1.任意放大缩小不失真
//2.可以修改颜色
Image($r('app.media.ic_late'))
.width(200) //修改大小
.fillColor(Color.Blue) //修改颜色
Image($r('app.media.icon'))
.width(50)
}
}
二.布局元素的组成
1.内边距padding
作用:在组件内添加间距,拉开内容与组件边缘之间的距离
build() {
Column(){
Text('小龙女')
.backgroundColor(Color.Pink)
.padding(20)
Text('小蜗牛')
.backgroundColor(Color.Brown)
.padding({
left:20,
top:30,
right:5,
bottom:30
})
}
}
2.外边距margin
作用:在组件外添加间距,拉开两个组件之间的距离
build() {
Column(){
Row(){
Text('刘备')
.backgroundColor(Color.Orange)
Text('关羽')
.backgroundColor(Color.Green)
//.margin(30) 一次性设置四个方向的margin外边距
.margin({
left:30,
right:50
})
Text('张飞')
.backgroundColor(Color.Pink)
}
}
}
3.边框border
作用:给组件添加边界,进行装饰美化
build() {
Column() {
Text('边框语法')
.padding(5)
.border({
width: 1, //宽度(必须设置)
color: '#3274f6', //颜色
style: BorderStyle.Solid //样式
}) //四个方向相同
Text('边框语法2')
.padding(10)
.border({
width: {
left: 1, right: 2
},
color: {
left: Color.Red, right: Color.Blue
},
style: {
left: BorderStyle.Dashed,
right: BorderStyle.Dotted
}
})
.margin({
top:20
})
}
.padding(20)
}
4.设置组件圆角
属性: .borderRadius(参数)
build() {
Column(){
Text('没有圆角')
.width(100)
.height(60)
.backgroundColor(Color.Pink)
.margin({bottom:30})
Text('添加圆角')
.width(100)
.height(60)
.backgroundColor(Color.Orange)
/* 添加圆角:
.borderRadius(数值)四个圆角值相同
.borderRadius({
topLeft:10,
topRight:20,
bottomRight:30,
bottomLeft:40
})*/
.borderRadius(15)
}
.width('100%')
.padding(20)
}
特殊形状的圆角设置
①正圆
②胶囊按钮(左右半圆)
//1.正圆
Text('正圆头像')
Image($r('app.media.cat'))
.width(100)
.height(100)
.borderRadius(50)
.margin({bottom:20})
//2.胶囊按钮
Text('今天还没打卡哟')
.width(150)
.height(50)
.borderRadius(25)
.backgroundColor(Color.Green)
.padding(10)
}
5.背景属性
属性方法 | 属性 |
背景色 | backgroundColor |
背景图 | backgroundImage |
背景图位置 | backgroundImagePosition |
背景图尺寸 | backgroundImageSize |
Column(){
Text('我是一朵小花')
.padding(70)
.fontColor(Color.White)
.width(250)
.height(100)
.backgroundColor(Color.Pink)
.backgroundImage($r('app.media.flower'))
.margin({bottom:100})
Text('我是一群小花')
.padding(70)
.fontWeight(FontWeight.Bolder)
.fontSize(18)
.fontColor(Color.White)
.width(250)
.height(100)
.backgroundColor(Color.Pink)
// .backgroundImage中可以添加第二个参数决定是否平铺,甚至可以通过添加X、Y、XY来选择横向、纵向、横纵的平铺方式
.backgroundImage($r('app.media.flower'),ImageRepeat.XY)
}
.padding(20)
关于.backgroundImagePosition(Alignment.xxx)
Alignment枚举可以设置一些特殊的位置(中央、左顶点...)
如Center中心 TopStart左顶点 TopEnd右顶点 BottomEnd右下...
Column(){
Text('我是一朵在中间的小花')
Text()
.fontColor(Color.White)
.width(250)
.height(100)
.backgroundColor(Color.Pink)
.backgroundImage($r('app.media.flower'))
//.backgroundImagePosition({x:100,y:100})
.backgroundImagePosition(Alignment.Center)
.margin({bottom:100})
}
.padding(20)
tip:单位问题:
背景定位默认单位→px:实际的物理像素点,设备出厂,就定好了【分辨率单位】
宽高默认单位→vp:虚拟像素,相对于不同的设备会自动转换,保证不同设备视觉一致(推荐)
函数:vp2pv(数值)→将vp进行转换,得到px的数值
关于.backgroundImageSize
作用:背景图缩放
语法:
.backgroundImageSize(宽高对象 或 枚举)
参数:
①背景图宽高:{width:尺寸,height:尺寸}
②枚举ImageSize:
Contain:等比例缩放背景图,当宽或高与组件尺寸相同停止缩放
Cover:等比例缩放背景图至图片完全覆盖组件范围
Auto:默认,原图尺寸
build() {
Column(){
Text()
.width(300)
.height(200)
.backgroundColor(Color.Pink)
.backgroundImage($r('app.media.bz_img'))
.backgroundImagePosition(Alignment.Center)
/*
1.直接写 宽高尺寸 对象 (不常用)
.backgroundImageSize({
width:150
})
*/
//2.设置背景尺寸的枚举ImageSize
.backgroundImageSize(ImageSize.Contain)
}
}
三.线性布局
线性布局通过线性容器Column和Row创建。
→Column容器:子元素垂直方向排列
→Row容器:子元素水平方向排列
1.排布主方向上的对齐方式(主轴)
属性:.justifyContent(枚举FlexAlign) 【Row组件的justifyContent属性效果类似】
build() {
Column(){
Text()
.width(200) .height(100)
.backgroundColor(Color.Pink)
.border({width:2})
Text()
.width(200) .height(100)
.backgroundColor(Color.Pink)
.border({width:2})
.margin(5)
Text()
.width(200) .height(100)
.backgroundColor(Color.Pink)
.border({width:2})
}
.width('100%') .height('100%')
.backgroundColor('#ccc')
//设置排布主方向的对齐方式(主轴)
.justifyContent(FlexAlign.Center)
}
2.交叉轴对齐方式
属性:alignItems()
参数:枚举类型
→交叉轴在水平方向:HorizontalAlign
→交叉轴在垂直方向:VerticalAlign
build() {
Column(){
Text()
.width(200) .height(100)
.backgroundColor(Color.Pink)
.border({width:2})
Text()
.width(200) .height(100)
.backgroundColor(Color.Pink)
.border({width:2})
.margin({top:5,bottom:5})
Text()
.width(200) .height(100)
.backgroundColor(Color.Pink)
.border({width:2})
}
.width('100%') .height('100%')
.backgroundColor('#ccc')
.alignItems(HorizontalAlign.End)
}
3.自适应伸缩
设置layoutWeight 属性的 子元素 与 兄弟元素,会 按照权重 进行分配 主轴 的空旷
语法:.layoutWeight(数字)
build() {
Column(){
//layoutWeight自适应伸缩
Row(){
Text('左侧')
.layoutWeight(1)
.height(40)
.backgroundColor(Color.Pink)
Text('右侧固定')
.height(40)
.backgroundColor(Color.Orange)
}
.width(300) .height(40)
.backgroundColor('#fff')
.margin({bottom:30})
Row(){
Text('刘备')
.layoutWeight(3)
.height(40)
.backgroundColor(Color.Pink)
Text('关羽')
.layoutWeight(2)
.height(40)
.backgroundColor(Color.Green)
Text('张飞')
.layoutWeight(1)
.height(40)
.backgroundColor(Color.Red)
}
.width(300) .height(40)
.backgroundColor('#fff')
}
.padding(10)
.width('100%') .height('100%')
.backgroundColor('#ccc')
}
四.案例01:QQ音乐-登陆
build() {
Column(){
Image($r('app.media.m_user'))
.width(100)
Text('大王叫我来巡山')
.fontWeight(700)
.margin({
top:10,
bottom:40
})
Button('QQ登陆')
.width('100%')
.margin({
bottom:20
})
Button('微信登录')
.width('100%')
.backgroundColor('#ddd')
.fontColor('#000')
}
.width('100%')
.padding(20)
}
五.案例02-个人中心-顶部导航
1.实现分析:
①横向布局Row组件
②排布方向水平往右(主轴)
③在主轴上两端对齐 spaceBetween
2.代码实现:
build() {
Column(){
Row(){
Image($r('app.media.ic_arrow_left'))
.width(30)
Text('个人中心')
Image($r('app.media.ic_more'))
.width(24)
}
.justifyContent(FlexAlign.SpaceBetween)
.width('100%') .height(40)
.backgroundColor(Color.Pink)
.padding({left:10,right:10})
}
.width('100%') .height('100%')
.backgroundColor('#ccc')
}
六.综合案例01-得物列表项
1.实现分析:
①整体 – 横向布局 Row
②Row 主轴,两端对齐
③内部子元素,一个列,一个行
④列的内容居左显示 alignItems(...)
2.代码实现:
build() {
Column(){
Row(){
//左侧列
Column(){
Text('玩一玩')
.fontSize(18)
.fontSize(FontWeight.Bolder)
Text('签到兑礼|超多大奖 超好玩')
.fontSize(12)
.fontColor('#999')
}
.alignItems(HorizontalAlign.Start)
//右侧行
Row(){
Image($r('app.media.tree'))
.width(50)
.backgroundColor('#efefef')
.borderRadius(5)
Image($r('app.media.ic_arrow_right'))
.width(30)
.fillColor('#999')
}
}
.padding({left:20,right:10})
.justifyContent(FlexAlign.SpaceBetween)
.width('100%') .height(80)
.backgroundColor('#fff')
.borderRadius(5)
}
.padding(10)
.width('100%') .height('100%')
.backgroundColor('#ccc')
}
七.综合案例02-京东登陆
→
1.思路分析:
①布局容器:整体从上往下 – Column
②布局背景:backgroundImage
③顶部:左右布局 – Row、SpaceBetween
④Logo:Image 图片
2.代码实现:
build() {
Column(){
//顶部区域
Row(){
Image($r('app.media.jd_cancel'))
.width(20)
.fillColor('#878787')
Text('帮助')
.fontColor('#878787')
}
.justifyContent(FlexAlign.SpaceBetween)
.width('100%') .height(40)
.padding({left:20,right:20})
//LOGO图标
Column(){
Image($r('app.media.jd_logo'))
.width(250)
}
//国家/地址 (自己画)
Row(){
Text('国家/地址')
.layoutWeight(1)
.height(40)
.fontSize(16)
.fontColor('#878787')
Text('中国(+86)')
.height(40)
.fontSize(16)
.fontColor('#878787')
Image($r('app.media.ic_arrow_right'))
.width(16)
.fillColor('#878787')
}
.backgroundColor(Color.White)
.width('90%') .height(40)
.padding({left:15,right:10})
.borderRadius(20)
.margin({bottom:20})
//输入框
TextInput({
placeholder:'请输入手机号'
})
.placeholderColor('#878787')
.backgroundColor(Color.White)
.width('90%') .height(40)
.borderRadius(20)
.margin({bottom:10})
//已阅读并同意
Row(){
Checkbox()
.width(10)
Text(){
Span('我已经阅读并同意')
Span('《京东隐私政策》')
.fontColor(Color.Blue)
Span('《京东用户服务协议》')
.fontColor(Color.Blue)
Span('未注册的手机号将自动创建京东账号')
}
.width('90%')
.fontSize(12)
.fontColor('#878787')
}
.alignItems(VerticalAlign.Top)
.width('90%')
//登陆
Row(){
Button('登陆')
.width('90%')
.margin({top:25})
.backgroundColor(Color.Red)
}
//新用户注册等链接
Row({space:25}){
Text('新用户注册').fontSize(14)
Text('账户密码登录').fontSize(14)
Text('无法登录').fontSize(14)
}
.margin({top:15})
//填充组件:作用:填充空白区域
Blank()
//其他登陆方式
Column(){
Row(){
Text('其他登陆方式')
.fontSize(14)
}
.padding({bottom:28})
Row(){
Image($r('app.media.jd_huawei'))
.width(34)
Image($r('app.media.jd_wechat'))
.width(34)
.fillColor('#56a44a')
Image($r('app.media.jd_weibo'))
.width(34)
.fillColor('#c8493b')
Image($r('app.media.jd_QQ'))
.width(34)
.fillColor('#4ba0e8')
}
.width('100%')
.justifyContent(FlexAlign.SpaceAround)
.margin({bottom:30})
}
.width('90%')
}
.width('100%') .height('100%')
.backgroundImage($r('app.media.jd_login_bg'))
.backgroundImageSize(ImageSize.Cover)
}