鸿蒙App开发，Button坑死你不偿命！_鸿蒙button不显示

作者：Monodyee | 2024-04-18 11:24:55

踩

鸿蒙button不显示

本篇文章Button的常规用法就不再赘述，这里主要讲述一下作者使用时踩的坑，Button继承自Text组件，其他一些基本用法可以参考前面Text介绍的文章。

准备好了吗？开始踩坑！

少侠且慢！

容我，先阐述一个知识点：鸿蒙中，Button背景是没有默认颜色的，也就是添加了组件没显示效果，使用的时候很容易自坑！

你们说坑不坑？

这一点不知道鸿蒙怎么想的，至少我觉得应该提供一个默认效果啊！算了不吐槽了，因为，更坑的还在后面！

下面先来一轮常规操作。

1、使用Shape定义Button背景

第一步：根据设计，先确定Button需要响应哪些状态。

大多数项目都是只有两个状态：所以至少需要empty状态和pressed状态，还有一些Button会与输入框内容联动（例如登录界面），会使用到disable状态，那就演示3中状态。

第二步、设计对应状态的背景Shape

emtpy状态shape文件：btn_empty_state.xml


<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <corners
        ohos:radius="10vp"
        />
    <solid
        ohos:color="#FFFF0000"
        />
</shape>

pressed状态shape文件：btn_pressed_state.xml


<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <corners
        ohos:radius="10vp"
        />
    <solid
        ohos:color="#FFEE8888"
        />
</shape>

disable状态的shape文件：btn_disable_state.xml


<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <corners
        ohos:radius="10vp"
        />
    <solid
        ohos:color="#FFEBEBEB"
        />
</shape>

state-container状态背景文件：btn_bg.xml


<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <corners
        ohos:radius="10vp"
        />
    <solid
        ohos:color="#FFEBEBEB"
        />
</shape>

布局文件：


<Button
    ohos:id="$+id:btn"
    ohos:height="48vp"
    ohos:width="match_parent"
    ohos:text_color="#FFFFFF"
    ohos:text="登录"
    ohos:text_size="20fp"
    ohos:background_element="$graphic:btn_bg"
    />

java代码，设置监听器：


Button button = (Button) findComponentById(ResourceTable.Id_btn);
button.setClickedListener(new Component.ClickedListener() {
    @Override
    public void onClick(Component component) {
        // 点击后，设置为disable状态
        component.setEnabled(false);
    }
});