做淘客网站怎么在线培训app
鸿蒙开发的入门
注册并实名认证华为开发者账户
华为官网
注册 有账户可以直接登录 并进行实名认证
下载并安装开发工具
鸿蒙开发使用的语言
java js c/c++ 仓颉
手机app java
硬件 c/c++
应用开发工具的下载地址
Windows(64-bit) 下载地址
程序的运行过程
解析config.json 文件初始化获取入口Ability的全类名找到Ability，并运行运行Ability中的子界面加载xml文件，展示内容第二个应用 页面跳转
鸿蒙ui中，提供了两种编写布局的方式
1 xml文件
标签便是要展示的不用内容 <Text> 文本
<image> 图片
<Button> 按钮
相关的代码
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="center"ohos:orientation="vertical"><Textohos: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"/><Buttonohos:id="$+id:but1"ohos:height="match_content"ohos:width="match_content"ohos:background_element="red"ohos:text_size="40fp"ohos:text="点我"/></DirectionalLayout>
2 java代码
对象表示要展示的不用内容Text对象 文本
image对象 图片
Button对象 按钮
相关的代码
package com.zz.myapplication.slice;import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.Text;
import ohos.agp.utils.Color;public class SecondAbilitySlice extends AbilitySlice {@Overridepublic void onStart(Intent intent) {super.onStart(intent);//super.setUIContent(ResourceTable.Layout_ability_second);//1.创建布局对象DirectionalLayout dl = new DirectionalLayout(this);//2.创建文本对象Text t = new Text(this);//设置内容t.setText("第二个页面");//设置文字大小t.setTextSize(55);//设置文字颜色t.setTextColor(Color.BLUE);//3.把文本对象添加到布局当中dl.addComponent(t);//4.把布局添加到子界面当中super.setUIContent(dl);}@Overridepublic void onActive() {super.onActive();}@Overridepublic void onForeground(Intent intent) {super.onForeground(intent);}
}3添加跳转的代码
package com.zz.myapplication.slice;import com.zz.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.aafwk.content.Operation;
import ohos.agp.components.Button;
import ohos.agp.components.Component;public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {Button btu ;@Overridepublic void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);//1.找到按钮 idbtu = (Button) findComponentById(ResourceTable.Id_but1);//2.给按钮添加一个点击事件//如果没有添加点击事件，那么用鼠标点击按钮之后是没有任何反应的。//如果我们给按钮添加了点击事件，那么用鼠标点击按钮之后，就可以执行对应的代码//理解方式：//给btu这个按钮添加了点击事件//当我们用鼠标点击了btu这个按钮之后，就可以执行本类中onClick方法btu.setClickedListener(this);}@Overridepublic void onActive() {super.onActive();}@Overridepublic void onForeground(Intent intent) {super.onForeground(intent);}@Overridepublic void onClick(Component component) {//点击按钮只要要执行的代码//跳转到第二个页面中if(component == btu){//只有点击了btu这个按钮之后，才进行跳转//跳转到哪个页面中（意图）Intent i = new Intent();//包含了要跳转的页面信息Operation operation = new Intent.OperationBuilder().withDeviceId("")//要跳转到哪个设备上，如果传递一个没有内容的字符串，表示跳转本机.withBundleName("com.zz.myapplication")//我要跳转到哪个应用上，小括号里面可以写报名.withAbilityName("com.zz.myapplication.SecondAbility")//要跳转的页面.build();//表示将上面的三个信息进行打包//把打包之后的operation设置到意图当中i.setOperation(operation);//跳转页面startAbility(i);}}
}
什么是事件
事件 就是可以被文本、按钮、图片等组件识别的操作
常见的是有
单击 双击 长按 滑动
单机事件
又叫做点击事件，是开发中使用最多的一种事件，没有之一
实现步骤
1 通过id找到组件
// 1 找到按钮//完整写法：//this.findComponentById(ResourceTable.Id_but1);//this:本类的对象。（子界面对象）//在子界面中，通过id找到对应的组件。//用this去调用方法，this是可以省略不写的。//findComponentById(ResourceTable.Id_but1);//返回一个组件对象（所有组件的父类对象）。//那么我们在实际写代码的时候，需要向下转型。Button but1 = (Button) findComponentById(ResourceTable.Id_but1);
2 给按钮组件设置单击事件
// 2 给按钮绑定一个点击事件but1.setClickedListener(new MyListener());
3 写一个类实现ClickedListener接口并重写onClick方法
class MyListener implements Component.ClickedListener{@Overridepublic void onClick(Component component) {// Component 所有组件的父类// 参数 被点击的组件对象Button but = (Button) component;but.setText("被点了");}
}
4 编写onClick方法体
// Component 所有组件的父类// 参数 被点击的组件对象Button but = (Button) component;but.setText("被点了");
单击事件的四种写法
定义实现类
class MyListener implements Component.ClickedListener{@Overridepublic void onClick(Component component) {// Component 所有组件的父类// 参数 被点击的组件对象Button but = (Button) component;but.setText("被点了");}
}
当前类作为实现类
public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener
匿名内部类 只能使用一次
but1.setClickedListener(new Component.ClickedListener() {@Overridepublic void onClick(Component component) {Button btu = (Button) component;btu.setText("被点了-单击事件的第三种写法");text1.setText("被点击了");}});
方法引用
but1.setClickedListener(this::onClick);public void onClick(Component component) {Button btu = (Button) component;btu.setText("被点了-单击事件的第二种写法");text1.setText("被点击了");}
双击事件
实现步骤
1 通过id找到组件
// 1 找到文本框组件和按钮组件Button but1 = (Button) findComponentById(ResourceTable.Id_but1);text1 = (Text) findComponentById(ResourceTable.Id_text1);
2 给按钮组件设置双击事件
// 2 绑定事件// 我想要点谁 那么就给谁绑定事件// 当我双击了 but1 这个按钮之后，就会执行本类中的onDoubleClickbut1.setDoubleClickedListener(this);
3 本类实现DoubleClickedListener接口并重写
public class MainAbilitySlice extends AbilitySlice implements Component.DoubleClickedListener
4重写onDoubleClick方法体
@Overridepublic void onDoubleClick(Component component) {// component 表示点击组件的对象// 简单理解 我点了谁 那么component就表示谁的对象// 目前而言 按钮对象对问们暂时还没有什么用处// 问们要做的是点击之后改变文本框中的内容text1.setText("双击");}
长按事件
实现步骤
1 通过id找到组件
// 1 找到文本框组件和按钮组件Button but1 = (Button) findComponentById(ResourceTable.Id_but1);text1 = (Text) findComponentById(ResourceTable.Id_text1);
2 给按钮组件设置长按事件
// 2 绑定事件// 我想要点谁 那么就给谁绑定事件but1.setLongClickedListener(this);
3 本类实现LongClickedListener接口
public class MainAbilitySlice extends AbilitySlice implements Component.LongClickedListener
4重写onLongClick方法体
@Overridepublic void onLongClicked(Component component) {text1.setText("长按");}
滑动事件
按下不松 按下位置
移动
松开 松开位置
实现步骤
1 通过id找到组件
// 1 先找到整个的布局对象DirectionalLayout d1 = (DirectionalLayout) findComponentById(ResourceTable.Id_d1);text1 = (Text) findComponentById(ResourceTable.Id_text1);
2 给按钮组件设置滑动事件
// 2 给整个布局添加滑动事件// 当我们在整个布局上滑动的时候 就会调用本类中onTouchEvent的方法d1.setTouchEventListener(this);
3 本类实现TouchEventListener接口
public class MainAbilitySlice extends AbilitySlice implements Component.TouchEventListener
4重写onTouchEvent方法体
@Overridepublic boolean onTouchEvent(Component component, TouchEvent touchEvent) {count++;// 参数1 component 表示滑动的哪个组件 （布局也是一种组件）// 实际上此时代表的就是那个DirectionalLayout 这个对象// 参数2 touchEvent 动作对象 （按下 滑动 抬起）// 获取当前手指对屏幕进行的操作 （按下 滑动 抬起）int action = touchEvent.getAction();// 1 表示 按下 操作// 2 表示松开// 3 表示 滑动 / 移动操作if (action == TouchEvent.PRIMARY_POINT_DOWN){// 只要写按下时需要运行的代码即可text1.setText("按下"+count);}else if (action == TouchEvent.POINT_MOVE) {text1.setText("移动"+count);}else if (action == TouchEvent.PRIMARY_POINT_UP){text1.setText("松开"+count);}return true;}
按下时 手指的坐标
送开始 手指的坐标
y坐标不变 x 坐标变大 右滑
y坐标不变 x 坐标变小 左滑
x坐标不变 y坐标变大 下滑
x坐标不变 y坐标变小 上滑
获取当前手指对屏幕进行的操作 代码
public boolean onTouchEvent(Component component, TouchEvent touchEvent) {count++;// 参数1 component 表示滑动的哪个组件 （布局也是一种组件）// 实际上此时代表的就是那个DirectionalLayout 这个对象// 参数2 touchEvent 动作对象 （按下 滑动 抬起）// 获取当前手指对屏幕进行的操作 （按下 滑动 抬起）int action = touchEvent.getAction();// 1 表示 按下 操作// 2 表示松开// 3 表示 滑动 / 移动操作if (action == TouchEvent.PRIMARY_POINT_DOWN){// 只要写按下时需要运行的代码即可//text1.setText("按下"+count);// 获取按下时手指的位置MmiPoint point = touchEvent.getPointerPosition(0);float x = point.getX();float y = point.getY();text1.setText(x+"----"+y);}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 x = point.getX();float y = point.getY();text1.setText(x+"----"+y);}return true;}
上下左右的滑动
// 记录按下时手指的位置float startx = 0;float starty = 0;@Overridepublic boolean onTouchEvent(Component component, TouchEvent touchEvent) {count++;// 参数1 component 表示滑动的哪个组件 （布局也是一种组件）// 实际上此时代表的就是那个DirectionalLayout 这个对象// 参数2 touchEvent 动作对象 （按下 滑动 抬起）// 获取当前手指对屏幕进行的操作 （按下 滑动 抬起）int action = touchEvent.getAction();// 1 表示 按下 操作// 2 表示松开// 3 表示 滑动 / 移动操作if (action == TouchEvent.PRIMARY_POINT_DOWN){// 只要写按下时需要运行的代码即可//text1.setText("按下"+count);// 获取按下时手指的位置MmiPoint point = touchEvent.getPointerPosition(0);startx = point.getX();starty = point.getY();// text1.setText(x+"----"+y);}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(x+"----"+y);// 拿着按下时手指的位置跟送开始手指的位置进行比较就可以了if (endx > startx){text1.setText("右滑");} else if (endx < startx){text1.setText("左滑");} else if (endy > starty){text1.setText("下滑");} else if (endy < starty){text1.setText("上滑");}}return true;}
bug的解决
@Overridepublic boolean onTouchEvent(Component component, TouchEvent touchEvent) {count++;// 参数1 component 表示滑动的哪个组件 （布局也是一种组件）// 实际上此时代表的就是那个DirectionalLayout 这个对象// 参数2 touchEvent 动作对象 （按下 滑动 抬起）// 获取当前手指对屏幕进行的操作 （按下 滑动 抬起）int action = touchEvent.getAction();// 1 表示 按下 操作// 2 表示松开// 3 表示 滑动 / 移动操作if (action == TouchEvent.PRIMARY_POINT_DOWN){// 只要写按下时需要运行的代码即可//text1.setText("按下"+count);// 获取按下时手指的位置MmiPoint point = touchEvent.getPointerPosition(0);startx = point.getX();starty = point.getY();// text1.setText(x+"----"+y);}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(x+"----"+y);// 拿着按下时手指的位置跟送开始手指的位置进行比较就可以了if (endx > startx && Math.abs(endy -starty) < 100){text1.setText("右滑");} else if (endx < startx && Math.abs(endy -starty) < 100){text1.setText("左滑");} else if (endy > starty && Math.abs(endx -startx) < 100){text1.setText("下滑");} else if (endy < starty && Math.abs(endx -startx) < 100){text1.setText("上滑");}}return true;}
//如果为true，表示所有的动作都会触发当前方法并执行对应代码。
//如果为false，表示只有第一个动作会触发当前方法并执行对应代码。
//后续的动作就不会触发当前方法了。
//按下 --- 移动 --- 松开
案例
多按钮被点击
登录和注册按钮
public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {Text text1;Button login;Button register;@Overridepublic void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);// 1 找到文本框组件 按钮组件text1 = (Text) findComponentById(ResourceTable.Id_text1);login = (Button) findComponentById(ResourceTable.Id_login);register = (Button) findComponentById(ResourceTable.Id_register);//2 给按钮绑定事件// 我现在要对哪个组件做什么操作// 要对登录按钮 注册按钮做点击操作login.setClickedListener(this);register.setClickedListener(this);}@Overridepublic void onActive() {super.onActive();}@Overridepublic void onForeground(Intent intent) {super.onForeground(intent);}@Overridepublic void onClick(Component component) {// 先做一个判断// 判断当前点击的市登录按钮还是注册按钮//component 表示当前点击的组件if (component == login){// 表示点击的是登录按钮text1.setText("点击了登录按钮");}else if (component == register){// 表示点击的注册按钮text1.setText("点击了注册按钮");}}
}
双击点赞
package com.zz.listenerapplication.slice;import com.zz.listenerapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Component;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.Image;public class MainAbilitySlice extends AbilitySlice implements Component.DoubleClickedListener{Image image ;@Overridepublic void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);// 1 找图片组件image = (Image) findComponentById(ResourceTable.Id_img);// 找到铺满屏幕的布局对象DirectionalLayout dl = (DirectionalLayout) findComponentById(ResourceTable.Id_dl);// 2 给布局添加双击事件dl.setDoubleClickedListener(this);}@Overridepublic void onActive() {super.onActive();}@Overridepublic void onForeground(Intent intent) {super.onForeground(intent);}// 如果标记未false 表示没有点赞 此时吧白色变成红色// 如果表示未true 表示已经点赞 再次双击之后 会打红色变回白色boolean flag = false;@Overridepublic void onDoubleClick(Component component) {// 修改图片的红心if (flag){image.setImageAndDecodeBounds(ResourceTable.Media_white);flag = false;}else {image.setImageAndDecodeBounds(ResourceTable.Media_red);flag = true;}}
}配置文件
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:id="$+id:dl"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="center"ohos:orientation="vertical"><Imageohos:id="$+id:img"ohos:height="match_content"ohos:width="match_content"ohos:image_src="$media:white"ohos:background_element="cyan"/></DirectionalLayout>
单击更换文本
package com.zz.listenerapplication.slice;import com.zz.listenerapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.Text;
import ohos.global.resource.NotExistException;
import ohos.global.resource.Resource;import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.util.Random;public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {String[] jokes;Text text1;Button btu1;@Overridepublic void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);// 1 资源管理器try {// 用来拼接读取到的所以数据StringBuffer sb = new StringBuffer();Resource resource = this.getResourceManager().getResource(ResourceTable.Profile_joke);// 因为resource 是一个字节流 利用字节流可以读取文件中的内容BufferedReader br = new BufferedReader(new InputStreamReader(resource));String line;while ((line = br.readLine()) != null){sb.append(line);}// 释放资源br.close();// 当代码执行到这里的时候 资源文件joke.tet 中所有的内容全部读取到sb当中了// 利用 -- 将数据进行切割，分成四个段子jokes = sb.toString().split("---");// 当我们点击了按钮之后 就会给文本框设置一个随机的笑话// 找到文本组件 按钮组件text1 = (Text) findComponentById(ResourceTable.Id_text1);btu1 = (Button) findComponentById(ResourceTable.Id_btu1);// 给按钮 添加一个点击事件btu1.setClickedListener(this);} catch (IOException e) {throw new RuntimeException(e);} catch (NotExistException e) {throw new RuntimeException(e);}}@Overridepublic void onActive() {super.onActive();}@Overridepublic void onForeground(Intent intent) {super.onForeground(intent);}@Overridepublic void onClick(Component component) {// 当我们点击了按钮之后 会从数组里面随机获取一个笑话并设置到文本当中Random r = new Random();// 获取随机索引int index = r.nextInt(jokes.length);// 通过随机索引获取段子String randomjoke = jokes[index];// 把随机的段子设置到文本当中text1.setText(randomjoke);}
}配置文件
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="center"ohos:orientation="vertical"><Textohos:id="$+id:text1"ohos:height="match_content"ohos:width="match_content"ohos:background_element="$graphic:background_ability_main"ohos:layout_alignment="horizontal_center"ohos:text="$string:mainability_HelloWorld"ohos:text_size="40vp"ohos:multiple_lines="true"/><Buttonohos:id="$+id:btu1"ohos:height="match_content"ohos:width="match_content"ohos:text="点我"ohos:text_size="100"ohos:background_element="red"/></DirectionalLayout>
单击随机图片
package com.zz.listenerapplication.slice;import com.zz.listenerapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.Image;import java.util.ArrayList;
import java.util.Random;public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {ArrayList<Integer> list = new ArrayList<>();Image img;Button but1;@Overridepublic void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);// 定义一个数组 或者集合用来储存所有的图片list.add(ResourceTable.Media_girl1);list.add(ResourceTable.Media_girl2);list.add(ResourceTable.Media_girl3);list.add(ResourceTable.Media_girl4);list.add(ResourceTable.Media_girl5);list.add(ResourceTable.Media_girl6);list.add(ResourceTable.Media_girl7);list.add(ResourceTable.Media_girl8);list.add(ResourceTable.Media_girl9);// 找到组件img = (Image)findComponentById(ResourceTable.Id_img);but1 = (Button)findComponentById(ResourceTable.Id_but1);// 给按钮绑定单击事件but1.setClickedListener(this);}@Overridepublic void onActive() {super.onActive();}@Overridepublic void onForeground(Intent intent) {super.onForeground(intent);}@Overridepublic void onClick(Component component) {// 当按钮点击以后 我们需要修改图片的内容Random r = new Random();// 获取随机的索引int index = r.nextInt(list.size());// 通过随机的索引 可以获取随机的元素int randomImg = list.get(index);// 把获取到的随机图片 设置给image 组件就可以了img.setImageAndDecodeBounds(randomImg);}
}配置文件
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:id="$+id:dl"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="center"ohos:orientation="vertical"><Imageohos:id="$+id:img"ohos:height="match_content"ohos:width="match_content"/><Buttonohos:id="$+id:but1"ohos:height="match_content"ohos:width="match_content"ohos:text="点我"ohos:text_size="100"ohos:background_element="red"/></DirectionalLayout>
10秒统计次数
package com.zz.listenerapplication.slice;import com.zz.listenerapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.Text;public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {Button btu;Text text;@Overridepublic void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);// 找到文本和按钮对象btu = (Button) findComponentById(ResourceTable.Id_btu1);text = (Text) findComponentById(ResourceTable.Id_text1);// 给按钮设置点击事件btu.setClickedListener(this);}@Overridepublic void onActive() {super.onActive();}@Overridepublic void onForeground(Intent intent) {super.onForeground(intent);}// 如果flag为true 表示当前按钮是第一次点击// 如果flag为false 表示当前按钮不是第一次点击boolean flag = true;long startTime = 0;
// 用来记录点击了多少次int count = 0 ;@Overridepublic void onClick(Component component) {// 点击一次 计数器就自增一次count++ ;// 统计10秒中之内按了多少次// 并把次数在文本框展示出来if (flag){// 如果当前是第一次点击按钮// 记录当前的时间startTime = System.currentTimeMillis();// 当第一次点击之后 游戏开始// 修改按钮中的文字内容btu.setText("请疯狂点我");// 修改标记flag = false;}else {if (( System.currentTimeMillis() - startTime)<= 10000){text.setText(count+"");}else {btu.setText("结束");// 取消按钮的点击事件btu.setClickable(false);}}}
}配置文件
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="center"ohos:orientation="vertical"><Textohos:id="$+id:text1"ohos:height="match_content"ohos:width="match_content"ohos:background_element="$graphic:background_ability_main"ohos:layout_alignment="horizontal_center"ohos:text="$string:mainability_HelloWorld"ohos:text_size="40vp"/><Buttonohos:id="$+id:btu1"ohos:height="match_content"ohos:width="match_content"ohos:background_element="red"ohos:text="点我"ohos:text_size="100"/>
</DirectionalLayout>