如何结合 Toggle 和 ToolbarItem 实现功能启用的动态工具栏？

Question

如何结合 Toggle 和 ToolbarItem 实现功能启用的动态工具栏？

李游Leo

6k

发布于
2024-12-05 北京

我想结合 Toggle 和 ToolbarItem，实现一个功能启用和工具栏显示联动的效果，比如打开 Toggle 时工具栏显示，关闭时隐藏。不确定怎么实现这种动态显示效果，有朋友可以分享代码吗？

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

harmonyos-next

阅读 675

AI BotBETA

要实现结合 `Toggle` 和 `ToolbarItem` 实现功能启用的动态工具栏，你可以通过监听 `Toggle` 的状态变化来动态更新 `ToolbarItem` 的可见性。以下是一个简单的示例代码，展示如何在 HarmonyOS 中实现这个功能。

### 示例代码

**布局文件 (XML)**

<DirectionalLayout

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

<!-- Toggle -->
<Toggle
    ohos:id="$+id:toggle"
    ohos:width="match_content"
    ohos:height="match_content"
    ohos:text="Enable Toolbar"
    ohos:top_margin="20vp"/>

<!-- Toolbar -->
<Toolbar
    ohos:id="$+id:toolbar"
    ohos:width="match_parent"
    ohos:height="wrap_content"
    ohos:visibility="collapse">

    <ToolbarItem
        ohos:id="$+id:toolbar_item1"
        ohos:width="wrap_content"
        ohos:height="wrap_content"
        ohos:icon="$graphic:ic_toolbar_item1"
        ohos:title="Item 1"/>

    <ToolbarItem
        ohos:id="$+id:toolbar_item2"
        ohos:width="wrap_content"
        ohos:height="wrap_content"
        ohos:icon="$graphic:ic_toolbar_item2"
        ohos:title="Item 2"/>

</Toolbar>

</DirectionalLayout>


**Java 代码**

import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Component;
import ohos.agp.components.Toolbar;
import ohos.agp.components.ToolbarItem;
import ohos.agp.components.Toggle;
import ohos.bundle.IBundleManager;

public class MainAbility extends Ability {

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

    Toggle toggle = (Toggle) findComponentById(ResourceTable.Id_toggle);
    Toolbar toolbar = (Toolbar) findComponentById(ResourceTable.Id_toolbar);

    toggle.setClickedListener(new Component.ClickedListener() {
        @Override
        public void onClick(Component component) {
            boolean isChecked = toggle.isChecked();
            if (isChecked) {
                toolbar.setVisibility(Component.VISIBLE);
            } else {
                toolbar.setVisibility(Component.INVISIBLE);
            }
        }
    });
}

}


### 解释

1. **布局文件**:
   - 定义一个 `Toggle` 组件和一个 `Toolbar` 组件。
   - `Toolbar` 中包含多个 `ToolbarItem`。
   - 初始状态下，`Toolbar` 的 `visibility` 设置为 `collapse`（或者你可以使用 `invisible`，取决于你的需求）。

2. **Java 代码**:
   - 在 `onStart` 方法中，通过 `findComponentById` 获取 `Toggle` 和 `Toolbar` 组件。
   - 为 `Toggle` 设置一个点击监听器，当 `Toggle` 状态改变时，根据 `isChecked` 的值来动态设置 `Toolbar` 的可见性。

这样，当你点击 `Toggle` 时，`Toolbar` 会根据 `Toggle` 的状态显示或隐藏，实现功能启用和工具栏显示联动的效果。

1 个回答

得票最新

以梦为马_HOS

1.2k

发布于
1 月 14 日贵州

可以将toggle的isOn值传递给flag，使用三元运算调整ToolBarItem的value和resource将值调整为空。

撰写回答