文章目录
鸿蒙开发文档
一、css及资源引入
1. image 如何加载图片资源
2. 文本溢出省略号…
注意需要配合 .maxlines(X)使用
3.input输入框与button
代码效果
如何调整组件之间的距离? 给外层容器组件加{ space:数字}
4.Column自带居中能力只需要添加宽度100%即可实现居中
5.svg图标资源介绍
通过fillColor(颜色)修改图标颜色代码示例如下,
6.border 边框设置
7.设置组件圆角
8.特殊形状的圆角设置
9.背景属性
示例:
二、页面布局
1.row组件两端对齐
demo
2.交叉轴对齐方式
demo
3.列表项布局 左右布局
demo
4.自适应伸缩布局
demo
5. flex弹性布局
换行布局
demo
案例
三、层叠布局(弹窗等。。。)
1.层叠布局 Stack容器
1.层叠布局 Stack 容器内的子元素的顺序为Item1->Item2->Item3 越往后层级越高,当然zIndex()也是可以修改层级的
demo
code
上难度 支付宝demo
案例底部布局解析
上代码
底部布局 :利用layoutWeight(1) 等份 将来需要增加或者删除模块 也不会影响布局
利用`alignContent:Alignment.Bottom`底部对齐
@Entry
@Component
struct Index {
build() {
Stack({alignContent:Alignment.Bottom}){
Stack({alignContent:Alignment.Top}){
// 头部菜单
Row() {
// 左边
Column() {
Text('北京').fontSize(18).fontColor('#fff')
Text('晴 2°C').fontSize(12).fontColor('#fff')
}
//中间
Row(){
TextInput({placeholder:'支付宝搜索'}).layoutWeight(1).backgroundColor('#fff')
Text('搜索')
.width(60)
.fontColor('blue')
.fontSize(14)
.textAlign(TextAlign.Center)
.border({
width:{left:1}
})
}
.backgroundColor('#fff')
.layoutWeight(1)
.height('auto')
.borderRadius(20)
// 右边
Column() {
Text('+')
.width(30)
.height(30)
.fontSize(18)
.fontColor('#fff')
.border({width:1})
.borderColor('#fff')
.borderRadius('50')
.textAlign(TextAlign.Center)
}
}
.height(60)
.width('100%')
.zIndex(2)
.padding(10)
.backgroundColor('#5b73de')
//主体内容
Scroll(){
Column(){
//Top快捷键盘
Row(){
Column(){
Image($r('app.media.sys_icon')).width(35)
Text('扫一扫').fontColor('#fff')
}.layoutWeight(1)
Column(){
Image($r('app.media.sfk_icon')).width(35)
Text('收付款').fontColor('#fff')
}.layoutWeight(1)
Column(){
Image($r('app.media.cx_icon')).width(35)
Text('出行').fontColor('#fff')
}.layoutWeight(1)
Column(){
Image($r('app.media.kb_icon')).width(35)
Text('卡包').fontColor('#fff')
}.layoutWeight(1)
}
.width('100%')
.height(80)
.backgroundColor('#5b73de')
Text('6666').height(300)
Text('6666').height(300)
Text('6666').height(300)
Text('6666').height(300)
Text('6666').height(300)
Text('6666').height(300)
Text('6666').height(300)
Text('6666').height(300)
Text('6666').height(300)
Text('6666').height(300)
Text('6666').height(300)
}
}.width('100%')
.padding({top:60})
}
.width('100%')
.height('100%')
//底部菜单
Row(){
Column(){
Image($r('app.media.zfb_icon')).width(35)
}.layoutWeight(1)
Column(){
Image($r('app.media.lc_icon')).width(35)
Text('理财')
}.layoutWeight(1)
Column(){
Image($r('app.media.life_icon')).width(35)
Text('生活')
}.layoutWeight(1)
Column(){
Image($r('app.media.msg_icon')).width(35)
Text('消息')
}.layoutWeight(1)
Column(){
Image($r('app.media.my_icon')).width(35)
Text('我的')
}.layoutWeight(1)
}
.width('100%')
.height(60)
.backgroundColor('#fbfcfe')
}
.width('100%')
.height('100%')
.backgroundColor('#ccc')
}
}
四、其他
1.类型转换
2.交互点击事件
3.状态管理![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/cc53d94c6af0459fa01bb176b86c7248.png)
4.forEch渲染和右上角图标
测试案例 Stack 层叠布局一个生肖卡
5. 动画展示图片
6. Swiper 轮播组件的基本使用
7. 图片等比显示 aspectRatio()
8. Scroll 组件配置及使用
测试案例:
9. tabBar的使用 (默认自带左右切换效果)
barMode属性,可以实现滚动导航栏
Tabs高级写法 组件结构复用
五、路由
1. 鸿蒙路由配置
在页面中导入路由这两种都可以
2.路由-页面跳转与后退
首先支持路由跳转的页面创建方式
第一种手动创建页面的需要手动添加 路径 如下图
第二种方式自动创建页面
3. 获取页面的栈层router.getLength()
比如 A跳转到B 再跳转到C ,在C页面调用router.getLength()值为3
### 4.路由的两种模式
Standard
Single
5. 路由传参
在接收页数据demo
七、应用配置信息(桌面图标等)
1. 鸿蒙开发配置文件–目录概览
2. 应用管理–应用信息设置
3. 手机桌面–应用信息
八、Stage模型UIAbility组件【单任务列表/多任务列表】
1. 什么是多线程
比如你在微信中聊天 突然打开一个小程序 然后查看手机进程 如果一个软件有多个那就是多进程 (目前小编看下来 只有安卓有 苹果看不出来)
进程之间是可以相互跳转的
2. UIAbility组件可以是单个任务列表或多个任务列表
3. 启动页想用哪个就设置哪个,但启动时只能有一个主页面
4.鸿蒙开发日志管理–hislog.info()
5. 如何启用多线程呢