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使用问题
282浏览 • 1回复 待解决
HarmonyOS Slider滑动问题
643浏览 • 1回复 待解决
HarmonyOS Slider值回调问题
283浏览 • 1回复 待解决
HarmonyOS UI展示与点击区域发生偏移
178浏览 • 1回复 待解决
HarmonyOS Slider showTips
506浏览 • 1回复 待解决
HarmonyOS RichText 展示问题
263浏览 • 1回复 待解决
HarmonyOS UI问题
233浏览 • 1回复 待解决
JS的Slider旋转问题有知道的吗?
3519浏览 • 1回复 待解决
HarmonyOS UI布局问题
650浏览 • 1回复 待解决
HarmonyOS LazyForEach问题刷新UI问题
286浏览 • 1回复 待解决
HarmonyOS 自定义Slider
260浏览 • 1回复 待解决
HarmonyOS 双向滑动Slider组件
238浏览 • 1回复 待解决
HarmonyOS DatePicker组件年份展示问题
627浏览 • 1回复 待解决
HarmonyOS UI测试API问题
243浏览 • 1回复 待解决
HarmonyOS UI组件使用问题
200浏览 • 1回复 待解决
HarmonyOS ui自适应问题
138浏览 • 1回复 待解决
HarmonyOS UI测试框架问题
343浏览 • 1回复 待解决
HarmonyOS UI 单位适配问题
504浏览 • 1回复 待解决
HarmonyOS textarea展示最新数据问题
141浏览 • 1回复 待解决
HarmonyOS 实况窗无法展示问题
251浏览 • 1回复 待解决
HarmonyOS List展示不全的问题
477浏览 • 1回复 待解决
HarmonyOS 自定义Slider样式
601浏览 • 1回复 待解决
HarmonyOS 列表展示list懒加载问题
799浏览 • 1回复 待解决