自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

鴻蒙HarmonyOS北向應用開發(fā)者 極速入門教程（一）續(xù)-實戰(zhàn)練習篇2

作者：鴻蒙時代
開發(fā) OpenHarmony
文章由鴻蒙社區(qū)產(chǎn)出，想要了解更多內(nèi)容請前往：51CTO和華為官方戰(zhàn)略合作共建的鴻蒙技術社區(qū)https://harmonyos.51cto.com/#zz

[[376968]]

 想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區(qū)

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="帶你從傳統(tǒng)的互聯(lián)網(wǎng)、移動互聯(lián)網(wǎng)時代 
  42.                                跳轉(zhuǎn)到萬物互聯(lián)的智能世界! 
  43.                                           馬上創(chuàng)建體驗個人、公司或組織的鴻蒙應用吧！" 
  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> 

 然后再第一個頁面中添加點擊事件進行跳轉(zhuǎn)

  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.         帶你從傳統(tǒng)的互聯(lián)網(wǎng)、移動互 
  8.     </text> 
  9.     <text class="jltftxt2"> 
  10.         聯(lián)網(wǎng)時代. 跳轉(zhuǎn)到萬物互聯(lián)的智 
  11.     </text> 
  12.     <text class="jltftxt3"> 
  13.          能世界!。馬上創(chuàng)建體驗個人、 
  14.     </text> 
  15.     <text class="jltftxt4"> 
  16.         公司或組織的鴻蒙應用吧！ 
  17.     </text> 
  18.     <input class="jltfbtn"type="button" value="點擊了解更多" onclick="jltfclick"/> 
  19. </div> 

 Index.css

  1. .container { 
  2.     flex-direction: column; 
  3.     width: 454px; 
  4.     height: 454px; 
  5.     justify-content: center; 
  6.     align-items: center; 
  7. } 
  8. .jltftxt { 
  9.      margin-left: -180px; 
  10.      margin-bottom: 10px; 
  11. } 
  12. .jltftxt1 { 
  13.     width: 400px; 
  14.     font-size: 30px; 
  15.  
  16. } 
  17. .jltfimg { 
  18.     width: 138px; 
  19.     height:103px; 
  20.     margin-left: 5px; 
  21. } 
  22. .jltfbtn { 
  23.     width: 200px; 
  24.     margin-bottom: -70px; 
  25. } 

 Index.js

  1. import router from '@system.router' 
  2.  
  3. export default { 
  4.     data: { 
  5.  
  6.     }, 
  7.     jltfclick() { 
  8.         router.replace({ 
  9.             uri:'pages/jltfindex/jltfindex' 
  10.         }); 
  11.     } 
  12. } 

 Jltfindex.hml

  1. <div class="container"> 
  2.     <text class="jltftxt"> 
  3.         蛟龍騰飛 
  4.     </text> 
  5.     <image src="/common/index16.jpg" class="jltfimg"/> 
  6.     <text class="jltftxt1"> 
  7.         你好，歡迎來到鴻蒙時代！ 
  8.     </text> 
  9.     <text class="jltftxt2"> 
  10.         蛟龍騰飛，鴻蒙先行者，全心全 
  11.     </text> 
  12.     <text class="jltftxt3"> 
  13.         意為你提供鴻蒙各項服務！        
  14.  
  15. </div> 

 Jltfindex.css

  1. .container { 
  2.     flex-direction: column; 
  3.     width: 454px; 
  4.     height: 454px; 
  5.     justify-content: center; 
  6.     align-items: center; 
  7. } 
  8. .jltftxt { 
  9.     margin-left: -180px; 
  10.     margin-bottom: 10px; 
  11. } 
  12. .jltftxt1 { 
  13.     width: 400px; 
  14.     font-size: 30px; 
  15.  
  16. } 
  17. .jltfimg { 
  18.     width: 413px; 
  19.     height:103px; 
  20.     margin-left: 8px; 
  21. } 
  22. .jltfbtn { 
  23.     width: 200px; 
  24.     margin-bottom: -70px; 
  25. } 

 Jltfindex.js

  1. export default { 
  2.     data: { 
  3.     } 
  4. } 

 在第一個頁面中添加跳轉(zhuǎn)的代碼

在第一個頁面js文件中加入如下代碼即可

  1. jltfclick() { 
  2.     router.replace({ 
  3.         uri:'pages/jltfindex/jltfindex' 
  4.     }); 
  5. } 

 2. 練習題二

還是基于“練習一”題目中的圖片和文字內(nèi)容，7種設備中用其他不同的模板樣式嘗試實現(xiàn)一下和“練習一”模板樣式不一樣的效果，盡可能每種設備實現(xiàn)一種不同的布局和效果呈現(xiàn)，作業(yè)要求，樣式截圖與全部代碼。

3. 點擊和嘗試DevEco Studio里的每個菜單欄,概覽這個DevEco Studio的各項功能結(jié)構(gòu)。結(jié)合前面的練習，寫一個100字以上的Deveco Studio體驗心得。

具體編輯器使用的細節(jié)可以參考如下鏈接和內(nèi)容。

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/tools_overview-0000001053582387


深圳市蛟龍騰飛網(wǎng)絡科技有限公司

©著作權歸作者和HarmonyOS技術社區(qū)共同所有，如需轉(zhuǎn)載，請注明出處，否則將追究法律責任

想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區(qū)

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

 

責任編輯：jianghua 來源： 鴻蒙社區(qū)
鴻蒙HarmonyOS應用開發(fā)
相關推薦

2021-01-19 10:09:02

鴻蒙HarmonyOS應用

2021-01-18 13:26:06

鴻蒙HarmonyOS應用

2023-07-31 17:35:31

ArkTS鴻蒙

2023-08-04 15:00:43

ArkTS語言鴻蒙

2017-06-30 09:47:45

PythonJava開發(fā)者

2024-01-03 15:31:16

網(wǎng)格布局ArkTSGrid

2022-08-12 08:02:11

Solid.jsReact

2023-04-11 09:12:31

北向應用開發(fā)鴻蒙

2021-10-14 09:58:24

消息中間件ActiveMQ Java

2011-07-21 10:29:18

iPhone 開發(fā)

2010-06-13 09:45:35

Widget開發(fā)

2011-06-16 09:40:53

QML 教程

2018-03-22 14:59:13

Docker入門容器

2014-07-01 11:31:35

NDKSO庫JNI調(diào)用

2020-12-24 12:01:16

鴻蒙HarmonyOS應用開發(fā)

2014-04-21 11:08:47

Linux學習Linux入門教程

2017-03-31 20:16:53

華為開發(fā)者聯(lián)盟
點贊
收藏

51CTO技術棧公眾號