想了解更多內容，請訪問：

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

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

經過前兩篇的學習，我們了解了DevEco運行一個程序的基本流程和一個鴻蒙OS應用項目的代碼結構。

用一句《三體》格式的話說：跑得動hello world，我們就是同志了。

這一篇，我們就自己手動擼一個簡單的鴻蒙交互程序：從一個頁面跳轉到另一個頁面。

(一)創建工程

先創建一個新的TV的empty java工程：

點finish后，發現這次從創建到項目環境加載完成，用了很短的時間，這是因為初始環境需要各種配置和下載，類似我們初下完一個大型游戲，首次需要更新內容一般。

(二)自定義布局

進入界面后，默認的IDE已經創建了一個hello world程序，我們打開entry -> src -> main ->resources -> base -> layout -> ability_main.xml 布局文件：

我們先清掉原本的布局，重新寫入我們自己的布局：

xmlns:ohos="http://schemas.huawei.com/res/ohos" 
 
ohos:width="match_parent" 
 
ohos:height="match_parent" 
 
ohos:background_element="#000000"> 
 
 
ohos:id="$+id:text" 
 
ohos:width="match_content" 
 
ohos:height="match_content" 
 
ohos:center_in_parent="true" 
 
ohos:text="你好，鴻蒙OS" 
 
ohos:text_color="white" 
 
ohos:text_size="32fp"/> 
 
ohos:width="match_content" 
 
ohos:height="match_content" 
 
ohos:text_size="20fp" 
 
ohos:text="跳轉" 
 
ohos:left_margin="50vp" 
 
ohos:bottom_margin="50vp" 
 
ohos:right_padding="80vp" 
 
ohos:left_padding="80vp" 
 
ohos:text_color="white" 
 
ohos:background_element="$graphic:button_element" 
 
ohos:center_in_parent="true" 
 
ohos:align_parent_bottom="true"/> 

 <DependentLayout>標簽指定了這是一個相對位置布局，意思就是布局里的每個組件可以指定相對于其他同級組件的位置，也可以指定相對于父組件的位置。

<Button>標簽表示了這里將會布局創建一個按鈕，大部分設置信息同Text。 

按鈕的背景指定了“button_element”來顯示，這是另外一個布局文件，我們來手動創建，在resources -> base ->graphic 目錄下，右鍵創建一個File，命名為：button_element.xml

在button_element.xml添加如下代碼：

<?xml version="1.0" encoding="utf-8"?> 
 
<shape 
 
    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
 
    ohos:shape="rectangle"> 
 
    <corners 
 
        ohos:radius="10"/> 
 
    <solid 
 
        ohos:color="#FF007DFF"/> 
 
</shape> 

目前鴻蒙官方提供形狀：rectangle(方形)和oval(橢圓)，通過不同的內外邊距設定，就可以衍生出其他形狀：圓形，橢圓，正方，膠囊。

標簽表示了圓角設定，將方形設定圓角，我們就可以得到一個圓角按鈕。

默認的模版使用的是方向布局DirectionLayout(垂直或者橫向)，這里我們修改使用DependentLayout相對位置布局，這樣可以更加方便的控制文本和按鈕的相對位置。

運行效果：

(三)創建建跳轉頁面

當然，當前點擊跳轉按鈕不會有任何反應，一方面我們還沒寫交互邏輯，另一方面，我們要跳轉的頁面也還沒寫。我們繼續下一步，寫一個新的頁面。

在項目對應的目錄下，創建一個空的FA(java)，如下圖：

 

這里我們將新頁面命名為：NewPage 

下面兩項不勾選，直接點finish。

創建后，目錄下除了剛才創建的newpage，還會自動創建一個newpageslice在slice目錄下以及對應的布局文件在layout目錄下：

 之前在跑hello world的時候，我們說過，ability是入口，邏輯代碼都在slice里，同樣，在這個newpage里，它也是將邏輯route到了slice類中。

我們打開ability_new_page.xml，簡單修改下輸出文本：

(四)主頁面添加交互邏輯

到這里，我們的第二個頁面算是簡單的創建完畢了，下一步，我們需要在主頁面下添加交互邏輯，讓它可以跳轉到這個新的slice頁面中來，在主頁面(MainAbilitySlice)中去添加按鈕點擊的事件邏輯：

Button btn = (Button) findComponentById(ResourceTable.Id_button); 
 
if (btn != null) { 
 
//添加按鈕點擊事件監聽 
 
btn.setClickedListener(new Component.ClickedListener() { 
 
@Override 
 
public void onClick(Component component) { 
 
Intent newpageIntent = new Intent(); 
 
//指定目標頁面 
 
Operation operation = new Intent.OperationBuilder() 
 
.withDeviceId("") .withBundleName("com.qibiao.harmonyosdemo") .withAbilityName("com.qibiao.harmonyosdemo.NewPage") .build(); 
 
newpageIntent.setOperation(operation); 
 
//啟動目標頁面 
 
startAbility(newpageIntent); 
 
} }); 
 
} 

 這里會要求import新的包，以提供組件模塊，不然上面的代碼輸完是會標紅報錯的。需要引入的包：

import ohos.aafwk.content.Operation;

import ohos.agp.components.Button;

import ohos.agp.components.Component;

解析下代碼：

findComponentById通過id來找到按鈕組件，然后這個id對應的就是我們在布局文件中設置的：

ohos:id="$+id:button"

onClick對應按鈕的點擊事件，這個不是自定義函數，屬于事件觸發函數。

Intent上回說過了，它是一個中間件，協助當前頁面往新頁面通訊。

Operation operation = new Intent.OperationBuilder()

.withDeviceId("") .withBundleName("com.qibiao.harmonyosdemo") .withAbilityName("com.qibiao.harmonyosdemo.NewPage") .build();

這串代碼指定了我們要跳轉的目標頁面，需要指定目標的包名，還有Ability名稱(非slice)。

最后使用startAbility()接口啟動那個頁面。

(五)運行

再次運行查看效果(先開遠程虛擬設備，再點運行)：

效果出來了，點擊右側的返回，還能回到主界面。

想了解更多內容，請訪問：

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

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