案例概述

Opacity 组件用于控制子组件的透明度。通过 opacity 参数可以设置透明度值。本案例展示了如何使用 Opacity 创建透明度效果。

核心概念

1. Opacity 基础

Opacity 是控制透明度的组件。

2. 透明度值

透明度值范围从 0.0（完全透明）到 1.0（完全不透明）。

3. 性能考虑

Opacity 会影响性能，应谨慎使用。

代码详解

示例 1：基础透明度

class BasicOpacityExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Opacity(
      opacity: 0.5,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    );
  }
}

代码解释： 这个示例展示了 Opacity 的基础用法。opacity 参数值为 0.5 表示 50% 不透明度（50% 透明）。Opacity 会影响整个子树的渲染，包括所有子组件。值范围是 0.0（完全透明，不可见）到 1.0（完全不透明，正常显示）。需要注意的是，Opacity 是一个相对昂贵的操作，因为它需要创建离屏缓冲区并合成，所以在大量使用时可能影响性能。对于简单的透明度需求，应优先考虑使用 Color 的 alpha 通道。

示例 2：动态透明度

class DynamicOpacityExample extends StatefulWidget {
  @override
  State<DynamicOpacityExample> createState() => _DynamicOpacityExampleState();
}

class _DynamicOpacityExampleState extends State<DynamicOpacityExample> {
  double _opacity = 1.0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Opacity(
          opacity: _opacity,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
        Slider(
          value: _opacity,
          onChanged: (value) {
            setState(() {
              _opacity = value;
            });
          },
          min: 0,
          max: 1,
        ),
      ],
    );
  }
}

代码解释： 这个示例展示了如何动态改变透明度。通过 Slider 控制 _opacity 状态变量，每次滑块改变时调用 setState 更新 Opacity 的 opacity 参数。这种交互模式在调试、设置面板、图片编辑器等应用中很常见。用户可以实时看到透明度变化的效果。需要注意的是，频繁改变 Opacity 可能导致性能问题，如果需要平滑的透明度动画，应使用 AnimatedOpacity 或 FadeTransition 而不是频繁的 setState。

示例 3：多层透明度

class MultiLayerOpacityExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          width: 200,
          height: 200,
          color: Colors.blue,
        ),
        Opacity(
          opacity: 0.5,
          child: Container(
            width: 150,
            height: 150,
            color: Colors.green,
          ),
        ),
        Opacity(
          opacity: 0.3,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.red,
          ),
        ),
      ],
    );
  }
}

代码解释： 这个示例使用 Stack 堆叠多个具有不同透明度的容器。底层是完全不透明的蓝色方块，上面叠加 50% 透明的绿色方块，最上层是 30% 透明的红色方块。由于透明度的叠加，上层元素会与下层元素混合，产生颜色混合效果。这种多层透明效果常用于卡片设计、玻璃态效果（glassmorphism）、图层编辑等场景。理解透明度的叠加规则对于设计复杂的视觉效果很重要。

示例 4：渐变透明度

class GradientOpacityExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: List.generate(5, (index) {
        return Opacity(
          opacity: 1.0 - (index * 0.2),
          child: Container(
            width: 100,
            height: 50,
            color: Colors.blue,
          ),
        );
      }),
    );
  }
}

代码解释： 这个示例使用 List.generate 创建 5 个容器，每个容器的透明度逐步降低。第一个是 1.0（完全不透明），第二个是 0.8，以此类推，最后一个是 0.2（几乎透明）。这种渐变透明效果常用于淡出效果、视觉引导、优先级提示等。通过逐步改变透明度，可以创建视觉上的层次感和深度感。这种模式在列表、网格、卡片堆等场景中很有用。

示例 5：动画透明度

class AnimatedOpacityExample extends StatefulWidget {
  @override
  State<AnimatedOpacityExample> createState() => _AnimatedOpacityExampleState();
}

class _AnimatedOpacityExampleState extends State<AnimatedOpacityExample> {
  double _opacity = 1.0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        AnimatedOpacity(
          opacity: _opacity,
          duration: const Duration(milliseconds: 500),
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
        ElevatedButton(
          onPressed: () {
            setState(() {
              _opacity = _opacity == 1.0 ? 0.0 : 1.0;
            });
          },
          child: const Text('切换透明度'),
        ),
      ],
    );
  }
}

代码解释： 这个示例使用 AnimatedOpacity 而不是普通 Opacity，实现平滑的透明度动画。当按钮被点击时，_opacity 在 0.0 和 1.0 之间切换，AnimatedOpacity 会在 500 毫秒内平滑地过渡到新的透明度值。这比频繁调用 setState 更高效，因为 AnimatedOpacity 内部使用 Animation 和 Ticker 来优化渲染。这种模式常用于淡入淡出效果、加载指示器、提示框进入/退出等场景。

高级话题

1. 动态/响应式设计

根据屏幕大小调整透明度。

2. 动画与过渡

自定义透明度动画。

3. 搜索/过滤/排序

在搜索中使用透明度。

4. 选择与批量操作

支持批量操作。

5. 加载与缓存

显示加载状态。

6. 键盘导航

支持键盘快捷键。

7. 无障碍支持

提供无障碍支持。

8. 样式自定义

自定义样式。

9. 数据持久化/导出

保存状态。

10. 单元测试与集成测试

测试功能。

PC 端适配要点

• 根据屏幕大小调整透明度
• 支持键盘快捷键
• 提供清晰的透明度效果

实际应用场景

• 禁用效果：禁用按钮
• 淡入淡出：过渡效果
• 水印效果：添加水印
• 叠加效果：创建叠加效果

扩展建议

• 学习高级透明度库
• 研究性能优化
• 探索自定义效果
• 集成效果库

总结

Opacity 是控制透明度的简单方式。通过灵活使用 Opacity，可以创建各种透明度效果。
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net