一、Button 组件

Button 是一种常见的组件，点击可以触发对应的操作，通常由文本或图标组成，也可以由图标和文本共同组成。
文本按钮，如下所示：

图标按钮，如下所示：

图标和文本共同组成的按钮，如下所示：

二、支持的 XML 属性

Button 无自有的 XML 属性，共有 XML 属性继承自 Text；
Text 的自有 XML 属性，请参考我之前的博客：HarmonyOS之深入分析常用组件Text的功能和使用。

三、创建 Button

创建如下样式的按钮：

在 layout 目录下的 xml 文件中创建 Button，并设置按钮的背景形状、颜色。常用的背景如文本背景、按钮背景，通常采用 XML 格式放置在 graphic 目录下：

<Button
	    ohos:id="$+id:button"
	    ohos:width="match_content"
	    ohos:height="match_content"
	    ohos:text_size="27fp"
	    ohos:text="button"
	    ohos:background_element="$graphic:background_button"   
	    ohos:left_margin="15vp"
	    ohos:bottom_margin="15vp"
	    ohos:right_padding="8vp"
	    ohos:left_padding="8vp"
	    ohos:element_left="$media:ic_btn_reload"
	/>

在“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="#007CFD"/>
	</shape>

在“Project”窗口，打开“entry > src > main > resources > base > media”，添加所需图片至“media”目录下。

四、响应点击事件

按钮的重要作用是当用户单击按钮时，会执行相应的操作或者界面出现相应的变化。
实际上用户点击按钮时，Button 对象将收到一个点击事件。开发者可以自定义响应点击事件的方法。例如，通过创建一个 Component.ClickedListener 对象，然后通过调用 setClickedListener 将其分配给按钮。

Button button = (Button) findComponentById(ResourceTable.Id_button);
	// 为按钮设置点击事件回调
	button.setClickedListener(new Component.ClickedListener() {
	    @Override
	    public void onClick(Component component) {
	        // 此处添加点击按钮后的事件处理逻辑
	    }
	});

五、不同类型的按钮

① 普通按钮

普通按钮和其他按钮的区别在于不需要设置任何形状，只设置文本和背景颜色即可，例如：

<Button
	    ohos:width="150vp"
	    ohos:height="50vp"
	    ohos:text_size="27fp"
	    ohos:text="button"
	    ohos:background_element="$graphic:color_blue_element"
	    ohos:left_margin="15vp"
	    ohos:bottom_margin="15vp"
	    ohos:right_padding="8vp"
	    ohos:left_padding="8vp"
	/>

color_blue_element.xml：

<?xml version="1.0" encoding="utf-8"?>
	<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
	    ohos:shape="rectangle">
	    <solid
	        ohos:color="#007CFD"/>
	</shape>

② 椭圆按钮

椭圆按钮是通过设置 background_element 的来实现的， background_element 的 shape 设置为椭圆（oval），例如：

<Button
	    ohos:width="150vp"
	    ohos:height="50vp"
	    ohos:text_size="27fp"
	    ohos:text="button"
	    ohos:background_element="$graphic:oval_button_element"
	    ohos:left_margin="15vp"
	    ohos:bottom_margin="15vp"
	    ohos:right_padding="8vp"
	    ohos:left_padding="8vp"
	    ohos:element_left="$media:ic_btn_reload"
	/>

oval_button_element.xml:

<?xml version="1.0" encoding="utf-8"?>
	<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
	    ohos:shape="oval">
	    <solid
	        ohos:color="#007CFD"/>
	</shape>

③ 胶囊按钮

胶囊按钮是一种常见的按钮，设置按钮背景时将背景设置为矩形形状，并且设置 ShapeElement 的 radius 的半径，例如：

<Button
	    ohos:id="$+id:button"
	    ohos:width="match_content"
	    ohos:height="match_content"
	    ohos:text_size="27fp"
	    ohos:text="button"
	    ohos:background_element="$graphic:capsule_button_element"
	    ohos:left_margin="15vp"
	    ohos:bottom_margin="15vp"
	    ohos:right_padding="15vp"
	    ohos:left_padding="15vp"
	/>

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="#007CFD"/>
	</shape>

④ 圆形按钮

圆形按钮和椭圆按钮的区别在于组件本身的宽度和高度需要相同，例如：

<Button
	    ohos:id="$+id: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"
	/>

circle_button_element.xml:

<?xml version="1.0" encoding="utf-8"?>
	<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
	    ohos:shape="oval">
	    <solid
	        ohos:color="#007CFD"/>
	</shape>

六、场景示例

利用圆形按钮，胶囊按钮，文本组件可以绘制出如下拨号盘的 UI 界面：

源码示例：

<?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">
	    <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>

HarmonyOS之常用组件Button的功能和使用

一、Button 组件

二、支持的 XML 属性

三、创建 Button

四、响应点击事件

五、不同类型的按钮

① 普通按钮

② 椭圆按钮

③ 胶囊按钮

④ 圆形按钮

六、场景示例

相关文章