如何结合 XComponent 和 Toggle 实现自定义组件的显示和隐藏？

Question

我想用 Toggle 控制 XComponent 的显示和隐藏，比如开启开关后显示自定义组件，关闭后隐藏。不太清楚该如何结合两个组件进行控制，有朋友可以帮忙提供一些代码吗？

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

Answer 1

首先，在页面中引入 XComponent 用于显示自定义内容，Toggle 组件用于切换显示状态。
利用 Toggle 的 onChange 事件监听开关状态的变化。
根据 Toggle 的状态，控制 XComponent 的显示和隐藏。

import { XComponent, Toggle, Column } from '@ohos.component';
import { @State } from '@ohos.app.ability.UIAbilityContext';

@Entry
@Component
struct CustomComponentDisplay {
    @State showComponent: boolean = false;

    build() {
        return Column({ space: 5 }) {
            Toggle({
                checked: this.showComponent,
                onChange: (value: boolean) => {
                    this.showComponent = value;
                }
            })
            if (this.showComponent) {
                XComponent({
                    // 这里设置 XComponent 的各种属性，例如大小、位置等
                    width: 300,
                    height: 300,
                    // 可以根据具体需求添加相应的生命周期回调函数，如 onLoad、onDestroy 等
                    onLoad: (component) => {
                        // 当 XComponent 加载时的操作
                    },
                    onDestroy: () => {
                        // 当 XComponent 销毁时的操作
                    }
                });
            }
        };
    }