【OpenHarmony】通过arkTS开发构建第一个页面
开发 通过 构建 页面 第一个 OpenHarmony
2023-09-14 09:14:31 时间
目录
构建第一个页面
使用文本组件。 工程同步完成后,在“Project”窗口,点击“entry > src > main > ets > MainAbility > pages”,打开“index.ets”文件,可以看到页面由Text组件组成。“index.ets”文件的示例如下:
// index.ets
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
.height('100%')
}
}
添加按钮。 在默认页面基础上,我们添加一个Button组件,作为按钮响应用户点击,从而实现跳转到另一个页面。“index.ets”文件的示例如下:
// index.ets
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
// 添加按钮,以响应用户点击
Button() {
Text('Next')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
}
.width('100%')
}
.height('100%')
}
}
在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。第一个页面效果如下图所示:
相关文章
- 第三章 通过MyEclipse来开发Hibernate项目
- layui开发常用插件列表
- SAP UI5 应用开发教程之七十八 - 如何通过 url 保持 SAP UI5 搜索的状态,让其支持书签功能试读版
- 通过 SAP UI5 的 TypeScript 开发环境,来学习什么是 DefinitelyTyped
- SAP成都研究院小伙伴们开发的一个SAP C4C POC - 通过名片扫描的方式录入联系人数据到系统
- SAP UI5 本地开发如何通过 http-proxy 解决跨域问题
- SAP UI5 应用开发教程之五十七 - 基于 OData 注解的 Smart Field 使用方法学习试读版
- 阿里、腾讯裁员,2022金三银四Android开发该何去何从?
- 基于CameraHal3的HDMI IN开发指南
- 微搭低代码开发视频播放小程序
- Android音视频开发(一):通过三种方式绘制图片
- 【Python3网络爬虫开发实战】1.3.1-lxml的安装
- 【Android 逆向】Android 进程注入工具开发 ( 注入代码分析 | 获取注入的 libbridge.so 动态库中的 load 函数地址 并 通过 远程调用 执行该函数 )
- Servlet课程0424(三) 通过继承HttpServlet来开发Servlet
- Servlet课程0424(一) 通过实现Servlet接口来开发Servlet
- android开发之Animations的使用(二)
- LabVIEW编程LabVIEW开发LAMBDA GEN750W电源例程与相关资料
- LabVIEW编程LabVIEW开发 常用运动控制器比较
- Zynq开发-通过寄存器读写调用HLS IP核
- 测试开发 | 软件测试最常用的 SQL 命令 :通过实例掌握基本查询、条件查询、聚合查询
- Java开发之高并发必备篇(六)——Lock和ReentrantLock(2)
- 字节跳动游戏开发岗题目
- java开发常用代码
- 通过Hadoop安全部署经验总结,开发出以下十大建议,以确保大型和复杂多样环境下的数据信息安全。
- Owin学习笔记(二) 中间件开发
- 【独自开】--开发出属于自己的一套专属系统
- android外设开发实战智能家居系统
- 应用开发通过nfs来mount失败解决办法mount.nfs: Connection timed out