一、引言：一行代码的优雅

在前两篇博客中，我们分别讨论了「原生 if/else 的布局跳跃」和「Blank() 弹性占位方案」。Blank 方案虽然有效，但需要手动维护两个分支的高度同步，略显繁琐。

有没有一种方案，不需要改变组件结构、不需要维护高度同步、只需一行属性就能彻底解决布局跳跃问题？

答案是：.visibility()。

在鸿蒙 ArkTS 中，.visibility() 属性提供了三种模式：Visible（显示）、Hidden（隐藏占位）和 None（隐藏不占位）。只需将 if/else 替换为 .visibility(Hidden)，组件就始终存在于布局树中，Column 的子组件结构岿然不动。

核心洞察：Visibility.Hidden 是「我不要你看我，但我仍然占据我的位置」。

本文将深入解析 Visibility 属性的方方面面，从底层原理到高级应用，从单组件到复杂场景，带你彻底掌握这个优雅的解决方案。

---

二、Visibility 属性全方位解析

2.1 属性定义

visibility 是 ArkTS 中所有基础组件的通用属性，用于控制组件的可见性。

// 属性签名
.visibility(value: Visibility)

// 使用示例
Text('Hello').visibility(Visibility.Visible)
Button('Click').visibility(Visibility.Hidden)
Image($r('app.media.icon')).visibility(Visibility.None)

2.2 三种模式详解

Visibility.Visible

组件正常显示，参与布局和事件交互。

Text('可见的文本')
  .visibility(Visibility.Visible)
  // 等价于：不写 visibility 属性

行为：正常测量 → 正常绘制 → 正常交互

Visibility.Hidden

组件不可见，但占据布局空间，不参与事件交互。

Text('隐藏但占位')
  .visibility(Visibility.Hidden)
  // 组件在布局中保留位置，用户看不到，也不能点击

行为：正常测量 → 跳过绘制 → 跳过交互

Visibility.None

组件不可见，且不占据布局空间，不参与事件交互。

Text('完全消失')
  .visibility(Visibility.None)
  // 组件在布局中不留痕迹，如同不存在

行为：跳过测量 → 跳过绘制 → 跳过交互

2.3 三种模式的对比

维度	Visible	Hidden	None
视觉可见	✅ 可见	❌ 隐藏	❌ 隐藏
布局占位	✅ 占据	✅ 占据	❌ 不占据
用户交互	✅ 可交互	❌ 不可交互	❌ 不可交互
测量流程	参与测量	参与测量	跳过测量
绘制流程	参与绘制	跳过绘制	跳过绘制
触发重排	—	不触发	触发
子组件随动	—	子组件也隐藏	子组件也消失

注意：Visibility.None 和 if/else false 一样会触发 Column 重排，所以它不是我们解决布局跳跃的选择。

2.4 与 display:none / visibility:hidden（CSS）的类比

CSS	ArkTS	占位	可见
display: block	Visibility.Visible	✅	✅
visibility: hidden	Visibility.Hidden	✅	❌
display: none	Visibility.None	❌	❌

如果你熟悉 CSS，可以快速理解 ArkTS 的 Visibility 设计：

• Visibility.Hidden = CSS 的 visibility: hidden
• Visibility.None = CSS 的 display: none

---

三、Visibility 方案的核心原理

3.1 解决布局跳跃的机制

传统 if/else 导致布局跳跃的核心原因：

Column 布局公式：
  每个子组件的 top = 前面的所有子组件的高度和

if/else 变化时：
  插入新组件 → 后续组件下标 +1 → 位置偏移
  删除组件   → 后续组件下标 -1 → 位置偏移

Visibility.Hidden 的方案：

Column 布局：
  子组件数量 = 始终不变（组件没有插入和删除）
  每个子组件的高度 = 始终不变（Hidden 保留原来高度）
  后续子组件的 top = 始终不变（前面的高度和不变）

结果：布局完全稳定，无跳跃

3.2 if/else vs Visibility 的对比

// ❌ if/else：组件插入/删除，引起布局跳跃
Column() {
  // 子组件 1：条件渲染
  if (this.show) {
    Text('内容').height(80)   // 条件 false 时不存在
  }
  // 子组件 2：受影响
  Button('底部按钮')            // false 时是第一个子组件
}                              // true 时是第二个子组件 → 位置偏移

// ✅ Visibility：组件始终存在，只切换可见性
Column() {
  // 子组件 1：始终存在，只切换 visible/hidden
  Text('内容').height(80)
    .visibility(this.show ? Visibility.Visible : Visibility.Hidden)

  // 子组件 2：不受影响
  Button('底部按钮')            // 始终是第二个子组件
}                              // 位置稳定

3.3 为什么 Blank 方案不如 Visibility 优雅

维度	Blank 方案	Visibility 方案
代码行数	需要 if/else 两分支	一行属性
高度同步	手动维护	自动（组件自带高度）
组件结构	根据条件创建不同组件	相同的组件
状态保留	销毁（重新创建）	保留
理解成本	中等（需要理解占位思想）	低（属性语义明确）

---

四、Visibility 方案的完整代码实现

4.1 完整演示代码

/**
 * Visibility 显隐控制方案 —— 完整演示
 * =========================================================
 * 核心思想：用 .visibility() 属性替代 if/else 控制显隐，
 * 组件始终存在于布局树中，Column 的子组件结构保持不变。
 *
 * 关键：使用 Visibility.Hidden 而不是 Visibility.None。
 * Hidden 保留布局空间，None 释放布局空间（同样会跳跃）。
 */

@Builder
buildDemo3Visibility() {
  Column() {
    // ========== 卡片标题区 ==========

    Row() {
      Text('👁️ Visibility 显隐控制演示')
        .fontSize(16)
        .fontWeight(FontWeight.Medium)
        .fontColor('#FFD93D')
    }
    .width('100%')
    .margin({ bottom: 8 })

    // 说明文字
    Text('通过 .visibility() 属性控制显隐，Hidden 状态保留布局空间。' +
         '组件始终存在，Column 不重排，布局不跳跃。')
      .fontSize(12)
      .fontColor('#777777')
      .lineHeight(18)
      .width('100%')
      .textAlign(TextAlign.Start)
      .margin({ bottom: 12 })

    // ========== 主演示区 ==========

    Column() {
      // 【子组件 1】通知区域 —— 通过 visibility 控制
      Column() {
        // 状态标签
        Row() {
          Text('🔔 通知区域')
            .fontSize(14)
            .fontWeight(FontWeight.Bold)
            .fontColor('#FFD93D')

          Blank()

          // 显示当前 visibility 状态
          Text(this.demo3Show ? 'Visible' : 'Hidden（占位）')
            .fontSize(10)
            .fontColor(this.demo3Show ? '#4ECDC4' : '#888888')
            .backgroundColor(this.demo3Show ? '#1A3A2E' : '#2A2A2E')
            .padding({ left: 6, right: 6, top: 2, bottom: 2 })
            .borderRadius(4)
        }
        .width('100%')
        .margin({ bottom: 8 })

        // 通知内容
        Text('这是一个通知消息，使用 .visibility() 控制显隐。')
          .fontSize(12)
          .fontColor('rgba(255,255,255,0.7)')
          .lineHeight(18)

        Text('即使隐藏也保留 80vp 空间，后续组件不受影响。')
          .fontSize(11)
          .fontColor('rgba(255,255,255,0.5)')
          .lineHeight(16)
          .margin({ top: 4 })
      }
      .width('100%')
      .height(80)
      .padding(12)
      .backgroundColor('#2A2A2E')
      .borderRadius(8)
      .border({ width: 1, color: '#FFD93D44' })
      .visibility(this.demo3Show ? Visibility.Visible : Visibility.Hidden)
      // ↑ 核心代码：一行属性替代整个 if/else！

      // 【子组件 2】中间内容区
      Column() {
        Text('📄 中间内容区域')
          .fontSize(13)
          .fontColor('#FFFFFF')
          .textAlign(TextAlign.Center)

        Text('无论上方通知是否显示，本区域位置不变')
          .fontSize(10)
          .fontColor('#888888')
          .textAlign(TextAlign.Center)
          .margin({ top: 4 })
      }
      .width('100%')
      .height(60)
      .backgroundColor('#1A1A2E')
      .borderRadius(8)
      .justifyContent(FlexAlign.Center)
      .margin({ top: 4, bottom: 4 })

      // 【子组件 3】底部固定区域
      Row() {
        Text('🔒 底部固定栏（稳定 ✅）')
          .fontSize(13)
          .fontColor('#AAAAAA')
        Blank()
        Text('不受影响')
          .fontSize(10)
          .fontColor('#4ECDC4')
      }
      .width('100%')
      .height(36)
      .padding({ left: 12, right: 12 })
      .backgroundColor('#2A2A2E')
      .borderRadius(6)
    }
    .width('100%')
    .padding(12)
    .backgroundColor('#16162A')
    .borderRadius(12)
    .border({ width: 1, color: '#FFD93D44' })

    // ========== 切换控制 ==========

    Button(this.demo3Show ? '🔴 隐藏通知（Hidden）' : '🟢 显示通知（Visible）')
      .fontSize(12)
      .fontColor('#FFFFFF')
      .backgroundColor(this.demo3Show ? '#FF6B6B' : '#FFD93D')
      .width('100%')
      .height(36)
      .borderRadius(8)
      .margin({ top: 8 })
      .onClick(() => {
        this.demo3Show = !this.demo3Show;
      })
  }
  .width('100%')
  .padding(16)
  .backgroundColor('#16162A')
  .borderRadius(16)
  .border({ width: 1, color: '#2A2A4A' })
}

4.2 状态变量

@State demo3Show: boolean = false;

4.3 核心代码解析

整个方案的核心只有一行代码：

.visibility(this.demo3Show ? Visibility.Visible : Visibility.Hidden)

这行代码做了三件事：

1. 保留组件实例：组件始终存在于布局树，不会创建也不会销毁
2. 保留布局空间：Visibility.Hidden 保留组件的原始布局尺寸
3. 跳过绘制：Hidden 状态下不执行绘制操作，节省 GPU 资源

---

五、Visibility.Hidden 与 if/else 的深度对比

5.1 组件生命周期的差异

// if/else：完整的创建-销毁生命周期
if (this.show) {
  // show = true 时：组件创建 → constructor → build → 测量 → 布局 → 绘制
  Text('内容')
    .onAppear(() => { console.log('组件出现'); })
    .onDisappear(() => { console.log('组件消失'); })
}
// show = false 时：组件销毁 → onDisappear → 从布局树移除 → 内存回收

// Visibility：只有可见性变化
Text('内容')
  .onAppear(() => { console.log('组件出现'); })     // 只在首次创建时触发
  .onDisappear(() => { console.log('组件消失'); })   // 只在最终销毁时触发
  .visibility(this.show ? Visibility.Visible : Visibility.Hidden)
// 切换时：不触发 onAppear/onDisappear
// 组件一直在内存中，只是不绘制

5.2 状态保留的差异

@State inputValue: string = '';

// if/else：状态丢失
Column() {
  if (this.show) {
    TextInput({ text: this.inputValue })
      .onChange((val: string) => { this.inputValue = val; })
  }
  // show = false → TextInput 销毁，输入内容丢失
  // show = true → 重新创建 TextInput，输入内容为空
}

// Visibility：状态保留
Column() {
  TextInput({ text: this.inputValue })
    .onChange((val: string) => { this.inputValue = val; })
    .visibility(this.show ? Visibility.Visible : Visibility.Hidden)
  // Hidden 期间 TextInput 保留，输入内容不变
  // 恢复 Visible 后，输入内容还在！
}

5.3 事件绑定的差异

// if/else：每次切换需要重新绑定事件
if (this.show) {
  Button('点击')
    .onClick(() => { this.handleClick(); })  // 每次创建重新绑定
}

// Visibility：事件绑定一次，持续有效
Button('点击')
  .onClick(() => { this.handleClick(); })    // 只绑定一次
  .visibility(this.show ? Visibility.Visible : Visibility.Hidden)
  // Hidden 期间不响应事件，但事件绑定保留

---

六、Visibility 三种模式的实际效果验证

6.1 可视化验证代码

下面的代码演示了三种模式对布局的不同影响：

@State mode: Visibility = Visibility.Visible;
@State redBlockHeight: number = 100;

build() {
  Column() {
    // 三个模式切换按钮
    Row() {
      Button('Visible').onClick(() => { this.mode = Visibility.Visible; })
        .backgroundColor('#4ECDC4').margin({ right: 4 })
      Button('Hidden').onClick(() => { this.mode = Visibility.Hidden; })
        .backgroundColor('#FFD93D').margin({ right: 4 })
      Button('None').onClick(() => { this.mode = Visibility.None; })
        .backgroundColor('#FF6B6B')
    }
    .width('100%').height(36)
    .margin({ bottom: 12 })

    // 测试区域
    Column() {
      // 上面的固定内容
      Text('上面的固定内容')
        .width('100%').height(40)
        .backgroundColor('#2A2A4A').textAlign(TextAlign.Center)

      // 红色方块 —— 切换 visibility 模式
      Column() {
        Text('我是红色方块')
          .fontSize(14).fontColor('#FFFFFF')
          .textAlign(TextAlign.Center)
        Text('高度 100vp')
          .fontSize(11).fontColor('rgba(255,255,255,0.6)')
          .textAlign(TextAlign.Center)
      }
      .width('100%')
      .height(this.redBlockHeight)
      .backgroundColor('#FF6B6B')
      .justifyContent(FlexAlign.Center)
      .visibility(this.mode)      // ← 切换三种模式
      .margin({ top: 4, bottom: 4 })

      // 下面的固定内容 —— 观察它的位置变化
      Text('下面的固定内容')
        .width('100%').height(40)
        .backgroundColor('#2A2A2E').textAlign(TextAlign.Center)
        .margin({ top: 4 })
    }
    .width('100%').padding(12)
    .backgroundColor('#16162A').borderRadius(8)
  }
  .width('100%').height('100%').padding(12)
}

运行这个代码，分别点击三个按钮观察「下面的固定内容」的位置变化：

模式	下部内容位置
Visible	在红色方块下方（5 个子组件）
Hidden	与 Visible 相同（红色方块虽不可见，但占据 100vp 空间）
None	跳到了上面（红色方块不占位，相当于子组件减少）

这验证了核心结论：只有 Visibility.Hidden 能保持布局稳定，Visibility.None 和 if/else false 的行为一致。

6.2 Hidden 与 None 的语义对比

// Hidden：语义 = "我请假了，但我的座位还在"
.visibility(Visibility.Hidden)
// 布局空间：保留
// 视觉效果：不可见
// 用户交互：不可操作
// Column 感知：有这个东西，占 100vp

// None：语义 = "我辞职了，座位也不在了"
.visibility(Visibility.None)
// 布局空间：释放
// 视觉效果：不可见
// 用户交互：不可操作
// Column 感知：没有这个东西

---

七、Visibility 方案的高级应用

7.1 多组件联动控制

同时控制多个组件的显隐，用同一个状态变量：

@State panelVisible: boolean = false;

Column() {
  // 标题栏
  Row() {
    Text('详情面板')
    Button(this.panelVisible ? '收起' : '展开')
      .onClick(() => { this.panelVisible = !this.panelVisible; })
  }
  .height(44)

  // 多个组件统一控制
  Text('详细描述信息...')
    .visibility(this.panelVisible ? Visibility.Visible : Visibility.Hidden)

  Divider().height(1)
    .visibility(this.panelVisible ? Visibility.Visible : Visibility.Hidden)

  Row() {
    Text('创建时间: 2024-01-01')
    Blank()
    Text('状态: 进行中')
  }
  .height(36)
  .visibility(this.panelVisible ? Visibility.Visible : Visibility.Hidden)
}

7.2 条件显隐 + 额外动画

虽然 Visibility 本身不支持过渡动画，但可以配合 opacity 实现淡入淡出效果：

// 错误：Visibility 切换是瞬间的，animation 不生效
Column()
  .visibility(this.show ? Visibility.Visible : Visibility.Hidden)
  .animation({ duration: 300 })   // ❌ Visibility 不会触发动画过渡

// 正确：用 opacity 控制显隐，用 visibility 控制交互
Column()
  .opacity(this.show ? 1 : 0)
  .visibility(Visibility.Visible)  // 始终可见（从布局角度）
  .animation({ duration: 300 })    // ✅ opacity 变化会触发动画
  .hitTestBehavior(this.show ? HitTestMode.Default : HitTestMode.None)

7.3 Visibility 与 Scroll 的结合

在 Scroll 容器中，Visibility 同样有效：

Scroll() {
  Column() {
    // 固定头部
    buildHeader()

    // 可收起的详细内容
    buildDetailContent()
      .visibility(this.showDetail ? Visibility.Visible : Visibility.Hidden)

    // 固定底部
    buildFooter()
  }
}

注意：如果使用 Visibility.None 而不是 Hidden，Scroll 的滚动范围会突然变化，导致用户体验很差。

7.4 与 Grid 容器的结合

Grid() {
  ForEach(this.items, (item: GridItemData) => {
    GridItem() {
      buildGridCard(item)
        .visibility(item.visible ? Visibility.Visible : Visibility.Hidden)
    }
  })
}
.columnsTemplate('1fr 1fr')
.rowsTemplate('1fr 1fr 1fr')

在 Grid 中，使用 Hidden 保留网格位置，不会导致网格项重新排列。

7.5 在 Swiper 中的应用

Swiper() {
  // 每个页面
  ForEach(this.pages, (page: PageData) => {
    Column() {
      Text(page.title).fontSize(20)
      Text(page.content).fontSize(14)

      // 每页底部的操作按钮 —— 由页面自己的状态控制显隐
      Row() {
        Button(page.showAction ? '操作' : '').width(100)
          .visibility(page.showAction ? Visibility.Visible : Visibility.Hidden)
        Blank()
        Text('页码: ' + page.index)
      }
      .height(44)
    }
  })
}

---

八、Visibility 方案的性能分析

8.1 布局计算性能

操作	if/else（无优化）	Visibility.Hidden
组件数量	变化	不变
Column 测量	每次变化重测	不变，无需重测
Column 布局	每个子组件重新布局	不变，无需重布局
子组件监听	需要监听子组件变化	不变，无需更新
性能评分	❌ 差	✅ 优秀

8.2 渲染性能

阶段	Visible	Hidden	None
测量	✅ 执行	✅ 执行	❌ 跳过
布局	✅ 执行	✅ 执行	❌ 跳过
绘制	✅ 执行	❌ 跳过	❌ 跳过
合成	✅ 执行	❌ 跳过	❌ 跳过

Visibility.Hidden 的核心性能优势：跳过绘制和合成阶段，但保留测量和布局结果。

8.3 内存占用

// if/else：false 时释放内存
if (this.show) {
  HeavyImageComponent()  // show=false 时组件销毁，内存释放
}

// Visibility：始终占用内存
HeavyImageComponent()
  .visibility(this.show ? Visibility.Visible : Visibility.Hidden)
  // show=false 时组件仍在内存中

内存建议：

• 小/中型组件（Text、Button、简单 Column）：Visibility 方案更优
• 大型组件（大图、长列表、视频播放器）：if/else 或固定容器方案更优

---

九、Visibility 方案的 6 个最佳实践

9.1 优先使用 Hidden 而非 None

// ✅ 正确：使用 Hidden 保留布局空间
.visibility(this.show ? Visibility.Visible : Visibility.Hidden)

// ❌ 错误：使用 None 不保留布局空间（仍然会跳跃）
.visibility(this.show ? Visibility.Visible : Visibility.None)

9.2 配合 hitTestBehavior 使用

// 在 Visible 时允许交互，Hidden 时禁止交互
.visibility(this.show ? Visibility.Visible : Visibility.Hidden)
// 注意：Visibility.Hidden 本身已经禁止交互，通常不需要额外设置
// 但如果配合 opacity 使用，需要 hitTestBehavior

// 示例：opacity + visibility 组合
.opacity(this.show ? 1 : 0)
.visibility(Visibility.Visible)
.hitTestBehavior(this.show ? HitTestMode.Default : HitTestMode.None)

9.3 避免 Hidden 状态的累加

// ❌ 复杂：多层嵌套 Hidden
Column() {
  Column() {
    Text('内容')
      .visibility(this.show ? Visibility.Visible : Visibility.Hidden)
  }
  .visibility(this.show ? Visibility.Visible : Visibility.Hidden)
}

// ✅ 简洁：只在最外层控制
Column() {
  Text('内容')
}
.visibility(this.show ? Visibility.Visible : Visibility.Hidden)

9.4 用常量定义 Visibility 值

// ❌ 魔法值
.visibility(this.isVisible ? Visibility.Visible : Visibility.Hidden)

// ✅ 语义化常量
private readonly VISIBLE = Visibility.Visible;
private readonly HIDDEN = Visibility.Hidden;

.visibility(this.isVisible ? this.VISIBLE : this.HIDDEN)

9.5 与 ForEach 配合的条件显隐

ForEach(this.items, (item: ItemData, index: number) => {
  Row() {
    Text(item.name)

    // 某些项显示额外信息
    Text(item.detail)
      .fontSize(12).fontColor('#888888')
      .visibility(item.showDetail ? Visibility.Visible : Visibility.Hidden)
  }
  .height(44).width('100%')
})

9.6 调试技巧

在开发调试时，可以用颜色标记 Hidden 区域，确认它们确实占用空间：

// 调试模式：用半透明背景标记 Hidden 区域
Column()
  .visibility(this.show ? Visibility.Visible : Visibility.Hidden)
  .backgroundColor(this.show ? '#2A2A2E' : '#FFD93D11')  // 极淡黄色标记

正式发布时移除调试背景色即可。

---

十、常见问题与解答

Q1：Visibility.Hidden 的子组件也会隐藏吗？

答：会。当父组件设置为 Visibility.Hidden 时，所有子组件也随之隐藏。子组件本身的 visibility 设置会被父级覆盖。

Column()
  .visibility(Visibility.Hidden)  // 父级隐藏
{
  Text('子组件 1').visibility(Visibility.Visible)  // 被覆盖，仍然隐藏
  Text('子组件 2').visibility(Visibility.Visible)  // 被覆盖，仍然隐藏
}

Q2：Visibility.Hidden 和 .enabled(false) 有什么区别？

维度	Visibility.Hidden	.enabled(false)
视觉	完全隐藏	正常显示（可能变灰）
交互	完全禁止	禁止（按钮不可点击）
布局	占位	占位
语义	「不在」但位置保留	「在」但不能操作

Q3：用 Visibility 替代 if/else 后，组件过多会不会影响性能？

答：通常不会。Visibility.Hidden 只跳过绘制，不跳过测量和布局，但测量布局的计算量远小于绘制的计算量。一般的 UI 页面有几十到几百个组件，Hidden 状态的组件消耗可以忽略不计。

但是，如果隐藏了大量组件（数千个），比如长列表中大部分项隐藏，建议还是用 if/else 或懒加载。

Q4：Visibility.Hidden 组件的 onAreaChange 还会触发吗？

答：不会。当组件处于 Visibility.Hidden 状态时，它不参与布局变化监听，onAreaChange 不会触发。

Q5：切换 Visibility 时，子组件的 @State 会重置吗？

答：不会。Visibility.Hidden 只影响绘制和交互，不影响组件的状态变量。子组件的 @State 变量值会保留。

@State count: number = 0;

Column()
  .visibility(this.show ? Visibility.Visible : Visibility.Hidden)
{
  Text('计数: ' + this.count)
  Button('+1').onClick(() => { this.count++; })
}

// Hidden 期间 count 值不变
// 恢复 Visible 后显示的是原来的 count 值

Q6：可以在同一组件上同时使用 if/else 和 .visibility() 吗？

答：可以，但通常不需要。如果已经用 if/else 控制组件的存在与否，再用 visibility 的意义不大。

// 冗余的组合
if (this.show) {
  Text('内容')
    .visibility(Visibility.Visible)  // 多余：if 已经保证了存在
}

---

十一、Visibility 方案的局限及扩展

11.1 局限一：不能做过渡动画

问题：Visibility 切换是瞬间的，不支持过渡动画。

解决方案：见第七章 7.2 节，用 opacity + animation 替代。

11.2 局限二：组件始终在内存中

问题：不适合大型组件（图片、视频、地图）的显隐控制。

解决方案：对大型组件使用 if/else 或固定容器方案，对小型组件使用 Visibility。

11.3 局限三：不能动态改变布局结构

问题：Visibility 只适合「同一组件的显隐」，不适合「不同组件的切换」。

// Visibility 不适合：加载状态和内容状态切换
Column() {
  // 状态 A
  if (this.loading) {
    LoadingProgress()
  }
  // 状态 B
  else {
    buildContent()
  }
}
// 这种场景应该用 if/else 或固定容器

解决方案：结构变化的场景用 if/else + 固定容器方案。

11.4 局限四：单组件隐性成本

Visibility.Hidden 的组件虽然不绘制，但 @State 变量的监听、@Watch 回调、@Consume/@Provide 的数据绑定仍然活跃。

@Component
struct HeavyComponent {
  @State data: DataItem[] = [];   // 即使 Hidden，数据变化仍会触发更新

  build() {
    // ...
  }
  .visibility(Visibility.Hidden)  // 数据监听仍在工作！
}

解决方案：如果 Hidden 期间不需要数据更新，考虑用 @Link 或手动控制更新。

---

十二、与其他方案的组合使用

12.1 Visibility + Blank 组合

Column() {
  // 场景：通知区域，可隐藏但保留空间
  buildNotification()
    .visibility(this.showNotif ? Visibility.Visible : Visibility.Hidden)

  // 占位区：在某些条件下还需要额外的空白
  if (this.needExtraSpace) {
    Blank().height(40)
  } else {
    Blank().height(20)   // 高度不同，用 Blank 保持同步
  }
}

12.2 Visibility + 固定容器组合

// 外层固定容器保证绝对稳定
Column().height(200) {
  // 内部用 visibility 控制具体内容
  if (this.state === 'loading') {
    LoadingProgress()
      .visibility(this.state === 'loading' ? Visibility.Visible : Visibility.Hidden)
  } else if (this.state === 'error') {
    buildErrorView()
      .visibility(this.state === 'error' ? Visibility.Visible : Visibility.Hidden)
  } else {
    buildContentView()
      .visibility(this.state === 'content' ? Visibility.Visible : Visibility.Hidden)
  }
}

12.3 Visibility + Opacity 组合（推荐）

// 既保留布局稳定，又能做动画
Column() {
  Text('淡入淡出的通知')
    .height(80)
    .opacity(this.show ? 1 : 0)
    .animation({ duration: 300, curve: Curve.EaseInOut })
    .hitTestBehavior(this.show ? HitTestMode.Default : HitTestMode.None)
    .visibility(Visibility.Visible)  // 始终可见（布局层面）
}

这是实际项目中最常用的组合——用 opacity 做视觉动画，用 visibility(Visible) 保证布局参与，用 hitTestBehavior(None) 控制交互。

---

十三、总结

13.1 核心要点

1. Visibility.Hidden 是解决 Column 布局跳跃的最简洁方案——只需一行属性
2. 组件始终存在，子组件数量和结构不变，Column 不触发重新排列
3. Hidden 保留布局空间，None 不保留（= if/else false，同样会跳跃）
4. 状态保留：Hidden 期间组件的 @State、输入内容、滚动位置保持不变
5. 性能友好：Hidden 跳过绘制，但占位不引起布局抖动

13.2 与其他方案的对比

方案	代码量	组件结构	状态保留	动画	推荐度
if/else	少	变化	不保留	无	⭐⭐
Blank	中	不变	不保留	无	⭐⭐⭐
Visibility	少	不变	保留	无	⭐⭐⭐⭐
Opacity	少	不变	保留	可做	⭐⭐⭐⭐
固定容器	中	内部变化	不保留	需额外	⭐⭐⭐⭐⭐

13.3 几句话记住

• Visibility.Hidden = 保留位置，不绘制，不交互
• Visibility.None = 不保留位置，不绘制，不交互（= if/else false）
• 用 Hidden，不用 None——后者同样会跳跃
• 一行 .visibility() 胜过整个 if/else 结构

---

HarmonyOS NEXT 6.1.1（API 24）