文章目录
- 第一个页面布局(xml编写)
- 第二个页面布局(java编写)
- 页面跳转实现
实现步骤:
①:编写第一个页面(文本+按钮) xml编写
②:编写第二个页面(文本) java 编写
③:给按钮添加一个跳转
设计思路:
第一步:在第一个界面中把HelloWorld改写为第一个界面,并添加一个按钮。
第二步:写第二个界面
第三步:书写跳转关系
鸿蒙UI中,提供了两种编写布局的方式:
在XML中声明UI布局
在代码中创建布局
这两种方式创建出的布局没有本质差别,但是XML方式较为方便简单,以后开发中,也都是用XML布局的方式。
但是这两种方式都需要我们熟悉。所以,所以我们将通过XML的方式布局第一张页面,然后再通过代码的方式布局第二张页面。
![『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区 『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区](https://dl-harmonyos.51cto.com/images/202212/d15ca7397b765f681be52628e1bb4dccbad18e.png)
![『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区 『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区](https://dl-harmonyos.51cto.com/images/202212/d40477381c02faf7ce9100a4d4818a3628155f.png)
- 第一个页面布局(xml编写)
打开layout下面的“ability_main.xml”文件
在“ability_main.xml”文件中创建一个文本Text和一个按钮Button
xml 编写
match-context 相当于 安卓中的 wrap_content
![『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区 『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区](https://dl-harmonyos.51cto.com/images/202212/599a8f4622a0beef3dd06612bb23a5f3efef2f.png)
![『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区 『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区](https://dl-harmonyos.51cto.com/images/202212/f6f20428727fc0bb5ea4968e9a3e1932920df6.png)
2. 第二个页面布局(java编写)
![『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区 『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区](https://dl-harmonyos.51cto.com/images/202212/79db7b49541314ba3ee6859fb01b31394b3211.png)
![『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区 『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区](https://dl-harmonyos.51cto.com/images/202212/28dd53497d46d38f084920f0a6f99b61e78340.png)
![『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区 『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区](https://dl-harmonyos.51cto.com/images/202212/87d5b69798b00f36a39788f99e8bc9fb04649a.png)
![『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区 『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区](https://dl-harmonyos.51cto.com/images/202212/63ca2ba0489a2bb6f191382e11a6b63d22f70e.png)
![『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区 『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区](https://dl-harmonyos.51cto.com/images/202212/c3439bc5506300a4b9f06861dc77d8302f8261.png)
- 删除 layout 下的
ability_second.xml
- 注释掉报错的这段:
![『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区 『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区](https://dl-harmonyos.51cto.com/images/202212/88c38d7853cc2d8c37c077c71532259235f188.png)
DirectionalLayout
布局从上往下
![『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区 『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区](https://dl-harmonyos.51cto.com/images/202212/13cbcf453d7c98b883d08394050c9221f88b11.png)
SecondAbilitySlice
![『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区 『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区](https://dl-harmonyos.51cto.com/images/202212/b586d6169c18c580c73453413b44d07810908a.png)
- 页面跳转实现
![『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区 『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区](https://dl-harmonyos.51cto.com/images/202212/a5f00ba25bb944dc1f8797b124b6709ba00983.png)
![『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区 『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区](https://dl-harmonyos.51cto.com/images/202212/5744ba164da3f433633395092ec191cd41c6e0.png)
![『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区 『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区](https://dl-harmonyos.51cto.com/images/202212/92f639a74581ac9c1570287ade5a7cd3c1345a.png)
然后跳转到第二个界面
![『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区 『牛角书』鸿蒙—页面跳转-鸿蒙开发者社区](https://dl-harmonyos.51cto.com/images/202212/d51a7f401d0dd6d23a735427b9e8275b32ce25.png)
声明:本文为博主「兮动人」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_41684621/article/details/118878483