序言：
随着国家政府的支持，越来越多的高校把安卓课程替换为鸿蒙开发课程，目前已有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)
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
