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上爲方向屬性創建建議。 :)