一、结论

鸿蒙系统6.0提供了，自带背景的双边流光 HdsVisualComponent（通用视效组件）

1、控制两条独立的流光：每条流光都能设起始位置、终止位置和颜色，比如一条从左到右，一条从下到上，颜色还能不一样。 2、叠加背景板颜色：背景可以是单色，也能搞渐变色（传颜色数组就行），不用再额外套一个 Container 当背景。

二、代码实现和详细解释：

1、先导入必须的模块

首先得把需要的组件和枚举导入进来，不用记全，重点是这几个

HdsVisualComponent：核心的视效组件，所有效果都靠它渲染

HdsSceneController：用来控制场景参数（比如流光位置、颜色）

HdsSceneType： 指定场景类型，这里必须用 DUAL_EDGE_FLOW_LIGHT_WITH_BACKGROUND_MASK（双边流光带背景）

HdsVisualComponentAttribute： 可选，用来加更多属性配置，基础用法暂时用不上，但导入也不影响。

代码如下，直接复制到页面顶部就行：

import {
  HdsVisualComponent,
  HdsSceneController,
  HdsSceneType,
  // HdsVisualComponentAttribute // 基础用法暂不启用，注释掉也能跑
} from '@kit.UIDesignKit';
// 别忘了导入Color，处理颜色用
import { Color } from '@ohos.ui';

2、初始化场景控制器，配置核心参数

接下来要创建 HdsSceneController 实例，关键是通过 setSceneParams 配置参数。这里得拎清楚每个参数的作用，不然效果可能跟预期不一样：

这里有个小细节： startPos 和 endPos 是相对位置，范围建议在 -1 到 1 之间。

正数代表“从组件起点向终点方向”（比如水平组件的从左到右），负数代表“从终点向起点方向”（比如从右到左）。

比如 endPos: 0.5 就是流光到组件中间位置停，endPos: -0.5 就是从中间往反方向延伸。

初始化代码可以用 @State 装饰器，方便后续动态修改参数（比如点击改变颜色）：

@State sceneController: HdsSceneController = new HdsSceneController()
  .setSceneParams({
    // 背景用红绿渐变，从绿到红
    backgroundMaskColors: [Color.Green, Color.Red],
    // 第一条流光：从0位置开始，到中间（0.5）结束，红色
    firstEdgeFlowLight: {
      startPos: 0,
      endPos: 0.5,
      color: Color.Red
    },
    // 第二条流光：从0位置开始，到反方向中间（-0.5）结束，绿色
    secondEdgeFlowLight: {
      startPos: 0,
      endPos: -0.5,
      color: Color.Green
    }
  });

3、渲染 HdsVisualComponent，绑定场景

最后一步就是在 build 里把 HdsVisualComponent 渲染出来，指定场景类型和控制器，再设好宽高（不然组件没大小，看不到效果）。

这里建议用 Stack 包一下，方便后续叠加其他内容（比如文字、图标）。比如做胶囊按钮的话，就把文字放在 Stack 里，跟 HdsVisualComponent 叠在一起。

这个功能从 6.0.0 (20) Beta1 开始支持，低于这个版本的设备会报错，建议在使用前加版本判断（比如用 deviceInfo.apiVersion 做兼容）。

上面的基础版能看到效果，但实际开发中肯定需要交互（比如点击改变流光颜色）。我把 Demo 改了下，做了个“点击切换流光颜色”的胶囊按钮，直接复制就能跑。

import {
  HdsVisualComponent,
  HdsSceneController,
  HdsSceneType
} from '@kit.UIDesignKit';
import { Color, FontWeight, Alignment } from '@ohos.ui';
import { Component, Entry, State, Stack, Text, TapGesture } from '@ohos.ui.components';

@Entry
@Component
struct DualEdgeFlowLightDemo {
  // 用@State存颜色，方便点击修改
  @State bgColors: Color[] = [Color('#2196F3'), Color('#9C27B0')]; // 初始背景：蓝到紫
  @State firstFlowColor: Color = Color('#FFEB3B'); // 第一条流光：黄色
  @State secondFlowColor: Color = Color('#00E676'); // 第二条流光：绿色

  // 场景控制器：依赖颜色状态，所以用getter动态更新
  get sceneController(): HdsSceneController {
    return new HdsSceneController()
      .setSceneParams({
        backgroundMaskColors: this.bgColors,
        firstEdgeFlowLight: {
          startPos: 0,
          endPos: 0.6, // 第一条流光大半屏
          color: this.firstFlowColor
        },
        secondEdgeFlowLight: {
          startPos: 0,
          endPos: -0.6, // 第二条流光反方向大半屏
          color: this.secondFlowColor
        }
      });
  }

  build() {
    Stack({ alignContent: Alignment.Center }) {
      // 1. 双边流光背景
      HdsVisualComponent()
        .scene(
          HdsSceneType.DUAL_EDGE_FLOW_LIGHT_WITH_BACKGROUND_MASK,
          this.sceneController,
          () => {
            console.info('流光渲染成功，点击可切换颜色～');
          }
        )
        .width('80%')
        .height(56) // 胶囊按钮高度，固定更美观
        .borderRadius(28) // 圆角=高度/2，完美胶囊
        // 加点击手势：切换颜色
        .gesture(
          TapGesture()
            .onAction(() => {
              // 点击切换颜色：蓝紫→红绿，黄→红，绿→黄
              this.bgColors = this.bgColors[0] === Color('#2196F3') 
                ? [Color.Green, Color.Red] 
                : [Color('#2196F3'), Color('#9C27B0')];
              this.firstFlowColor = this.firstFlowColor === Color('#FFEB3B') 
                ? Color.Red 
                : Color('#FFEB3B');
              this.secondFlowColor = this.secondFlowColor === Color('#00E676') 
                ? Color('#FFEB3B') 
                : Color('#00E676');
            })
        )

      // 2. 叠加按钮文字
      Text('点击切换流光颜色')
        .fontSize(18)
        .fontColor(Color.White)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color('#F5F5F5')) // 页面背景，突出胶囊
  }
}