如何用 Toolbar 组件实现工具栏按钮的动态启用/禁用？

Question

如何用 Toolbar 组件实现工具栏按钮的动态启用/禁用？

李游Leo

6k1539

发布于
2024-12-05 北京

我在做一个编辑页面，用 Toolbar 组件添加了保存、删除等功能按钮，想在某些情况下禁用这些按钮，比如用户没有输入内容时，不知道怎么动态控制按钮的启用和禁用。希望有代码示例能帮忙参考。

本文参与了【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

harmonyos-next

阅读 672

AI BotBETA

在 HarmonyOS 开发中，你可以通过监听用户输入的内容，并根据内容的状态动态启用或禁用 Toolbar 组件中的按钮。下面是一个简单的示例，展示了如何实现这一功能。

### 示例代码

1. **布局文件** (`resource/base/layout/ability_main.xml`)

<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:orientation="vertical"
    ohos:alignment="center">

    <TextField
        ohos:id="$+id:text_field"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:hint="请输入内容"
        ohos:text_size="18fp"
        ohos:margin_bottom="16vp"/>

    <Toolbar
        ohos:id="$+id:toolbar"
        ohos:width="match_parent"
        ohos:height="wrap_content"
        ohos:background_color="#FFFFFF"
        ohos:padding="16vp">

        <Button
            ohos:id="$+id:save_button"
            ohos:width="wrap_content"
            ohos:height="wrap_content"
            ohos:text="保存"
            ohos:text_size="16fp"
            ohos:margin_end="16vp"/>

        <Button
            ohos:id="$+id:delete_button"
            ohos:width="wrap_content"
            ohos:height="wrap_content"
            ohos:text="删除"
            ohos:text_size="16fp"/>

    </Toolbar>
</DirectionalLayout>
```

Ability 文件 (MainAbility.java)

package com.example.myapplication;

import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.TextField;
import ohos.agp.components.Toolbar;
import ohos.bundle.IBundleManager;

public class MainAbility extends Ability {

    private TextField textField;
    private Button saveButton;
    private Button deleteButton;

    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        textField = (TextField) findComponentById(ResourceTable.Id_text_field);
        saveButton = (Button) findComponentById(ResourceTable.Id_save_button);
        deleteButton = (Button) findComponentById(ResourceTable.Id_delete_button);

        // 添加文本内容变化监听器
        textField.addTextChangedListener(new TextField.TextWatcher() {
            @Override
            public void onTextChanged(TextField textField, String newText, int start, int before, int count) {
                updateButtonStates();
            }
        });

        // 初始化按钮状态
        updateButtonStates();
    }

    private void updateButtonStates() {
        String text = textField.getText();
        boolean hasText = text != null && !text.isEmpty();

        saveButton.setEnabled(hasText);
        deleteButton.setEnabled(hasText);
    }
}

解释

布局文件：定义了一个 TextField 用于用户输入，以及一个包含两个按钮的 Toolbar。
Ability 文件：
- 在 onStart 方法中，通过 findComponentById 获取 TextField 和两个按钮的实例。
- 为 TextField 添加一个 TextWatcher，当文本内容发生变化时，调用 updateButtonStates 方法。
- updateButtonStates 方法根据 TextField 的内容是否为空，来启用或禁用按钮。