[文章]Button组件介绍和应用体验分享

Button组件是常用的交互类组件之一，本节将来聊聊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:jltfbtn"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#FF17D3EB"
        ohos:layout_alignment="horizontal_center"
        ohos:text="我是一个按钮button"
        ohos:padding="20vp"
        ohos:top_margin="10px"
        ohos:text_color="#FFFFFF"
        ohos:text_size="50"
        />
    <Text
        ohos:height="100px"
        ohos:width="300px"
        ohos:text_size="20fp"
        ohos:top_margin="40px"
        ohos:left_margin="400px"
        ohos:text="普通按钮"/>
    <Button
        ohos:width="200vp"
        ohos:height="70vp"
        ohos:text_size="27fp"
        ohos:text="button"
        ohos:background_element="$graphic:jltfcolor_blue_element"
        ohos:top_margin="15px"
        ohos:left_margin="90vp"
        ohos:bottom_margin="15vp"
        ohos:right_padding="8vp"
        ohos:left_padding="8vp"
        />
    <Text
        ohos:height="100px"
        ohos:width="300px"
        ohos:text_size="20fp"
        ohos:left_margin="400px"
        ohos:text="椭圆按钮"/>
    <Button
        ohos:width="200vp"
        ohos:height="70vp"
        ohos:text_size="27fp"
        ohos:text="button"
        ohos:background_element="$graphic:jltfoval_button_element"
        ohos:bottom_margin="15vp"
        ohos:top_margin="15px"
        ohos:left_margin="90vp"
        ohos:right_padding="8vp"
        ohos:left_padding="8vp"
        />
    <Text
        ohos:height="100px"
        ohos:width="300px"
        ohos:text_size="20fp"
        ohos:left_margin="400px"
        ohos:text="胶囊按钮"/>
    <Button
        ohos:id="$+id:button"
        ohos:width="200vp"
        ohos:height="70vp"
        ohos:text_size="27fp"
        ohos:text="button"
        ohos:background_element="$graphic:jltfcapsule_button_element"
        ohos:left_margin="90vp"
        ohos:top_margin="15px"
        ohos:bottom_margin="15vp"
        ohos:right_padding="15vp"
        ohos:left_padding="15vp"
        />
    <Text
        ohos:height="100px"
        ohos:width="300px"
        ohos:text_size="20fp"
        ohos:left_margin="400px"
        ohos:text="圆形按钮"/>
    <Button
        ohos:id="$+id:button2"
        ohos:width="140vp"
        ohos:height="140vp"
        ohos:text_size="27fp"
        ohos:background_element="$graphic:jltfcircle_button_element"
        ohos:text="+"
        ohos:left_margin="110vp"
        ohos:bottom_margin="15vp"
        ohos:right_padding="15vp"
        ohos:left_padding="15vp"
        />
</DirectionalLayout>

Slice中的代码

package com.example.jltftiyan.slice;

import com.example.jltftiyan.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        Button button = (Button) findComponentById(ResourceTable.Id_jltfbtn);
        button.setClickedListener(l -> {
            //更改Button组件的内容
            button.setText("我被点击了~");
        });
    }

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

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

graphic目录下xml文件的代码示例如下：

jltfcolor_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>

jltfoval_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>

jltfcapsule_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>

jltfcircle_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>