乐趣区

关于harmonyos:HarmonyOS实战页面跳转

  • 实现步骤:
    ①: 编写第一个页面(文本+按钮) xml 编写
    ②: 编写第二个页面(文本) java 编写
    ③: 给按钮增加一个跳转
  • 设计思路:
    第一步:在第一个界面中把 HelloWorld 改写为第一个界面,并增加一个按钮。
    第二步:写第二个界面
    第三步:书写跳转关系
  • 鸿蒙 UI 中,提供了两种编写布局的形式:
  • 在 XML 中申明 UI 布局
  • 在代码中创立布局
  • 这两种形式创立出的布局没有实质差异,然而 XML 形式较为不便简略,当前开发中,也都是用 XML 布局的形式。
  • 然而这两种形式都须要咱们相熟。所以,所以咱们将通过 XML 的形式布局第一张页面,而后再通过代码的形式布局第二张页面。


    1. 第一个页面布局(xml 编写)

  • 关上 layout 上面的“ability_main.xml”文件
  • 在“ability_main.xml”文件中创立一个文本 Text 和一个按钮Button
  • xml 编写
  • match-context 相当于 安卓中的 wrap_content

    <?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:alignment="center"
      ohos:orientation="vertical">
    
      <Text
          ohos:id="$+id:text_helloworld"
          ohos:height="match_content"
          ohos:width="match_content"
          ohos:background_element="$graphic:background_ability_main"
          ohos:layout_alignment="horizontal_center"
          ohos:text="第一个页面"
          ohos:text_size="40vp"
          />
     <Button
         ohos:id="$+id:but1"
         ohos:height="match_content"
         ohos:width="match_content"
         ohos:background_element="red"
         ohos:text_size="40fp"
         ohos:text="点我">
     </Button>
    
    </DirectionalLayout>

    2. 第二个页面布局(java 编写)

  • java 代码编写
  • 创立:




  • 删除 layout 下的ability_second.xml
  • 正文掉报错的这段:
  • DirectionalLayout 布局,是从上往下的排列

SecondAbilitySlice

public class SecondAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {super.onStart(intent);
        //super.setUIContent(ResourceTable.Layout_ability_second);

        // 1. 创立布局对象
        DirectionalLayout d1 = new DirectionalLayout(this);

        //2. 创立文本对象
        Text t = new Text(this);
        // 设置内容
        t.setText("第二个页面");
        // 设置文字大小
        t.setTextSize(55);
        // 设置文字色彩
        t.setTextColor(Color.BLUE);

        //3. 把文本对象增加到布局中
        d1.addComponent(t);

        //4. 把布局增加到子界面当中
        super.setUIContent(d1);
    }

3. 页面跳转实现

MainAbilitySlice

public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
    Button but;
    @Override
    public void onStart(Intent intent) {super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        //1. 找到按钮 id
        but = (Button) findComponentById(ResourceTable.Id_but1);
        //2. 给按钮增加点击事件
        // 如果没有增加点击事件,那么用鼠标点击按钮是没有任何反馈
        // 如果增加了点击事件,鼠标点击之后就能够执行对应的代码了
        //
        but.setClickedListener(this);
    }

    @Override
    public void onActive() {super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {super.onForeground(intent);
    }

    @Override
    public void onClick(Component component) {
        // 点击按钮只有执行的代码
        // 跳转到第二个页面
        if (component == but){
            // 只有点击个按钮,能力跳转

            // 跳转到哪个页面中(用意)Intent i = new Intent();
            // 蕴含了页面跳转的信息
            Operation operation = new Intent.OperationBuilder()
                    // 要跳转到哪个设施上,如果传递一个空的内容,示意跳转到本机
                    .withDeviceId("")
                    // 要跳转到哪个利用上,小括号外面能够写包名
                    .withBundleName("com.example.myapplication")
                    // 要跳转的页面
                    .withAbilityName("com.example.myapplication.SecondAbility")
                    // 示意将下面的三个信息进行打包
                    .build();
                    // 把打包之后的 operation 设置到用意当中
            i.setOperation(operation);
            // 跳转页面
            startAbility(i);
        }
    }
}

  • 点击后跳转到第二个页面

退出移动版