HarmonyOS 鸿蒙Next 我使用slider组件想实现滑动控制Image组件的圆角变化，发现滑动时圆角没有变化不生效

发布于 1周前 作者 htzhanglong 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 我使用slider组件想实现滑动控制Image组件的圆角变化，发现滑动时圆角没有变化不生效

下面是我的代码:

```js
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
  [@State](/user/State) radius: number = 0

  build() {
    Column() {

      Image($r('app.media.startIcon'))
        .width(100)
        .borderRadius(this.radius)// 根据滑轨设置圆角不成功

      Column() {
        Text(this.radius + 'PX')
          .fontColor('#007AFF')
        Slider({
          min: 0,
          max: 60,
          style: SliderStyle.OutSet,
          value: this.radius
        })
          .blockSize({ width: 20, height: 20 })
          .trackColor('#E5E5EA')
          .selectedColor('#007AFF')
          .trackThickness(6)
          .width('100%')
          .margin({
            top: 7,
            bottom: 13
          })
      }
    }
    .padding(50)
    .width('100%')
    .height('100%')

  }
}

有大佬能帮忙分析下吗？


更多关于HarmonyOS 鸿蒙Next 我使用slider组件想实现滑动控制Image组件的圆角变化，发现滑动时圆角没有变化不生效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
4 回复

兄弟，我运行了你的代码，发现两点问题：1是如果你是想通过Slider组件值改变来同步改变Image组件的圆角，需要将radius双向绑定给Slider组件的value值；2是实现圆角变化效果后如果需要图片跟随圆角变化，需要给Image组件添加.clip(true)这个属性。

可以试试我改过后的代码：

@Entry
@Component
struct Index {
  @State radius: number = 0

  build() {
    Column() {

      Image($r('app.media.startIcon'))
        .width(100)
        .borderRadius(this.radius)// 根据滑轨设置圆角不成功
        .clip(true) //裁剪超出Image组件的图片
      Column() {
        Text(this.radius + 'PX')
          .fontColor('#007AFF')
        Slider({
          min: 0,
          max: 60,
          style: SliderStyle.OutSet,
          value: this.radius   //双向绑定
        })
          .blockSize({ width: 20, height: 20 })
          .trackColor('#E5E5EA')
          .selectedColor('#007AFF')
          .trackThickness(6)
          .width('100%')
          .margin({
            top: 7,
            bottom: 13
          })

      }
    }
    .padding(50)
    .width('100%')
    .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next 我使用slider组件想实现滑动控制Image组件的圆角变化，发现滑动时圆角没有变化不生效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


多谢大佬，因为我卡在第一个问题了所以还没发现你提到的第二点。现在ok了。

楼上兄弟说的也对，不是没改变，换个控件效果就很明显了

@Entry @Component struct Index { @State radius: number = 0

build() { Column() {

  Text('')
    .width(100)
    .height(100)
    .backgroundColor(Color.Yellow)
    .borderRadius(this.radius) // 根据滑轨设置圆角不成功

  Column() {
    Text(this.radius + 'PX')
      .fontColor('#007AFF')
    Slider({
      min: 0,
      max: 60,
      style: SliderStyle.OutSet,
      value: this.radius
    })
      .onChange(val => {
        console.log('val=' + String(val))
        this.radius = val
      })
      .blockSize({ width: 20, height: 20 })
      .trackColor('#E5E5EA')
      .selectedColor('#007AFF')
      .trackThickness(6)
      .width('100%')
      .margin({
        top: 7,
        bottom: 13
      })
  }
}
.padding(50)
.width('100%')
.height('100%')
.backgroundColor(Color.Gray)

} }

在HarmonyOS鸿蒙系统中，使用slider组件控制Image组件的圆角变化，通常需要通过绑定数据和事件监听来实现。如果滑动时圆角没有变化，可能是数据绑定或事件处理没有正确设置。

  1. 确认数据绑定：确保slider的值与Image组件的圆角属性正确绑定。在HML文件中，可以使用{{ }}语法绑定数据。例如，如果slider的值绑定到sliderValue，则Image组件的圆角属性应设置为与sliderValue相关的表达式。

  2. 事件监听：为slider添加change事件监听器，当slider值变化时，更新Image组件的圆角。在JS文件中，通过@change事件监听slider的值变化，并动态更新Image组件的样式。

  3. 样式更新：确保Image组件的圆角样式是通过动态样式或内联样式设置的，且样式属性名与鸿蒙系统的规范一致。

  4. 检查代码逻辑：仔细检查代码逻辑，确保没有逻辑错误导致数据未能正确更新。

如果以上步骤均正确无误，但问题依旧存在，可能是系统或框架的bug。此时，如果问题依旧没法解决请联系官网客服，官网地址是：

https://www.itying.com/category-93-b0.html，

回到顶部