HarmonyOS 鸿蒙Next分段按钮支持沉浸光感视效材质吗

HarmonyOS 鸿蒙Next分段按钮支持沉浸光感视效材质吗 如题,我注意到系统应用已经使用上了带有沉浸光感效果的分段按钮如图,我目前的开发环境使用了API23,请问segmentbuttonV2有相关的参数可以实现吗?


更多关于HarmonyOS 鸿蒙Next分段按钮支持沉浸光感视效材质吗的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

尊敬的开发者,您好,SegmentButton当前不支持沉浸光感视效,您可以参考:双边边缘流光-视效-UI Design Kit(UI设计套件)-应用框架 - 华为HarmonyOS开发者 实现背景边缘流光的特效,示例代码如下:

import { SegmentButtonV2Items, TabSegmentButtonV2 } from '@kit.ArkUI';
import { hdsEffect } from '@kit.UIDesignKit';

@Entry
@ComponentV2
struct TabSegmentButtonV2Example {
  @Local textItems: SegmentButtonV2Items = new SegmentButtonV2Items([
    { text: '手机' },
    { text: '平板' },
  ]);
  @Local textSelectedIndex: number = 0;
  @Local controller: hdsEffect.ShaderEffectController = new hdsEffect.ShaderEffectController();

  build() {
    Scroll() {
      Column({ space: 12 }) {
        TabSegmentButtonV2({
          items: this.textItems,
          selectedIndex: this.textSelectedIndex!!,
        })
          .borderRadius(20)
          .visualEffect(new hdsEffect.HdsEffectBuilder()
            .shaderEffect({
              effectType: hdsEffect.EffectType.DUAL_EDGE_FLOW_LIGHT,
              animation: {
                duration: 10000,
                iterations: -1,
                autoPlay: true,
                onFinish: () => {
                  console.info('Succeeded in finishing');
                }
              },
              controller: this.controller
            })
            .buildEffect())
          .clip(true);

      }
      .constraintSize({ minHeight: '100%' })
      .justifyContent(FlexAlign.Start)
      .padding(16);
    }
    .backgroundImage($r('app.media.img'))

    .backgroundImageSize({
      width: '100%',
      height: '100%'
    })
    .width('100%')
    .height('100%');
  }
}

您看下如上demo是否满足您的需求,如果还是不能满足您的需求,麻烦您提供如下信息:

请问您是在什么样的业务场景中使用该能力,交互流程是怎样的,在哪一个环节遇到了问题?方便说明能力不满足可能带来的影响:什么时间用到?是否高频?有无三方库可以做到?若提供该能力,是否会造成大工作量返工?请您注意提供的内容不要包含您或第三方的非公开信息,如给您带来不便,敬请谅解。

更多关于HarmonyOS 鸿蒙Next分段按钮支持沉浸光感视效材质吗的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


目前不要把系统应用里的所有沉浸光感效果都等同于 SegmentButtonV2 已开放参数。就你这个场景,SegmentButtonV2 如果没有暴露 systemMaterialEffect 或类似材质参数,就不能直接通过一个属性打开同款效果。

可行做法一般有两种:

  1. 如果只是接近视觉效果,用外层容器做半透明背景、blur/backdropBlur、边缘高光,再把 SegmentButton 放进去。

  2. 如果必须和系统组件一致,优先等 HDS/ArkUI 后续开放对应参数,不建议深度魔改内部结构。

另外要注意系统应用可能使用了未公开组件或内部样式,不一定能在三方应用里 1:1 复刻。

这个效果没有官方组件,如果想实现的话,需要通过hdsTabs沉浸光感魔改,或者等到鸿蒙7.0发布。

官方没提到这个组件的沉浸式光感适配,建议采用backgroundBlurStyle实现毛玻璃效果看看效果呢~

支持。HarmonyOS NEXT 分段按钮可通过 backgroundEffect 属性设置光感材质,或在 VisualEffect 中启用沉浸光感视效,实现动态光照与模糊效果。

鸿蒙Next的 SegmentButton 组件本身支持沉浸光感视效。在 API 23 中,通过设置 fontUIConfig 参数下的 fill 属性为 BlendStyle 即可实现类似系统应用的磨砂半透明效果。例如将 fill 指定为 BlendStyle.EFFECT_STYLE,按钮背景就会呈现光感视效;若需自定义颜色,可使用 BlendStyle.color 配合透明度。无需额外自定义绘制。

回到顶部