Question

我正在学习style QML's Circural Gauge，这是我的代码块：现在，background的CircuralGauge属性是基本的与example's one相同：

background: Canvas
{
    onPaint:
    {
        var ctx=getContext("2d");
        ctx.reset();

        ctx.beginPath();
        ctx.strokeStyle="steelblue";
        ctx.lineWidth=outerRadius*0.02;

        ctx.arc(outerRadius,
                outerRadius,
                outerRadius-ctx.lineWidth/2,
                degreesToRadians(valueToAngle(80)-90),
                degreesToRadians(valueToAngle(100)-90));

        ctx.stroke();
    }   // onPaint
}   // background

但是，我会看到异常规格（微小规格），如您所见：

为什么/我缺少什么？

Answer 1

我设法解决了问题。这在Circural Gauge本身没有问题，但在其他组件的Layout中设置为Layout.fillHeight: true。我已将其设置为false，现在可以使用了。以下是Item的完整代码：

import QtQuick 2.7
import QtQuick.Layouts 1.3
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4

Item
{
    id: ueDisplayBrightnessSettingsWindow

    width: parent.width
    height: parent.height

    RowLayout
    {
        anchors.fill: parent

        ColumnLayout
        {
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter

            CircularGauge
            {
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.alignment: Qt.AlignHCenter|Qt.AlignTop

                value: ueDisplayBrightnessSlider.maximumValue-ueDisplayBrightnessSlider.value

                minimumValue: 0
                maximumValue: ueDisplayBrightnessSlider.maximumValue

                style: CircularGaugeStyle
                {
                    tickmarkStepSize: 1.00
                    labelStepSize: 10

                    function degreesToRadians(degrees)
                    {
                        return degrees*(Math.PI/180);
                    }   // degreesToRadians

                    needle: Rectangle
                    {
                        y: outerRadius*0.15

                        implicitWidth: outerRadius*0.03
                        implicitHeight: outerRadius*0.90

                        antialiasing: true

                        gradient: Gradient
                        {
                            GradientStop
                            {
                                position: 0.00
                                color: "lightsteelblue"
                            }   // GradientStop

                            GradientStop
                            {
                                position: 0.80
                                color: "steelblue"
                            }   // GradientStop
                        }   // gradient
                    }   // needle

                    tickmark: Rectangle
                    {
                        visible: styleData.value<80||styleData.value%10==0

                        implicitWidth: outerRadius*0.02
                        implicitHeight: outerRadius*0.06

                        antialiasing: true

                        color: styleData.value>=80?"steelblue":"lightsteelblue"
                    }   // tickmark

                    minorTickmark: Rectangle
                    {
                        visible: styleData.value<80

                        implicitWidth: outerRadius*0.01
                        implicitHeight: outerRadius*0.03

                        antialiasing: true

                        color: "lightsteelblue"
                    }   // minorTickmark

                    tickmarkLabel: Text
                    {
                        font.pixelSize: Math.max(6, outerRadius*0.1)
                        text: styleData.value
                        color: styleData.value>=80?"steelblue":"lightsteelblue"
                        antialiasing: true
                    }   // tickmarkLabel


                    foreground:  Rectangle
                    {
                        width: outerRadius*0.2
                        height: width

                        radius: width/2

                        anchors.centerIn: parent

                        gradient: Gradient
                        {
                            GradientStop
                            {
                                position: 0.00
                                color: "steelblue"
                            }   // GradientStop

                            GradientStop
                            {
                                position: 0.70
                                color: "#191919"
                            }   // GradientStop
                        }   // gradient
                    }   // foreground

                    background: Canvas
                    {
                        onPaint:
                        {
                            var ctx=getContext("2d");
                            ctx.reset();

                            ctx.beginPath();
                            ctx.strokeStyle="steelblue";
                            ctx.lineWidth=outerRadius*0.02;

                            ctx.arc(outerRadius,
                                    outerRadius,
                                    outerRadius-ctx.lineWidth/2,
                                    degreesToRadians(valueToAngle(80)-90),
                                    degreesToRadians(valueToAngle(100)-90));

                            ctx.stroke();
                        }   // onPaint
                    }   // background
                }   // style
            }   // CircularGauge

            Slider
            {
                id: ueDisplayBrightnessSlider

                Layout.fillWidth: true
                Layout.fillHeight: false
                Layout.alignment: Qt.AlignHCenter|Qt.AlignBottom

                updateValueWhileDragging: true

                tickmarksEnabled: true

                stepSize: 1

                minimumValue: 0
                maximumValue: 100

                style: SliderStyle
                {
                    handle: Rectangle
                    {
                        width: ueDisplayBrightnessSettingsWindow.width/10
                        height: width

                        radius: height

                        antialiasing: true

                        color: control.pressed?"lightsteelblue":"steelblue"
                    }   // handle

                    groove: Rectangle
                    {
                        width: ueDisplayBrightnessSettingsWindow.width
                        height: ueDisplayBrightnessSettingsWindow.width/35

                        gradient: Gradient
                        {
                            GradientStop
                            {
                                position: 0.00
                                color: "steelblue"
                            }   // GradientStop

                            GradientStop
                            {
                                position: 0.50
                                color: "lightsteelblue"
                            }   // GradientStop

                            GradientStop
                            {
                                position: 1.00
                                color: "steelblue"
                            }   // GradientStop
                        }   // gradient
                    }   // groove
                }   // syle
            }   // Slider
        }   // ColumnLayout
    }   // RowLayout
}   // Item

CircularGauge显示不明显 - 它的大小很小

1 个答案: