Question

我正在尝试使用Gauge / GaugeStyle制作一个可调整大小的量规（如下图所示的音频推子）。

刻度线应在推子的左侧和右侧。

以某种方式，我无法找到正确更改刻度标记标签的pointSize / pixelSize的方法。

我已经花了好几天时间解决这个问题，但是很可能由于缺乏QML的经验和/或专业知识，我无法解决这个问题。该程序从“中等大小”窗口开始，我希望将其大小调整为最小/最大高度/宽度。

我敢肯定，有比我更好的解决方案，但我找不到匹配的东西。

每当我将窗口调整为最大高度时，刻度线标签就会（略微）偏离其垂直中心位置。

因此，我很高兴能帮助我到达所需的位置。

还是仅使用准备好并正确调整大小的图像会更好/更容易？我认为这不会对性能产生任何影响，因为在程序运行期间不会经常调整窗口的大小。

我已经尝试了很多方法，甚至将刻度线区域划分为行/列，以实现此目的。 Text.Fit无法按照我想要的方式工作。

我在macOS 10.12.6上将Qt 5.12.3与Qt Creator 4.9.1结合使用

这是我的代码：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Extras 1.4
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.4

Window
{
    id              : myMainWindow
    visible         : true
    width           : 400
    height          : 400
    minimumHeight   : 300
    minimumWidth    : 300
    maximumHeight   : 800
    maximumWidth    : 800
    title: qsTr("Gauge Test")

    Gauge
    {
        id: myGauge
        height : parent.height
        scale: 0.9
        width: parent.width / 3
        anchors.verticalCenter: parent.verticalCenter    

        minimumValue: -20
        maximumValue: 70
        minorTickmarkCount: 0
        value: 0

        font.family: "Tahoma"

        style: GaugeStyle
        {
            id: myGaugeStyle

            valueBar : Item { visible : false}

            tickmark : Item
            {
                id: myTickmarks
                implicitHeight: Math.max(myMainWindow.height/ 200,1)
                width : myGauge.width / 5

                Rectangle
                {
                    id:leftDash
                    implicitHeight: Math.max(myMainWindow.height/ 200,1)
                    width : myGauge.width / 5
                    anchors.left: myTickmarks.left
                    anchors.leftMargin: myGauge.width / 5
                    color: "blue"
                }

                Rectangle
                {
                    id:noDash
                    anchors.left : leftDash.right
                    implicitHeight: Math.max(myMainWindow.height/ 200,1)
                    width : myGauge.width / 5
                    color: "transparent"
                }

                Rectangle
                {
                    id:rightDash
                    implicitHeight: Math.max(myMainWindow.height/ 200,1)
                    width : myGauge.width / 5
                    anchors.left : noDash.right
                    color: "blue"
                }
            }

            // Does not work as expected
            /*
            tickmarkLabel: Text
            {
                id: myTickmarkLabel
                text: styleData.value
                font.pointSize : Math.max(
                    Math.sqrt(myMainWindow.width * myMainWindow.height * 0.8 ) / 26
                    ,6)
                // verticalAlignment : Text.AlignVCenter
                color: "blue"
                anchors.left: parent.left
                anchors.leftMargin: font.pointSize
                // anchors.rightMargin : font.pointSize
                // anchors.topMargin : font.pointSize
                // anchors.bottomMargin : font.pointSize
            }
            */

            // Works pretty well : 
            tickmarkLabel: Text
            {
               id: myTickmarkLabel
               text: styleData.value

               transform: Scale 
               {
                  xScale: 3 * myMainWindow.width / myMainWindow.maximumWidth
                  yScale: 3 * myMainWindow.height / myMainWindow.maximumHeight 
               }

               color: "blue"
               anchors.left: parent.left
               anchors.leftMargin: myMainWindow.width / myMainWindow.maximumWidth
            }
        }
    }

    Rectangle
    {
        id: middleRect
        height: parent.height
        width : parent.width / 3
        anchors.left: myGauge.right
        color : "steelblue"
    }

    Rectangle
    {
        id: rightRect
        height: parent.height
        width : parent.width / 3
        anchors.left: middleRect.right
        color : "grey"
    }
}

如前所述，我无法为窗口可以具有的所有尺寸正确对齐刻度标记。

以下是推子的外观图像：

如何使用QML制作可调整大小的量规-文字大小问题

0 个答案: