鸿蒙App开发之Button

按钮是我们开发中最常见的组件之一，如果读者已经打开鸿蒙开发工具DevEco Studio，按住Ctrl添加Button类，会发现其继承自Text组件。

public class Button extends Text

所以，其在鸿蒙中是没有自有的XML属性的，其所有属性都继承自Text组件。

创建一个Button

这里，我们和Text组件一样，首先通过XML布局文件进行Button组件的创建。示例代码如下所示：

<Buttonohos:id="$+id:test_button"ohos:height="match_content"ohos:width="match_content"ohos:element_left="$media:icon"ohos:layout_alignment="horizontal_center"ohos:top_margin="30vp"ohos:background_element="$graphic:background_ability_main"ohos:text="$string:test_button"ohos:text_size="40vp"
/>

这里，我们创建了一个长方形的按钮。graphic资源文件如下，仅仅设置了其背景的颜色为红色。

<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><solidohos:color="#FF0000"/>
</shape>

运行之后，效果如下：

圆形按钮

通过graphic资源文件的设置，我们还可以将按钮变换为圆形头像类似的圆形按钮。示例代码如下：

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="oval"><solidohos:color="#FF0000"/>
</shape>

不过，需要注意的是，这里我们设置的按钮为oval椭圆形，而圆形也是椭圆形的一种，但圆形的宽高相等。所以，我们还需要将Button按钮宽高设置成一样。

<Buttonohos:id="$+id:test_button"ohos:height="100vp"ohos:width="100vp"ohos:layout_alignment="horizontal_center"ohos:top_margin="30vp"ohos:background_element="$graphic:background_ability_main"ohos:text="+"ohos:text_size="40vp"
/>

运行之后，效果如下：

至于椭圆，只要保证宽高不相等即是椭圆按钮。

无背景有边框的圆角按钮

这里，我们还是实现一个长方形的按钮，但其4个角是圆角过渡，且没有背景。示例代码如下：

<shapexmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><strokeohos:width="2"ohos:color="#FF0000"/><cornersohos:radius="100"/>
</shape>

这里，我们设置了边框的宽度为2，且为红色，同时设置圆角为100。而XML布局中的按钮代码如下所示：

<Buttonohos:id="$+id:test_button"ohos:height="match_content"ohos:width="match_content"ohos:layout_alignment="horizontal_center"ohos:top_margin="30vp"ohos:padding="10vp"ohos:background_element="$graphic:background_ability_main"ohos:text="$string:test_button"ohos:text_size="40vp"
/>

运行之后，效果如下：

按钮的点击事件（实战通话界面）

众所周知，我们很多手机的通话界面就是12个圆形按钮组成的按键。当我们点击按钮的时候，对应的数字就会输入到上面的文本框中形成电话号码。

下面，我们通过这个项目来实战按钮是否完全掌握。代码如下：

package com.liyuanjing.idacommunity.slice;
import com.liyuanjing.idacommunity.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 {private Button button0;private Button button1;private Button button2;private Button button3;private Button button4;private Button button5;private Button button6;private Button button7;private Button button8;private Button button9;private Button button10;private Button button11;private Text phone_text;@Overridepublic void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);this.button0=(Button)findComponentById(ResourceTable.Id_button_0);this.button1=(Button)findComponentById(ResourceTable.Id_button_1);this.button2=(Button)findComponentById(ResourceTable.Id_button_2);this.button3=(Button)findComponentById(ResourceTable.Id_button_3);this.button4=(Button)findComponentById(ResourceTable.Id_button_4);this.button5=(Button)findComponentById(ResourceTable.Id_button_5);this.button6=(Button)findComponentById(ResourceTable.Id_button_6);this.button7=(Button)findComponentById(ResourceTable.Id_button_7);this.button8=(Button)findComponentById(ResourceTable.Id_button_8);this.button9=(Button)findComponentById(ResourceTable.Id_button_9);this.button10=(Button)findComponentById(ResourceTable.Id_button_10);this.button11=(Button)findComponentById(ResourceTable.Id_button_11);this.phone_text=(Text)findComponentById(ResourceTable.Id_phone_number_text);this.phone_text.setClickedListener(this);this.button0.setClickedListener(this);this.button1.setClickedListener(this);this.button2.setClickedListener(this);this.button3.setClickedListener(this);this.button4.setClickedListener(this);this.button5.setClickedListener(this);this.button6.setClickedListener(this);this.button7.setClickedListener(this);this.button8.setClickedListener(this);this.button9.setClickedListener(this);this.button10.setClickedListener(this);this.button11.setClickedListener(this);}@Overridepublic void onClick(Component component) {switch (component.getId()){case ResourceTable.Id_button_0:this.phone_text.setText(this.phone_text.getText()+"0");break;case ResourceTable.Id_button_1:this.phone_text.setText(this.phone_text.getText()+"1");break;case ResourceTable.Id_button_2:this.phone_text.setText(this.phone_text.getText()+"2");break;case ResourceTable.Id_button_3:this.phone_text.setText(this.phone_text.getText()+"3");break;case ResourceTable.Id_button_4:this.phone_text.setText(this.phone_text.getText()+"4");break;case ResourceTable.Id_button_5:this.phone_text.setText(this.phone_text.getText()+"5");break;case ResourceTable.Id_button_6:this.phone_text.setText(this.phone_text.getText()+"6");break;case ResourceTable.Id_button_7:this.phone_text.setText(this.phone_text.getText()+"7");break;case ResourceTable.Id_button_8:this.phone_text.setText(this.phone_text.getText()+"8");break;case ResourceTable.Id_button_9:this.phone_text.setText(this.phone_text.getText()+"9");break;case ResourceTable.Id_button_10:this.phone_text.setText(this.phone_text.getText()+"*");break;case ResourceTable.Id_button_11:this.phone_text.setText(this.phone_text.getText()+"#");break;case ResourceTable.Id_phone_number_text:this.phone_text.setText("");}}@Overridepublic void onActive() {super.onActive();}@Overridepublic void onForeground(Intent intent) {super.onForeground(intent);}
}

这里我们使用最基本获取控件的方式，后面讲解ResourceTable时，教大家如何使用循环体获取名称相近的组件。

XML布局文件代码：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="vertical"><Textohos:id="$+id:phone_number_text"ohos:height="match_content"ohos:weight="1"ohos:text_size="30vp"ohos:layout_alignment="horizontal_center"ohos:width="match_content"/><!--第1排按钮 --><DirectionalLayoutohos:height="match_content"ohos:width="match_parent"ohos:weight="1"ohos:margin="10vp"ohos:orientation="horizontal"><Buttonohos:id="$+id:button_1"ohos:height="100vp"ohos:width="100vp"ohos:text="1"ohos:text_size="30vp"ohos:left_margin="10vp"ohos:background_element="$graphic:background_ability_main"/><Buttonohos:id="$+id:button_2"ohos:height="100vp"ohos:width="100vp"ohos:text="2"ohos:text_size="30vp"ohos:left_margin="10vp"ohos:background_element="$graphic:background_ability_main"/><Buttonohos:id="$+id:button_3"ohos:height="100vp"ohos:width="100vp"ohos:text="3"ohos:text_size="30vp"ohos:left_margin="10vp"ohos:background_element="$graphic:background_ability_main"/></DirectionalLayout><!--第2排按钮 --><DirectionalLayoutohos:height="match_content"ohos:width="match_parent"ohos:weight="1"ohos:margin="10vp"ohos:orientation="horizontal"><Buttonohos:id="$+id:button_4"ohos:height="100vp"ohos:width="100vp"ohos:text="4"ohos:text_size="30vp"ohos:left_margin="10vp"ohos:background_element="$graphic:background_ability_main"/><Buttonohos:id="$+id:button_5"ohos:height="100vp"ohos:width="100vp"ohos:text="5"ohos:text_size="30vp"ohos:left_margin="10vp"ohos:background_element="$graphic:background_ability_main"/><Buttonohos:id="$+id:button_6"ohos:height="100vp"ohos:width="100vp"ohos:text="6"ohos:text_size="30vp"ohos:left_margin="10vp"ohos:background_element="$graphic:background_ability_main"/></DirectionalLayout><!--第3排按钮 --><DirectionalLayoutohos:height="match_content"ohos:width="match_parent"ohos:weight="1"ohos:margin="10vp"ohos:orientation="horizontal"><Buttonohos:id="$+id:button_7"ohos:height="100vp"ohos:width="100vp"ohos:text="7"ohos:text_size="30vp"ohos:left_margin="10vp"ohos:background_element="$graphic:background_ability_main"/><Buttonohos:id="$+id:button_8"ohos:height="100vp"ohos:width="100vp"ohos:text="8"ohos:text_size="30vp"ohos:left_margin="10vp"ohos:background_element="$graphic:background_ability_main"/><Buttonohos:id="$+id:button_9"ohos:height="100vp"ohos:width="100vp"ohos:text="9"ohos:text_size="30vp"ohos:left_margin="10vp"ohos:background_element="$graphic:background_ability_main"/></DirectionalLayout><!--第4排按钮 --><DirectionalLayoutohos:height="match_content"ohos:width="match_parent"ohos:weight="1"ohos:margin="10vp"ohos:orientation="horizontal"><Buttonohos:id="$+id:button_10"ohos:height="100vp"ohos:width="100vp"ohos:text="*"ohos:text_size="30vp"ohos:left_margin="10vp"ohos:background_element="$graphic:background_ability_main"/><Buttonohos:id="$+id:button_0"ohos:height="100vp"ohos:width="100vp"ohos:text="0"ohos:text_size="30vp"ohos:left_margin="10vp"ohos:background_element="$graphic:background_ability_main"/><Buttonohos:id="$+id:button_11"ohos:height="100vp"ohos:width="100vp"ohos:text="#"ohos:text_size="30vp"ohos:left_margin="10vp"ohos:background_element="$graphic:background_ability_main"/></DirectionalLayout>
</DirectionalLayout>

graphic:background_ability_main资源文件代码：

<shapexmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="oval"><strokeohos:width="2"ohos:color="#FF0000"/>
</shape>

鸿蒙开发（2）---Button组件相关推荐

vue3新拟态组件库开发流程——button组件源码
首先写最基础的button组件 <script setup> const props = defineProps({}) const emit = defineEmits(["c ...
鸿蒙开发-从搭建todolist待办事项来学习组件与js之间的交互
场景鸿蒙开发-实现页面跳转与页面返回: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118383025 在上面实现从主页面跳转 ...
3.5【HarmonyOS鸿蒙开发】组件RadioButton和RadioContainer
3.5[HarmonyOS鸿蒙开发]组件RadioButton和RadioContainer 作者:韩茹公司:程序咖(北京)科技有限公司鸿蒙巴士专栏作家一.RadioButton RadioBu ...
【鸿蒙 HarmonyOS】UI 组件 ( Button 组件 )
文章目录一.布局文件中设置 Button 组件属性二.代码中修改 Button 组件属性三.Button 点击事件四.完整代码示例五.执行结果六.GitHub 地址一.布局文件中设置 B ...
鸿蒙开发板能干什么,【鸿蒙开发板试用报告】用OLED板实现FlappyBird小游戏（中）...
小伙伴们久等了,在上一篇<[开发板试用报告]用OLED板实现FlappyBird小游戏(上)>中,我们本着拿来主义的原则,成功的让小鸟在OLED屏幕上自由飞翔起来,下面我们将加入按钮交互功 ...
鸿蒙开发-实现页面跳转与页面返回
场景鸿蒙基于JS搭建HelloWorld并修改国际化文件: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118274050 在 ...
鸿蒙开发-新建Ability与使用image-animator实现图帧动画
场景鸿蒙开发-基础组件介绍及chart组件使用: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118333539 在上面学习了 ...
华为云HMS Core 助力鸿蒙开发
前言今天看了一期华为云 HMS Core 助力鸿蒙开发的视频.内容干货满满.下面就视频的内容做一下学习记录. 名词说明文中涉及到的相关名词鸿蒙OS == HarmonyOS HarmonyOS ...
HarmonyOS开发详解（二）——鸿蒙开发体系详解及入门实例演示运行
本篇文章的计划,先体系的介绍一下鸿蒙开发相关的体系内容,希望通过本篇内容构建对鸿蒙开发体系的了解,最后再来一个最简单入门例子.既是自我的学习,也希望对你了解鸿蒙开发的全貌有帮助. 这样安排而没有直接写 ...

鸿蒙开发（2）---Button组件

目录

鸿蒙App开发之Button

创建一个Button

圆形按钮

无背景有边框的圆角按钮

按钮的点击事件（实战通话界面）

鸿蒙开发（2）---Button组件相关推荐

最新文章

热门文章