QML/Qt Quick的怪异布局

Question

我为了建立一个应用程序的GUI使用QML（Qt的连结），我有奇怪的行为。

这是我最初的一段代码：

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旋转滑块，并使用旋转滑计算布局，但它不是发生了什么。其实布局似乎要计算与滑块不旋转则仅滑块旋转。

这看起来有点马车，不，这与布局，不再列结束了？或者我做错了什么？

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 
      } 
     } 
    } 
} 

而且在这种情况下，我得到的是一个滑块：

现在，当我在一个项目包滑块（实际上，我是用物品打，看看如果我能找到一个解决办法）出现其他问题标签上面的（虽然它之后定义的代码）：

这看起来也怪我...任何人有我做错了什么想法？

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

亲切的问候，

Antoine Rennuit。

Answer 1

现在出问题的时候我旋转滑盖

旋转不会影响width或height性能。您可以通过添加以下行到ProgressBar检查：

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

如果ProgressBar有一个orientation财产，就像它在Qt Quick的控制1，你可以使用的，与其rotation。旋转酒吧时，无论是你不能简单地翻转width和height，因为布局使用implicitWidth和implicitHeight，不width和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自己，但是这不是很好。

现在，当我换滑块的项目

你在这里在正确的轨道上出现了另一个问题。正如在this答案中提到的，您需要给Item一个大小。你可以这样做是这样的：

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 
      } 
     } 
    } 
} 

注意，进度条仍然是不正确的位置。那是因为default transform origin for items is in the centre。其设置为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 
      } 
     } 
    } 
} 

请注意，您还必须添加扎到Item的implicitHeight的implicitHeight，为了解释我们做的转换原点变化。

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