QML 스타일 게이지

Question

내 게이지가 빨간색, 노란색, 녹색 섹션으로 나뉘어져 있어야합니다.

나는 시도했다 :

Gauge { 
    id: gauge 
    anchors.top: parent.top; anchors.topMargin: 20; anchors.horizontalCenter: parent.horizontalCenter 
    width: parent.width - 20 
    minimumValue: -500 
    maximumValue: 500 
    value: 200 
    tickmarkStepSize: 100 
    orientation: Qt.Horizontal 
    font.bold: true; font.pixelSize: 12 
    style: GaugeStyle { 
     background: Rectangle { 
     implicitWidth: 15 
     implicitHeight: gauge.width 
     color: "red" 
     Rectangle { 
      implicitWidth: 15 
      implicitHeight: gauge.width/2 
      anchors.verticalCenter: parent.verticalCenter 
      color: "green" 
     } 
     } 
     valueBar: Rectangle { 
      implicitWidth: 15 
      color: "transparent"; border.color: "black" 
     } 

     tickmark: Item { 
      implicitHeight: 1; implicitWidth: 15 
      Rectangle { 
       color: "black" 
       anchors.fill: parent; anchors.leftMargin: 3; anchors.rightMargin: 3 
      } 
     } 
     minorTickmark: Item { 
      implicitWidth: 8; implicitHeight: 1 
      Rectangle { 
       color: "lightGrey" 
       anchors.fill: parent; anchors.leftMargin: 3; anchors.rightMargin: 3 
      } 
     } 
    } 
} 

을하지만, 녹색 빨간색과 노란색을 정확히 얘기하는 번호가 시작 (최종) 필요로 매우 부정확이다 (필자는 노란색을 그려하지 않은 순간).

또한 valuebar의 스타일을 지정해야합니다 (배경 사각형의 동일한 색상을 사용하는 사각형이어야하지만 더 어둡습니다). 불가능한 경우 실제 값이있는 곳에 두꺼운 표시를해야합니다.

Answer 1

조금 해킹되었지만 전경을 값 표시 줄로 사용할 수 있습니다. 다음과 같이 작동합니다.

Gauge { 
    id: gauge 
    width: 400 
    minimumValue: -500 
    maximumValue: 500 
    value: 200 
    tickmarkStepSize: 100 
    orientation: Qt.Horizontal 
    font.bold: true; 
    font.pixelSize: 12 

    // Must be sorted in descending order 
    property var steps: [ 
     {start:500, color: "green"}, 
     {start:0, color: "yellow"}, 
     {start:-240, color: "red"}, 
    ] 

    style: GaugeStyle { 
     foreground: Item { 
      clip: true 

      Rectangle 
      { 
       width: parent.width 
       opacity: 0.8 
       z: 1 
       anchors.top: parent.top 
       height: (1-(gauge.value-gauge.minimumValue)/(gauge.maximumValue-gauge.minimumValue))*parent.height 
      } 

      Repeater 
      { 
       model: control.steps 
       Rectangle 
       { 
        color: modelData.color 
        width: parent.width 
        y: (1-(modelData.start-gauge.minimumValue)/(gauge.maximumValue-gauge.minimumValue))*parent.height 
        height: parent.height 
       } 
      } 

     } 
     valueBar: Item { 
      implicitWidth: 15 
     } 

     tickmark: Item { 
      implicitHeight: 1; implicitWidth: 15 
      Rectangle { 
       color: "black" 
       anchors.fill: parent; anchors.leftMargin: 3; anchors.rightMargin: 3 
      } 
     } 
     minorTickmark: Item { 
      implicitWidth: 8; implicitHeight: 1 
      Rectangle { 
       color: "lightGrey" 
       anchors.fill: parent; anchors.leftMargin: 3; anchors.rightMargin: 3 
      } 
     } 
    } 
}