#DAYU200体验官# App启动页 原创 精华
1. 环境
开发板:DAYU200
系统版本:OpenHarmony 3.2.2.3
SDK版本:ohos-sdk 3.2.2.3
开发工具:DevEco Studio 3.0.0.900(For OpenHarmony)
2. 知识要点及示例图
3. 知识点简要
3.1 堆叠容器(Stack)
堆叠容器,即将子组件叠放在一起,后入先呈现的方式在UI中展示。可以理解为在箱子中装东西,最后放入箱子的在最上层。 使用场景如首页读秒跳转、页面悬浮按钮等。
简单示例(stackSimple.ets
)
详细参见:
Stack
堆叠容器组件
3.2 弹性布局容器(Flex)
弹性布局容器也可称为弹性盒子,并提供了两根轴线,分别为主轴和交叉轴,主轴的方向由direction
属性设置,交叉轴始终垂直于主轴。使用场景相对较多,如列表展示、布局划分等。
简单示例(flexSimple.ets
)
layoutWeight
容器尺寸确定时,元素与兄弟节点主轴布局尺寸按照权重进行分配,忽略本身尺寸设置。仅在Row
/Column
/Flex
布局中生效。
详细参见:
Flex
弹性布局组件
3.3 路径绘制组件(Path)
路径绘制组件是在固定的区域通过起点、途经点、结束点通过线条连接起来构成一个图形。形如你早上跑步,从家门口开始,绕着小区跑一圈,那么你所经过的路线构成一个不规则的圆形。使用场景绘制icon图形。
简单示例(pathSimple.ets
)
- 若要实现类似SVG效果的图,需要了解
Shape
绘制组件的父组件
详细参见:
Path
路径绘制组件
3.4 沿垂直方向布局容器(Column)
沿垂直方向布局的容器,即通过设置属性使其子组件在垂直方向显示。使用场景如内容列表、聊天列表等。
简单示例(columnSimple.ets
)
详细参见:
Column
沿垂直方向布局容器
3.5 文本组件(Text)
文本组件是App中最常见的用于呈现信息的组件。常用场景如用户昵称、内容列表中文本信息、文章内容信息等。
简单示例(textSimple.ets
)
详细参见:
Text
文本组件
3.6 路由(Router)
路由是页面间跳转常用的API,需要在页面中导入路由模块import router from '@ohos.router'
,常用router.push
来做应用内跳转到指定页面。
简单示例(routerSimple.ets
)
- 注意:跳转页面必须是在
config.json
的js
->pages
中配置的页面。
详细参见:
Router
路由
3.7 定时器(setInterval)
setInterval
重复调用一个函数,在每次调用之间具有固定的时间延迟。使用场景3秒后跳转页面。
简单示例(intervalSimple.ets
)
详细参见:
setInterval
定时器
4 启动页实现
利用第3小结介绍的容器、组件及API,完成启动页,根据第2小结可知启动页由Logo、文本、以及跳过读秒组成。核心代码如下:
演示效果见: OpenHarmony App启动页及欢迎页
666
真厉害