HarmonyOS 鸿蒙Next Flutter 应用使用 Gradient 渐变背景出现颜色断层问题

HarmonyOS 鸿蒙Next Flutter 应用使用 Gradient 渐变背景出现颜色断层问题 问题描述

在鸿蒙设备上运行 Flutter 应用时，使用 LinearGradient 或 RadialGradient 的组件会出现颜色断层现象，表现为屏幕右侧部分区域颜色异常，看起来像屏幕坏了一样。iOS 和 Android 设备上表现正常。

环境信息

• Flutter 版本: 3.24.5
• 平台: HarmonyOS
• 复现概率: 100%

复现步骤

使用以下 Flutter 代码创建一个带渐变背景的卡片：

Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [
        Colors.white.withValues(alpha: 0.25),
        Colors.white.withValues(alpha: 0.15),
      ],
    ),
    borderRadius: BorderRadius.circular(24),
    border: Border.all(
      color: Colors.white.withValues(alpha: 0.5),
      width: 1.5,
    ),
  ),
  child: /* 内容 */,
)

现象: 在鸿蒙设备上，卡片右侧会出现明显的颜色断层线。

问题分析

经过对比测试，发现：

1. 渐变类型：LinearGradient 和 RadialGradient 都会出现此问题
2. 透明度组合：渐变 + 透明度 (withOpacity 或 withValues(alpha:)) 会触发问题
3. 纯色正常：使用纯色 + 透明度不会出现断层

// ❌ 有断层
gradient: LinearGradient(
  colors: [color.withValues(alpha: 0.25), color.withValues(alpha: 0.15)]
)

// ✅ 无断层
color: color.withValues(alpha: 0.25)

临时解决方案

为避免鸿蒙平台出现断层，需将所有渐变背景改为纯色：

// 不兼容鸿蒙的写法
decoration: BoxDecoration(
  gradient: LinearGradient(colors: [...]),
)

// 兼容鸿蒙的写法
decoration: BoxDecoration(
  color: yourColor.withValues(alpha: 0.25),
)

期望

希望鸿蒙 Flutter 引擎能够修复 Gradient 渐变渲染的问题，使其与 iOS/Android 表现一致，这样开发者就可以放心使用渐变效果，无需针对鸿蒙平台做特殊处理。

备注

这是 Flutter 在鸿蒙平台的渲染引擎兼容性问题，建议官方关注并修复。相关问题已在多个 Flutter 应用中复现。