当前位置:主页 > 查看内容

鸿蒙HarmonyOS北向应用开发者 极速入门教程(一)续-实战练习篇2

发布时间:2021-07-10 00:00| 位朋友查看

简介:想了解更多内容,请访问: 51CTO和华为官方战略合作共建的鸿蒙技术社区 https://harmonyos.51cto.com/#zz Tablet 模拟器上的代码案例 新建项目选择模板进行下一步。 显示效果: 点击点击了解更多进入下一个页面 代码如下 第一个页面的布局 ?xmlversion= 1.0……

想了解更多内容,请访问:

51CTO和华为官方战略合作共建的鸿蒙技术社区

https://harmonyos.51cto.com/#zz

Tablet 模拟器上的代码案例

新建项目选择模板进行下一步。


显示效果:


点击“点击了解更多”进入下一个页面


代码如下

第一个页面的布局

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <DirectionalLayout 
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  4.     ohos:height="match_parent" 
  5.     ohos:width="match_parent" 
  6.     ohos:orientation="vertical"
  7.  
  8.     <DirectionalLayout 
  9.         ohos:width="match_parent" 
  10.         ohos:weight="1"
  11.         <Text 
  12.             ohos:width="match_content" 
  13.             ohos:height="match_content" 
  14.             ohos:text="蛟龙腾飞" 
  15.             ohos:text_size="40fp" 
  16.             ohos:top_margin="180px" 
  17.             ohos:left_margin="80px"/> 
  18.  
  19.     </DirectionalLayout> 
  20.     <DirectionalLayout 
  21.         ohos:width="match_parent" 
  22.         ohos:weight="4" 
  23.         ohos:orientation="horizontal"
  24.         <DirectionalLayout 
  25.             ohos:height="match_parent" 
  26.             ohos:weight="1"
  27.             <Image 
  28.                 ohos:width="600px" 
  29.                 ohos:height="600px" 
  30.                 ohos:top_margin="160px" 
  31.                 ohos:left_margin="100px" 
  32.                 ohos:image_src="$media:index6"/> 
  33.         </DirectionalLayout> 
  34.         <DirectionalLayout 
  35.             ohos:height="match_parent" 
  36.             ohos:weight="2"
  37.             <Text 
  38.                 ohos:width="match_content" 
  39.                 ohos:height="match_content" 
  40.                 ohos:multiple_lines="true" 
  41.                 ohos:text="带你从传统的互联网、移动互联网时代 
  42.                                跳转到万物互联的智能世界! 
  43.                                           马上创建体验个人、公司组织的鸿蒙应用吧!" 
  44.                 ohos:text_size="35fp" 
  45.                 ohos:top_margin="240px" 
  46.                 ohos:left_margin="60px"/> 
  47.             <Button 
  48.                 ohos:id="$+id:jltfbutton" 
  49.                 ohos:width="match_content" 
  50.                 ohos:height="match_content" 
  51.                 ohos:text="点击了解更多" 
  52.                 ohos:text_size="40fp" 
  53.                 ohos:top_margin="380px" 
  54.                 ohos:left_margin="1000px" 
  55.                 ohos:text_color="red"/> 
  56.         </DirectionalLayout> 
  57.  
  58.     </DirectionalLayout> 
  59.  
  60. </DirectionalLayout> 

第二个页面的布局

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <DirectionalLayout 
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  4.     ohos:height="match_parent" 
  5.     ohos:width="match_parent" 
  6.     ohos:orientation="vertical"
  7.  
  8.     <DirectionalLayout 
  9.         ohos:width="match_parent" 
  10.        ohos:weight="1" 
  11.         > 
  12.         <Text 
  13.             ohos:width="match_content" 
  14.             ohos:height="match_content" 
  15.             ohos:text="蛟龙腾飞" 
  16.             ohos:text_size="40fp" 
  17.             ohos:top_margin="180px" 
  18.             ohos:left_margin="80px"/> 
  19.  
  20.     </DirectionalLayout> 
  21.     <DirectionalLayout 
  22.         ohos:width="match_parent" 
  23.         ohos:weight="4" 
  24.         ohos:orientation="horizontal"
  25.         <DirectionalLayout 
  26.             ohos:height="match_parent" 
  27.             ohos:weight="1"
  28.             <Image 
  29.                 ohos:width="600px" 
  30.                 ohos:height="600px" 
  31.                 ohos:top_margin="60px" 
  32.                 ohos:left_margin="100px" 
  33.                 ohos:image_src="$media:index7"/> 
  34.         </DirectionalLayout> 
  35.         <DirectionalLayout 
  36.             ohos:height="match_parent" 
  37.             ohos:weight="2"
  38.             <Text 
  39.                 ohos:width="match_content" 
  40.                 ohos:height="match_content" 
  41.                 ohos:multiple_lines="true" 
  42.                 ohos:text="你好,欢迎来到鸿蒙时代! 
  43.                                     蛟龙腾飞,鸿蒙先行者,全心全意为你提供鸿蒙各项服务!" 
  44.                 ohos:text_size="35fp" 
  45.                 ohos:top_margin="240px" 
  46.                 ohos:left_margin="10px"/> 
  47.         </DirectionalLayout> 
  48.  
  49.     </DirectionalLayout> 
  50.  
  51. </DirectionalLayout> 

然后再第一个页面中添加点击事件进行跳转

  1. Button button = (Button) findComponentById(ResourceTable.Id_jltfbutton); 
  2.  
  3. button.setClickedListener(new Component.ClickedListener() { 
  4.     @Override 
  5.     public void onClick(Component component) { 
  6.  
  7.         present(new jltftabletSlice(),new Intent()); 
  8.     } 
  9.  
  10.  
  11. }); 

Lite wearable模拟器上的代码案例

新建项目选择模板进行下一步。


显示效果:


点击“点击了解更多”进入下一个页面


代码如下:

Index.hml

  1. <div class="container"
  2.     <text class="jltftxt"
  3.        蛟龙腾飞 
  4.     </text> 
  5.     <image src="/common/index22.jpg" class="jltfimg"/> 
  6.     <text class="jltftxt1"
  7.         带你从传统的互联网、移动互 
  8.     </text> 
  9.     <text class="jltftxt2"
  10.         联网时代. 跳转到万物互联的智 
  11.     </text> 
  12.     <text class="jltftxt3"
  13.          能世界!。马上创建体验个人、 
  14.     </text> 
  15.     <text class="jltftxt4"
  16.         公司或组织的鸿蒙应用吧! 
  17.     </text> 
  18.     <input class="jltfbtn"type="button" value="点击了解更多" onclick="jltfclick"/> 
  19. </div> 

Index.css


本文转载自网络,原文链接:https://harmonyos.51cto.com/#zz
本站部分内容转载于网络,版权归原作者所有,转载之目的在于传播更多优秀技术内容,如有侵权请联系QQ/微信:153890879删除,谢谢!
上一篇:云计算原生的真正含义是什么 下一篇:没有了

推荐图文


随机推荐