經過前兩篇的學習，我們了解了DevEco運行一個程序的基本流程和一個鴻蒙OS應用項目的代碼結構。
用一句《三體》格式的話說：跑得動hello world，我們就是同志了。
這一篇，我們就自己手動擼一個簡單的鴻蒙交互程序：從一個頁面跳轉到另一個頁面。
（一）創建工程
先創建一個新的TV的empty java工程：
點finish后，發現這次從創建到項目環境加載完成，用了很短的時間，這是因為初始環境需要各種配置和下載，類似我們初下完一個大型游戲，首次需要更新內容一般。
（二）自定義布局
進入界面后，默認的IDE已經創建了一個hello world程序，我們打開entry -> src -> main ->resources -> base -> layout -> ability_main.xml 布局文件：
我們先清掉原本的布局，重新寫入我們自己的布局：
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:width="match_parent"
ohos:height="match_parent"
ohos:background_element="#000000">
<Text
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"/>
<Button ohos:id="$+id:button"
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>
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（橢圓），通過不同的內外邊距設定，就可以衍生出其他形狀：圓形，橢圓，正方，膠囊。
corners標簽表示了圓角設定，將方形設定圓角，我們就可以得到一個圓角按鈕。
默認的模版使用的是方向布局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/
掃碼關注公眾號，【免費課程+一手資訊+福利掉落】，速來！
