1

我正在使用 QML (Qt Quick) 来设置应用程序的 GUI，但我的行为很奇怪。

这是我最初的一段代码：

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

Rectangle {
    id: rectangle1
    color: palette.grey

    ColumnLayout
    {
        id: columnLayout1

        Label
        {
            id: label1
            text: qsTr("Target")
            font.pointSize: 22
        }

        ProgressBar
        {
            id: progressBar1
            value: 0.5
        }
    } }

...这给出了布局：

初始布局

然后我锚定中心：

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

Rectangle
{
    id: rectangle1
    color: palette.grey

    ColumnLayout
    {
        id: columnLayout1
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter

        Label
        {
            id: label1
            text: qsTr("Target")
            font.pointSize: 22
        }

        ProgressBar
        {
            id: progressBar1
            value: 0.5
        }
    }
}

没问题，我得到：

在此处输入图像描述

现在当我旋转滑块时出现问题：

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

Rectangle
{
    id: rectangle1
    color: palette.grey

    ColumnLayout
    {
        id: columnLayout1
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter

        Label
        {
            id: label1
            text: qsTr("Target")
            font.pointSize: 22
        }

        ProgressBar
        {
            id: progressBar1
            rotation: 90
            value: 0.5
        }
    }
}

在这里，我期待 Qt 旋转滑块并使用旋转的滑块来计算布局，但事实并非如此。实际上，布局似乎是在未旋转滑块的情况下计算的，然后仅旋转了滑块。这最终得到一个不再是列的布局：

在此处输入图像描述

这看起来有点马车，不是吗？还是我做错了什么？

现在，当我将滑块包装在 Item 中时，会出现另一个问题（我实际上是在玩 Items 以查看是否可以找到解决方法）：

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

Rectangle
{
    id: rectangle1
    color: palette.grey

    ColumnLayout
    {
        id: columnLayout1
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter

        Label
        {
            id: label1
            text: qsTr("Target")
            font.pointSize: 22
        }

        Item
        {
            ProgressBar
            {
                id: progressBar1
                value: 0.5
            }
        }
    }
}

在这种情况下，我得到的是标签上方的滑块（尽管它是在代码中定义的）：

在此处输入图像描述

这对我来说也很奇怪......有人知道我做错了什么吗？

请注意，屏幕截图是从Designer中捕获的，但运行该程序会导致完全相同的问题。

亲切的问候，

安托万·伦努特。

4

1 回答 1

2

现在当我旋转滑块时出现问题

旋转不影响widthorheight属性。您可以通过将以下行添加到您的ProgressBar:

onWidthChanged: print("width", width)
onHeightChanged: print("height", height)

如果ProgressBar有一个orientation属性，就像 Qt Quick Controls 1 中那样，你可以使用它来代替rotation. 您也不能在旋转栏时简单地翻转widthand height，因为布局使用implicitWidthand implicitHeight，而不是widthand height：

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

import QtQuick.Controls 2.1

ApplicationWindow {
    width: 400
    height: 300
    visible: true

    ColumnLayout {
        id: columnLayout1
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter

        Label {
            id: label1
            text: qsTr("Target")
            font.pointSize: 22
        }

        ProgressBar {
            id: progressBar1
            rotation: 90
            width: implicitHeight
            height: implicitWidth
            value: 0.5
        }
    }
}

你可以自己计算implicitWidth和implicitHeight，但这并不好。

现在，当我将滑块包装在 Item 中时，会出现另一个问题

你在正确的轨道上。如本答案中所述，您需要提供Itema 大小。你可以这样做：

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

import QtQuick.Controls 2.1

ApplicationWindow {
    width: 400
    height: 300
    visible: true

    ColumnLayout {
        id: columnLayout1
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter

        Label {
            id: label1
            text: qsTr("Target")
            font.pointSize: 22
        }

        Item {
            implicitWidth: progressBar1.implicitHeight
            implicitHeight: progressBar1.implicitWidth

            ProgressBar {
                id: progressBar1
                rotation: 90
                value: 0.5
            }
        }
    }
}

请注意，进度条仍然不在正确的位置。这是因为项目的默认变换原点在 center。将其设置为BottomLeft作品：

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

import QtQuick.Controls 2.1

ApplicationWindow {
    width: 400
    height: 300
    visible: true

    ColumnLayout {
        id: columnLayout1
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter

        Label {
            id: label1
            text: qsTr("Target")
            font.pointSize: 22
        }

        Item {
            implicitWidth: progressBar1.implicitHeight
            implicitHeight: progressBar1.implicitWidth + progressBar1.implicitHeight

            ProgressBar {
                id: progressBar1
                rotation: 90
                transformOrigin: Item.BottomLeft
                value: 0.5
            }
        }
    }
}

请注意，您还必须将implicitHeight条形图的 添加到 的implicitHeight中Item，以说明我们所做的变换原点更改。

我强烈建议您为bugreports.qt.io上的方向属性创建建议。:)

于 2016-07-21T13:06:10.510 回答