Qml 슬라이더 스타일, 슬라이더 핸들 전후에 다른 그루브 색상 지정

Question

기본 스타일과 비슷한 슬라이더 스타일을 만들고 싶었고 내 응용 프로그램 스타일과 더 일치하는 스타일을 만들고 싶었지만 다른 스타일을 지정하기가 어려웠습니다. 슬라이더의 핸들 앞뒤에 색상을 지정합니다. 나는이 같은 핸들 위치에 고정 슬라이더, 두 개의 사각형을 넣어, 거친 해결 방법을 시도

Slider{ 
      id: widthSlider 
      style: SliderStyle { 
        groove: Rectangle { 
         height: widthSlider.height*0.17 
         width: widthSlider.width 
         color: "black" 
         radius: 8 
        } 
        handle: Rectangle { 
         color: "grey" 
        } 
       } 
     } 

: 여기

은 그라디언트, 고정 점 및 기타 속성없이, 내 코드의 단순화 된 버전입니다 : 그냥 이후

Slider{ 
      id: widthSlider 
      Rectangle { 
       anchors.left: widthSlider.left 
       anchors.right: widthSlider.__handlePos 
       color: "black" 
      } 
      Rectangle { 
       anchors.left: widthSlider.__handlePos 
       anchors.right: widthSlider.right 
       color: "white" 
      } 
    ... 
} 

는하지만 핸들의 위치로 고정 할 수 없습니다 (I 오류 얻을 : QQuickAnchorLine에 두 번 할당 할 수 없음)를 두 번.

누구나 Qml에서이 작업을 수행 할 수있는 아이디어가 있습니까?

Answer 1

이와 비슷한?

Slider { 
    anchors.centerIn: parent 
    value: 0.5 
    width: 400 
    style: SliderStyle { 
     groove: Item { 
      implicitHeight: 10 
      LinearGradient { 
       anchors.fill: parent 
       start: Qt.point(0, control.height/2) 
       end: Qt.point(control.width, control.height/2) 
       gradient: Gradient { 
        GradientStop { position: 0.0; color: "orange" } 
        GradientStop { position: control.value; color: "brown" } 
        GradientStop { position: 1.0; color: "orange" } 
       } 
      } 
     } 
    } 
} 

또는 : 정말

Slider { 
    anchors.centerIn: parent 
    value: 0.5 
    width: 400 
    style: SliderStyle { 
     groove: Rectangle { 
      implicitHeight: 10 
      color: "lightgrey" 
      border { 
       color: "#999" 
       width: 1 
      } 
      Rectangle { 
       implicitHeight: 10 
       color: "orange" 
       implicitWidth: control.value * parent.width 
       border { 
        color: "#999" 
        width: 1 
       } 
      } 
     } 
    } 
}