按钮设置渐变属性后如何设置按压效果
=================

#### 问题现象

按钮设置了linearGradient渐变属性后，长按没有按压态显示效果，该如何设置呢？

#### 效果预览

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/6d/v3/2BHu45BQQ1GMFjjY7KeKJw/zh-cn_image_0000002658919519.gif?HW-CC-KV=V1&HW-CC-Date=20260709T134041Z&HW-CC-Expire=86400&HW-CC-Sign=21F679CB23A668DA7FB14AE7234C847B83EB6FB4D63D6081C576A91BD6FEDFF0 "点击放大")

#### 背景知识

*   组件可通过设置[linearGradient](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-gradient-color)属性设置组件的颜色渐变效果。
*   [hdsEffect](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ui-design-hdseffect)：本模块提供组件的拓展视效能力，包括组件点光源效果、按压光效、动画控制。

#### 解决方案

*   **方案一**：参考[按压阴影](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-visual-effect-background-color)实现。hdsEffect模块从6.0.0(20)Beta1版本开始，新增支持。
*   **方案二**：设置颜色渐变后，长按按钮不会让渐变色变暗。需要识别长按事件[LongPressGesture](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-gestures-longpressgesture)，在其中修改linearGradient参数。
    
    @Entry
    @Component
    struct GradientDemo {
      normalSet: Array<\[ResourceColor, number\]\> = \[\[0xEBD7FF, 0.0\], \[0x0000ff, 0.3\], \[0x19CEFF, 1.0\]\];
      _//_ _按压态渐变色，可以根据需求调配颜色_
      pressedSet: Array<\[ResourceColor, number\]\> = \[\[0x92859E, 0.0\], \[0x0000AA, 0.3\], \[0x1084A3, 1.0\]\];
      @State bgColorSet: Array<\[ResourceColor, number\]\> = this.normalSet;
    
      build() {
        Column() {
          Button('test', { type: ButtonType.Capsule})
            .width(200)
            .height(50)
            .backgroundColor(Color.Transparent) _// 设置渐变色_
            .linearGradient({
              angle: 90,
              colors: this.bgColorSet
            })
            .gesture(GestureGroup(GestureMode.Parallel,
             _ // 触发长按的最短时间为1ms，duration小于等于0时，按照默认值500ms处理_
              LongPressGesture({ duration: 1 })
                .onAction(() \=\> {
                  this.bgColorSet \= this.pressedSet;
                })
                .onActionEnd(() \=\> {
                  this.bgColorSet \= this.normalSet;
                })
                .tag('long press')
            ));
          Button('test', { type: ButtonType.Capsule})
            .width(200)
            .height(50)
            .margin({ top: 50})
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
        .alignItems(HorizontalAlign.Center)
      }
    }
    

#### 总结

只使用backgroundColor修改按钮背景，支持按压态，将背景变灰。但如果使用linearGradient、backgroundImage等属性修改背景，则渐变色、背景图部分不会自动变灰，需要开发者自行实现。

修改opacity有类似的效果，对于上述按钮，调低会使按钮变白，不能满足要求。