HarmonyOS3.0应用开发

鸿蒙系统应用开发页面跳转

**项目主要情况：**创建两个页面，第一个页面中放置一个按钮，点击按钮可以跳转至下一个页面。

AbilitySlice叫子页面，也叫切片或片段。

搭建页面

已知系统中默认存在的页面为“你好，世界”，我们可以在xml文件中对这个页面进行更改，将它改成我们想要的第一个页面。

在第一个页面的xml文件中放置按钮“跳转”，并设置按钮相关数据。

创建第二个页面，同时设置相关参数。

首先在com.exmaple.myapplication中新建一个MainAbility2。（注意：创建时弹出的页面中的launcher Ability选项不要打钩，那个表示是否将该页面设置为第一个页面）

新建一个Ability页面，软件会自动构建相应的子界面MainAbility2Slice、xml文件，同时在配置文件config.json中,MainAbility2也进行自动注册了。

第二个页面我们采用java代码的方式进行创建，所以可以删掉xml文件，同时在MainAbility2Slice.java中注释掉下面语句：

super.setUIContent(ResourceTable.Layout_ability_main2);

接下来就是搭建第二个界面的代码，写在MainAbility2Slice类中的onStart方法中。

 		//1.创建布局对象
        DirectionalLayout dl=new DirectionalLayout(this);
        //2.创建文本对象
        Text t=new Text(this);
        //设置内容
        t.setText("第二个页面");
        //设置文字大小
        t.setTextSize(55);
        //设置文字颜色
        t.setTextColor(Color.MAGENTA);
        //3.把文本对象添加搭配布局中
        dl.addComponent(t);
        //4.把布局添加到子界面中
        super.setUIContent(dl);

结果：

设置按钮

在MainAbilitySlice中编写代码，设置页面跳转。

public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
    Button btu ;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        //1.找到按钮 id，并将id强转换为按钮赋值给btu
        btu =(Button) findComponentById(ResourceTable.Id_but1);
        //2.给按钮添加一个点击事件
        //如果没有添加点击事件，那么用鼠标点击按钮
        //给按钮添加了点击事件，那么用鼠标点击按钮之后，就可以执行对应的代码
        btu.setClickedListener(this);//最开始括号里不知道传递什么，于是选中setClickedListener，按“ctrl+B”，查看源码，最后发现传递的是ClickedListener这个接口的实现类对象
        //实现接口就需要重写里面的所有抽象类方法，点击红色波浪线，按alt+enter，选择第一个implement methods
        //于是我们可以implements Component.ClickedListener类，在括号中写入this表示本类对象
        //当用鼠标点击btu这个按钮，就会执行本类中的onClick方法
    }

 @Override
    public void onClick(Component component) {
        if(component==btu){
            //只有点击btu这个按钮后才进行跳转
            Intent i= new Intent();//要跳转到哪个页面（意图）
            Operation operation = new Intent.OperationBuilder()
                    .withDeviceId("")//要跳转到哪个设备上，如果传递一个没有内容的字符串，表示跳转本机
                    .withBundleName("com.example.myapplication")//要跳转到哪个应用上，小括号里可以写包名
                    .withAbilityName("com.example.myapplication.MainAbility2")//要跳转到哪个页面，小括号里可以写包名
                    .build();//表示将上面三个信息进行打包
            i.setOperation(operation);//把打包后的operation设置到意图中
            startAbility(i);//跳转页面
        }
    }

组件、布局和事件

屏幕展示出来的元素，都称之为组件。

多个组件的摆放方式就是布局。组件必须添加到布局中才能显示出来。

事件就是可以被组件识别的操作。

事件：就是被文本、按钮、图片等组件识别的操作，常见的事件有：单击、双击、长按、滑动。

单击事件：又叫做点击事件。是开发中使用最多的一种事件。

单击事件写法一：定义实现类

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sENphamZ-1641894055564)(C:UsersASUSAppDataRoamingTyporatypora-user-imagesimage-20220104183920191.png)]

首先，新建一个项目。在xml文件中删掉Text，创建一个Button（创建方式在页面跳转中有）。在虚拟机上运行可以看见界面中有一个按钮。

设置按钮功能。

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        //1.找到按钮
        Button but1 = (Button)findComponentById(ResourceTable.Id_btu1);
        //2.给按钮绑定一个单击事件
        but1.setClickedListener(new MyListener());//如果不知道小括号里要传递什么参数，选中
        // setClickedListener然后按ctrl+B查看源码，发现应该传递一个接口实现类对象
        //在下方创建一个MyListener类
    }
    
    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}
class MyListener implements Component.ClickedListener{
//实现一个接口要重写里面的抽象方法，点击红色灯泡或者点击红色波浪线按alt+enter，选中implement methods
    @Override
    public void onClick(Component component) {
        //component是所有组件的父类
        //参数：被点击的组件对象
        //component.setText();这里不能调用这个方法，表明这个方法只存在于子类中，
        // 要使用子类的特有方法，我们需要进行向下强转
        Button btu =(Button)component;
        btu.setText("被点了");
    }
}

运行结果

单击事件写法二：当前类作为实现类

即页面跳转中的设置按钮给按钮设置单击事件的方法。（按住ctrl键单击即可跳转）

在点击一个按钮后，需要操作其他的组件对象，可用第二种，若不需要操作，用第一种使代码更加简洁。

单击事件写法三：匿名内部类

这种方法直接在build中new一个对象并进行编写单击事件。

but1.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                Button btu =(Button)component;
                btu.setText("被点了");
                btu.setText("被点击后的单击事件——三");
            }
        });

该写法较之前两种写法的区别在于这个方法是内部类的方法，只能使用一次。

单击事件写法四：方法引用

直接重新写一下onclick方法，用this直接调用。

but1.setClickedListener(this::onClick);
	@Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
    public void onClick(Component component){
        Button btu =(Button)component;
        text1.setText("被点了");
        btu.setText("被点击后的单击事件——四");
    }

双击事件

双击事件与单击事件相似，就是绑定事件时用的方法不同。

public class MainAbility2Slice extends AbilitySlice implements Component.DoubleClickedListener {
    Text text1;
    Button but1;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main2);
        //找到组件
        text1 =(Text)findComponentById(ResourceTable.Id_text2) ;
        but1=(Button)findComponentById(ResourceTable.Id_but2);
        //绑定事件
        but1.setDoubleClickedListener(this);
    }

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

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

    @Override
    public void onDoubleClick(Component component) {
        text1.setText("双击");
    }
}

显示结果：

长按事件

长按事件和前面两种事件情况相似，只需要改变绑定事件，代码如下：

public class MainAbility2Slice extends AbilitySlice implements Component.LongClickedListener {
    Text text1;
    Button but1;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main2);
        //找到组件
        text1 =(Text)findComponentById(ResourceTable.Id_text2) ;
        but1=(Button)findComponentById(ResourceTable.Id_but2);
        //绑定事件
        but1.setLongClickedListener(this);
    }

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

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

    @Override
    public void onLongClicked(Component component) {
        text1.setText("长按");
    }
}

显示结果：

滑动事件

public class MainAbility2Slice extends AbilitySlice implements Component.TouchEventListener {
    Text text1;
    Button but1;
    int count=0;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main2);
        //找到组件
        DirectionalLayout d1 =(DirectionalLayout)findComponentById(ResourceTable.Id_d1) ;
        text1=(Text)findComponentById(ResourceTable.Id_text2) ;
        but1=(Button)findComponentById(ResourceTable.Id_but2);
        //绑定事件，这里方法和单击事件写法二一样
        d1.setTouchEventListener(this);
    }
    //定义起始坐标
    float startX=0;
    float startY=0;
    @Override
    public void onActive() {
        super.onActive();
    }

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


    @Override
    public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
        count++;
        int action = touchEvent.getAction();
        if(action==TouchEvent.PRIMARY_POINT_DOWN){
            //text1.setText("按下"+count);
            //获取按下时手指的坐标
            MmiPoint point =touchEvent.getPointerPosition(0);
            startX= point.getX();
            startY = point.getY();
            text1.setText(startX+"___"+startY);
        }
        else if(action==TouchEvent.POINT_MOVE){
            //text1.setText("移动"+count);
//            MmiPoint point =touchEvent.getPointerPosition(0);
//            float x = point.getX();
//            float y = point.getY();
//            text1.setText(x+"___"+y);
        }
        else if(action==TouchEvent.PRIMARY_POINT_UP){
            //text1.setText("松开"+count);
            MmiPoint point =touchEvent.getPointerPosition(0);
            float endX = point.getX();
            float endY = point.getY();
            text1.setText(endX+"___"+endY);
            //这里滑动位移超过100将视为无效
            if(endXstartX&&  abs(endY-startY)<100){
                text1.setText("右滑");
            }
            else if(endYstartY&&  abs(endX-startX)<100){
                text1.setText("下滑");
            }
        }
        //如果返回值为true，表示所有动作都会触发当前方法并执行对应代码
        //如果返回值为false，表示只有第一个动作都会触发当前方法并执行对应代码，后续动作就不会触发了
        return true;
    }
}

HarmonyOS3.0应用开发

Java相关栏目本月热门文章