CircularGauge 显示不正确 - 它的尺寸很小
Posted
技术标签:
【中文标题】CircularGauge 显示不正确 - 它的尺寸很小【英文标题】：CircularGauge displayed incorectly - its size is tiny 【发布时间】：2016-09-07 16:16:30 【问题描述】：我正在学习style QML's Circural Gauge，这是我的代码块： 现在，CircuralGauge 的 background 属性基本上是 等同于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
但是，如您所见，我得到了异常的量规（很小）：
为什么/我错过了什么？
【问题讨论】：
【参考方案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 显示不正确 - 它的尺寸很小的主要内容，如果未能解决你的问题，请参考以下文章