很久没写博客了,最近入坑了鸿蒙HarmonyOS 4.0,ArkTs!

发布时间 2024-01-04 16:36:16作者: 鹿lu

简单记录一些小笔记:

// @Component表示自定义组件,
// @Entry表示该自定义组件为入口组件,
// @State表示组件中的状态变量,状态变量变化会触发UI刷新。
// 不加 @State 装饰器的话,也可以改值,但是视图不会变,从而达不到双向绑定的效果
// test:string = 'hello word'
// @Prop 不能够初始化
// @Link 不能在组件内部初始化

// 右键-new新建页面
// page 会自动在resources/base/profile/main_pages.json里面添加该路径
// 而新建 ArkTs File 则不会

// build{} 就相当于vue中的 <template>,它里面的根节点只能有一个
// 不加外面这层的话,写两个Test()就会报错

// @Prop value:string;  // 不需要初始值
// @State value:string = '';  // 需要初始值

// export default struct Title { }
// 加 default 和不加的区别,加的话外面引用不需要花括号{}

 

踩到的坑:

1,ArkUi 提供的布局方式有很多,Column,Row,RelativeContainer 相对定位,Stack堆叠,弹性布局Flex等等...

但是相比较于前端css还是略有差别,Flex感觉不如css的好用

没有了绝对定位,增加了Stack堆叠布局,毕竟是手机app,手机屏幕,平板等大小也各不相同,布局大多使用百分比,和居中居左居右就可以满足了,不需要绝对定位到多少像素

没有了float浮动,这个css很常用的局部方式,少了之后开始写起来总感觉怪怪的,两个盒子一个靠左一个靠右就需要 justify-content:space-between 或者其他拐方法,而官方不推荐使用Flex(会造成二次渲染),好在Row和Column提供了这些属性可以直接使用,还是需要习惯后才能写起来行如流水。

2,正常的我们完全不需要考虑div里内容纵向排列超出后的滚动条,因为他会自动出现,而在ArkUi里,Column是不支持滚动的,超出后就真的被“挤”没了,如果要滚动,则需要设置父盒子为 Scroll ,  List , Grid 等支持滚动的组件,这里有个坑,就是如果出现 滚动元素嵌套的情况,则会出现两个滚动条“不和谐”的情况,影响体验,论坛看了好多人有同样的问题,有使用禁用滚动事件等解决方法试了之后体验也不是很良好,期待后续官方更新吧。。

3,对于build{}组件内部,ForEach循环输出的必须为组件,想要写一些处理方法还需要去外部单独定义

4,还有很多忘了等想起来再补充。。。