HarmonyOS Slider UI展示问题

1、水平Slider左右padding的默认10vp如何去掉或者覆盖。期望是没有这个padding,如何实现?

2、Slider的如何将滑块去掉?设置属性blockColor为透明色#00ffffff,会有黑色蒙层,无法实现预期效果。

3、当高度设置成0.5的时候,已经滑动的部分展示出来的高度不是0.5。

build() {  
  Column() {  
    Row(){  
      Slider({ min: 0, max: 100, step: 1,value:40})  
        .onChange((value: number, mode: SliderChangeMode) => {  
        })  
        .height(0.5)  
        .padding(0)  
        .selectedColor("#ed6f21")  
        .trackThickness(0.5)  
        .blockBorderWidth(0.5)  
        .trackColor('#80ffffff')  
        .blockColor('#00000000')  
    }  
    .height(0.5)  
  }  
}
HarmonyOS
2024-09-27 12:59:37
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

1、当Slider为水平滑动条时,Slider默认高度为40vp,宽度为父容器的宽度,滑动条居中显示,左右间距为分别为10vp,若设置padding,padding不会覆盖左右间距。可以使用.margin属性拉长Slider宽度。

2、想去掉滑块,可以将滑块设置为滑轨内,然后滑块和滑动条设置相同颜色,然后把滑动块通过blockSize设置小,默认blockSize是长宽为12

3、滑动高度是trackThickness属性来设置的。

示例代码如下:

@Entry  
@Component  
struct Example {  
  build() {  
    Column() {  
      Row() {  
        Slider({  
          min: 0,  
          max: 100,  
          step: 1,  
          value: 40,  
          style: SliderStyle.InSet  
        })  
          .margin({ left: -10, right: -10 })  
          .selectedColor("#ed6f21")  
          .trackThickness(20)  
          .blockBorderWidth(0)  
          .blockBorderColor("#ed6f21")  
          .trackColor('#000000')  
          .blockColor('#ed6f21')  
          .blockSize({ width: 0.2, height: 0.2 })  
      }.width('100%').backgroundColor(Color.Pink).height(50)  
    }  
  }  
}
分享
微博
QQ
微信
回复
2024-09-27 17:19:52
相关问题
HarmonyOS Slider使用问题
39浏览 • 1回复 待解决
HarmonyOS Slider滑动问题
394浏览 • 1回复 待解决
HarmonyOS Slider值回调问题
30浏览 • 1回复 待解决
HarmonyOS UI展示与点击区域发生偏移
49浏览 • 1回复 待解决
HarmonyOS RichText 展示问题
179浏览 • 1回复 待解决
HarmonyOS UI问题
17浏览 • 1回复 待解决
HarmonyOS Slider showTips
302浏览 • 1回复 待解决
JS的Slider旋转问题有知道的吗?
3235浏览 • 1回复 待解决
HarmonyOS UI布局问题
422浏览 • 1回复 待解决
HarmonyOS LazyForEach问题刷新UI问题
71浏览 • 1回复 待解决
HarmonyOS DatePicker组件年份展示问题
450浏览 • 1回复 待解决
HarmonyOS List展示不全的问题
377浏览 • 1回复 待解决
HarmonyOS textarea展示最新数据问题
19浏览 • 1回复 待解决
HarmonyOS UI测试API问题
28浏览 • 1回复 待解决
HarmonyOS UI组件使用问题
26浏览 • 1回复 待解决
HarmonyOS 自定义Slider
34浏览 • 1回复 待解决
HarmonyOS 双向滑动Slider组件
39浏览 • 1回复 待解决
HarmonyOS UI 单位适配问题
316浏览 • 1回复 待解决
HarmonyOS UI测试框架问题
53浏览 • 1回复 待解决
可以用JS UI组件来做进度展示吗?
5775浏览 • 1回复 待解决
HarmonyOS 列表展示list懒加载问题
657浏览 • 1回复 待解决
HarmonyOS UI内部使用AppStorage问题
379浏览 • 1回复 待解决