作者：韩茹
公司：程序咖（北京）科技有限公司
鸿蒙巴士专栏作家
Button是一种常见的组件，点击能够触发对应的操作，通常由文本或图标组成，也能够由图标和文本独特组成。
文本按钮
图标按钮
图标和文本独特组成的按钮
一、反对的XML属性
Button无自有的XML属性，共有XML属性继承自Text
二、创立Button
2.1 一般文本按钮
咱们先创立一个一般的按钮。
罕用的背景如文本背景、按钮背景，通常采纳XML格局搁置在graphic目录下。
在“Project”窗口，关上“entry > src > main > resources > base”，右键点击“graphic”文件夹，抉择“New > File”，命名为“background_button.xml”，在该文件中定义按钮的背景形态、色彩。
<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="rectangle"> <corners ohos:radius="10"/> <solid ohos:color="#66007CFD"/></shape>在layout目录下的xml文件中创立Button，并设置按钮的背景形态、色彩。
<?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"> <Button ohos:id="$+id:button1" ohos:width="match_content" ohos:height="match_content" ohos:text_size="17fp" ohos:text="文本按钮" ohos:background_element="$graphic:background_button" ohos:margin="15vp" ohos:padding="10vp" /></DirectionalLayout>效果图：
2.2 带图标按钮
咱们也能够在创立按钮的时候，附带小图标。通过element_xxx属性设置即可。
element_left，文本左侧图标element_top，文本上方图标element_right，文本右侧图标element_bottom，文本下方图标element_start，文本开始方向图标element_end，文本完结方向图标在“Project”窗口，关上“entry > src > main > resources > base”，右键点击“media”文件夹，先粘贴进去一个icon图标。
而后在xml文件中持续增加Button按钮：
<?xml version="1.0" encoding="utf-8"?><DirectionalLayout ...> ... <Button ohos:id="$+id:button2" ohos:width="match_content" ohos:height="match_content" ohos:text_size="17fp" ohos:text="带图标按钮" ohos:background_element="$graphic:background_button" ohos:margin="15vp" ohos:padding="10vp" ohos:element_padding="5vp" ohos:element_left="$media:add_friend" /> <Button ohos:id="$+id:button3" ohos:width="match_content" ohos:height="match_content" ohos:text_size="17fp" ohos:text="带图标按钮" ohos:background_element="$graphic:background_button" ohos:margin="15vp" ohos:padding="10vp" ohos:element_padding="5vp" ohos:element_right="$media:add_friend" /> <Button ohos:id="$+id:button4" ohos:width="match_content" ohos:height="match_content" ohos:text_size="17fp" ohos:text="带图标按钮" ohos:background_element="$graphic:background_button" ohos:margin="15vp" ohos:padding="10vp" ohos:element_padding="5vp" ohos:element_top="$media:add_friend" /></DirectionalLayout>阐明：
ohos:element_padding="5vp"，文本与图片的边距效果图：
2.3 其余形态的按钮
依照按钮的形态，按钮能够分为：一般按钮，椭圆按钮，胶囊按钮，圆形按钮等。
一般文本按钮。
先在在graphic目录下创立一个红色背景的xml文件color_red_element.xml。
<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="rectangle"><!-- FF0000，大红色不难看，咱们在色彩后面设置一下透明度。--> <solid ohos:color="#33FF0000"/></shape>一般按钮和其余按钮的区别在于不须要设置任何形态，只设置文本和背景色彩即可，例如：
<!-- 各种形态的按钮--> <Button ohos:width="150vp" ohos:height="50vp" ohos:text_size="27fp" ohos:text="一般按钮" ohos:background_element="$graphic:color_red_element" ohos:left_margin="15vp" ohos:bottom_margin="15vp" ohos:right_padding="8vp" ohos:left_padding="8vp" />椭圆按钮
椭圆按钮是通过设置background_element的来实现的，background_element的shape设置为椭圆（oval）：
oval_button_element.xml:
<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="oval"><!-- shape形态这里选oval --> <solid ohos:color="#33FF0000"/></shape>xml布局文件：
<Button ohos:width="150vp" ohos:height="50vp" ohos:text_size="27fp" ohos:text="椭圆按钮" ohos:background_element="$graphic:oval_button_element" ohos:left_margin="15vp" ohos:bottom_margin="15vp" ohos:right_padding="8vp" ohos:left_padding="8vp" />胶囊按钮
胶囊按钮是一种常见的按钮，设置按钮背景时将背景设置为矩形形态，并且设置ShapeElement的radius的半径。
capsule_button_element.xml:
<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="rectangle"> <corners ohos:radius="18vp"/> <solid ohos:color="#33FF0000"/></shape>xml文件中：
<Button ohos:width="match_content" ohos:height="match_content" ohos:text_size="27fp" ohos:text="胶囊按钮" ohos:background_element="$graphic:capsule_button_element" ohos:left_margin="15vp" ohos:bottom_margin="15vp" ohos:right_padding="15vp" ohos:left_padding="15vp" />圆形按钮
圆形按钮和椭圆按钮的区别在于组件自身的宽度和高度须要雷同
circle_button_element.xml，其实这个和下面的椭圆按钮oval_button_element.xml的内容是雷同的，形态选oval即可。
<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="oval"> <solid ohos:color="#33FF0000"/></shape>xml文件中：
<Button ohos:width="50vp" ohos:height="50vp" ohos:text_size="27fp" ohos:background_element="$graphic:circle_button_element" ohos:text="+" ohos:left_margin="15vp" ohos:bottom_margin="15vp" ohos:right_padding="15vp" ohos:left_padding="15vp" />三、解决按钮的点击事件
下面所有的操作，都是在页面布局中搁置按钮，各种形态的。然而无论多难看的按钮，如果不能点击，那么是没有灵魂的。那么如何来响应按钮的点击事件呢？
按钮的重要作用是当用户单击按钮时，会执行相应的操作或者界面呈现相应的变动。实际上用户点击按钮时，Button对象将收到一个点击事件。开发者能够自定义响应点击事件的办法。例如，通过创立一个Component.ClickedListener对象，而后通过调用setClickedListener将其调配给按钮。
Button button = (Button) findComponentById(ResourceTable.Id_button);// 为按钮设置点击事件回调button.setClickedListener(new Component.ClickedListener() { @Override public void onClick(Component component) { // 此处增加点击按钮后的事件处理逻辑 }}); 四、写几个例子
1、打电话的拨号界面
在layout目录下新建一个布局文件：dials_layout.xml：
<?xml version="1.0" encoding="utf-8"?><DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:width="match_parent" ohos:height="match_parent" ohos:background_element="$graphic:color_light_gray_element" ohos:orientation="vertical" ohos:padding="20vp" > <Text ohos:width="match_content" ohos:height="match_content" ohos:text_size="20fp" ohos:text="0123456789" ohos:background_element="$graphic:green_text_element" ohos:text_alignment="center" ohos:layout_alignment="horizontal_center" /> <DirectionalLayout ohos:width="match_parent" ohos:height="match_content" ohos:alignment="horizontal_center" ohos:orientation="horizontal" ohos:top_margin="5vp" ohos:bottom_margin="5vp"> <Button ohos:width="40vp" ohos:height="40vp" ohos:text_size="15fp" ohos:background_element="$graphic:green_circle_button_element" ohos:text="1" ohos:text_alignment="center" /> <Button ohos:width="40vp" ohos:height="40vp" ohos:text_size="15fp" ohos:background_element="$graphic:green_circle_button_element" ohos:text="2" ohos:left_margin="5vp" ohos:right_margin="5vp" ohos:text_alignment="center" /> <Button ohos:width="40vp" ohos:height="40vp" ohos:text_size="15fp" ohos:background_element="$graphic:green_circle_button_element" ohos:text="3" ohos:text_alignment="center" /> </DirectionalLayout> <DirectionalLayout ohos:width="match_parent" ohos:height="match_content" ohos:alignment="horizontal_center" ohos:orientation="horizontal" ohos:bottom_margin="5vp"> <Button ohos:width="40vp" ohos:height="40vp" ohos:text_size="15fp" ohos:background_element="$graphic:green_circle_button_element" ohos:text="4" ohos:text_alignment="center" /> <Button ohos:width="40vp" ohos:height="40vp" ohos:text_size="15fp" ohos:left_margin="5vp" ohos:right_margin="5vp" ohos:background_element="$graphic:green_circle_button_element" ohos:text="5" ohos:text_alignment="center" /> <Button ohos:width="40vp" ohos:height="40vp" ohos:text_size="15fp" ohos:background_element="$graphic:green_circle_button_element" ohos:text="6" ohos:text_alignment="center" /> </DirectionalLayout> <DirectionalLayout ohos:width="match_parent" ohos:height="match_content" ohos:alignment="horizontal_center" ohos:orientation="horizontal" ohos:bottom_margin="5vp"> <Button ohos:width="40vp" ohos:height="40vp" ohos:text_size="15fp" ohos:background_element="$graphic:green_circle_button_element" ohos:text="7" ohos:text_alignment="center" /> <Button ohos:width="40vp" ohos:height="40vp" ohos:text_size="15fp" ohos:left_margin="5vp" ohos:right_margin="5vp" ohos:background_element="$graphic:green_circle_button_element" ohos:text="8" ohos:text_alignment="center" /> <Button ohos:width="40vp" ohos:height="40vp" ohos:text_size="15fp" ohos:background_element="$graphic:green_circle_button_element" ohos:text="9" ohos:text_alignment="center" /> </DirectionalLayout> <DirectionalLayout ohos:width="match_parent" ohos:height="match_content" ohos:alignment="horizontal_center" ohos:orientation="horizontal" ohos:bottom_margin="5vp"> <Button ohos:width="40vp" ohos:height="40vp" ohos:text_size="15fp" ohos:background_element="$graphic:green_circle_button_element" ohos:text="*" ohos:text_alignment="center" /> <Button ohos:width="40vp" ohos:height="40vp" ohos:text_size="15fp" ohos:left_margin="5vp" ohos:right_margin="5vp" ohos:background_element="$graphic:green_circle_button_element" ohos:text="0" ohos:text_alignment="center" /> <Button ohos:width="40vp" ohos:height="40vp" ohos:text_size="15fp" ohos:background_element="$graphic:green_circle_button_element" ohos:text="#" ohos:text_alignment="center" /> </DirectionalLayout> <Button ohos:width="match_content" ohos:height="match_content" ohos:text_size="15fp" ohos:text="CALL" ohos:background_element="$graphic:green_capsule_button_element" ohos:bottom_margin="5vp" ohos:text_alignment="center" ohos:layout_alignment="horizontal_center" ohos:left_padding="10vp" ohos:right_padding="10vp" ohos:top_padding="2vp" ohos:bottom_padding="2vp" /></DirectionalLayout>color_light_gray_element.xml：
<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="rectangle"> <solid ohos:color="#EDEDED"/></shape>green_text_element.xml：
<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="rectangle"> <corners ohos:radius="20"/> <stroke ohos:width="2" ohos:color="#006E00"/> <solid ohos:color="#EDEDED"/></shape>green_circle_button_element.xml：
<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="oval"> <stroke ohos:width="5" ohos:color="#006E00"/> <solid ohos:color="#EDEDED"/></shape>green_capsule_button_element.xml：
<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="rectangle"> <corners ohos:radius="100"/> <solid ohos:color="#006E00"/></shape>点击事件：
在layout目录下新建一个xml布局文件：
<?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"> <Text ohos:id="$+id:text1" ohos:height="200vp" ohos:width="300vp" ohos:background_element="#22ff0000" ohos:layout_alignment="center" ohos:top_margin="20vp" ohos:text_color="#FF0000" ohos:text="尝试点击上面的两个按钮" ohos:text_alignment="center" ohos:text_size="24fp" /> <DependentLayout ohos:height="match_content" ohos:width="match_parent" ohos:orientation="horizontal" ohos:margin="20vp" > <Button ohos:id="$+id:btn1" ohos:height="match_content" ohos:width="match_content" ohos:text="粑粑去哪了" ohos:padding="10vp" ohos:text_size="20fp" ohos:background_element="$graphic:capsule_button_element" ohos:align_parent_left="true" /> <Button ohos:id="$+id:btn2" ohos:height="match_content" ohos:width="match_content" ohos:text="飞机去哪了" ohos:padding="10vp" ohos:text_size="20fp" ohos:background_element="$graphic:capsule_button_element" ohos:align_parent_right="true" /> </DependentLayout></DirectionalLayout>布局成果：
<img src="https://img.chengxuka.com/WX20210607-181208@2x.png/mark" alt="WX20210607-181208@2x" style="zoom:50%;" />
而后咱们在java代码中解决点击事件：
package com.example.buttondemo.slice;import com.example.buttondemo.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 { @Override public void onStart(Intent intent) { super.onStart(intent); //1.批改要展现的布局文件 super.setUIContent(ResourceTable.Layout_button_click_layout); //2.获取两个按钮对象 Button btn1 = (Button)findComponentById(ResourceTable.Id_btn1); Button btn2 = (Button)findComponentById(ResourceTable.Id_btn2); //3.获取文本对象 Text text1 = (Text)findComponentById(ResourceTable.Id_text1); //4.为按钮设置点击事件的回调函数 btn1.setClickedListener(new Component.ClickedListener() { @Override public void onClick(Component component) { //点击按钮 text1.setText("粑粑去厕所了"); System.out.println("点击按钮1。。。"); } }); btn2.setClickedListener(new Component.ClickedListener() { @Override public void onClick(Component component) { //点击按钮之后，设置文本 text1.setText("飞机掉下来了"); System.out.println("点击按钮2。。。"); } }); }}运行成果：
更多内容：
1、社区：鸿蒙巴士https://www.harmonybus.net/
2、公众号：HarmonyBus
3、技术交换QQ群：714518656
4、视频课：https://www.chengxuka.com