北向应用：手机鸿蒙元程序初试 原创

显示效果：

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

部分代码如下：

第一个布局中

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <DirectionalLayout
        ohos:width="match_parent"
        ohos:weight="1">
        <Text
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="蛟龙腾飞"
            ohos:text_size="80px"
            ohos:top_margin="280px"
            ohos:left_margin="50px"/>
    </DirectionalLayout>
    <DirectionalLayout
        ohos:weight="1"
        ohos:width="match_parent">
        <Image
            ohos:width="1080px"
            ohos:height="468px"
            ohos:image_src="$media:index12.jpg"/>

    </DirectionalLayout>
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:weight="3">
        <Text
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text_size="60px"
            ohos:multiple_lines="true"
            ohos:left_margin="8px"
            ohos:text="带你从传统的互联网、移动互联网时代"/>
        <Text
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text_size="60px"
            ohos:multiple_lines="true"
            ohos:left_margin="8px"
            ohos:top_margin="10px"
            ohos:text="跳转到万物互联的智能世界!"/>
        <Text
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text_size="60px"
            ohos:multiple_lines="true"
            ohos:left_margin="8px"
            ohos:top_margin="10px"
            ohos:text=""/>
        <Button
            ohos:id="$+id:jltfbutton"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="点击了解更多"
            ohos:text_color="red"
            ohos:text_size="100px"
            ohos:top_margin="400px"
            ohos:left_margin="420px"/>
    </DirectionalLayout>

</DirectionalLayout>