QML/Qt Быстрый странный макет

Question

Я использую QML (Qt Quick), чтобы настроить графический интерфейс приложения, и у меня возникло странное поведение.

Вот мой начальный фрагмент кода:

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

Обратите внимание, что вы также должны добавить implicitHeight бара к implicitHeight в Item для того, чтобы учесть изменения преобразования координат мы сделали.

Я настоятельно рекомендую вам создать предложение для свойства ориентации на bugreports.qt.io. :)