Предметы, которые не правильно распределены по GridLayout

Question

У меня есть следующие пользовательские QML Item, который будет представлять собой пин-код начального графического элемента:

import QtQuick 2.0 
import QtQuick.Layouts 1.2 
import QtQuick.Controls 1.3 

import "../items" 

Item 
{ 
    id: ueKeypad 

    width: 512 
    height: 512 

    Rectangle 
    { 
     id: ueKeypadWrapper 
     antialiasing: true 

     anchors.fill: parent 

     ColumnLayout 
     { 
      id: ueKeypadLayoutMain 
      antialiasing: true 

      layoutDirection: Qt.LeftToRight 
      spacing: 8 

      anchors.fill: parent 

      ColumnLayout 
      { 
       id: ueKeypadTitleLayout 

       layoutDirection: Qt.LeftToRight 

       Layout.fillWidth: true 

       Layout.minimumHeight: 24 
       Layout.preferredHeight: 24 
       Layout.maximumHeight: 24 

       Text 
       { 
        Layout.fillWidth: true 
        Layout.fillHeight: true 

        text: qsTr("PIN ENTRY") 
        clip: true 
        font.bold: true 
        font.pointSize: 24 
        textFormat: Text.RichText 
        verticalAlignment: Text.AlignVCenter 
        horizontalAlignment: Text.AlignHCenter 
       } // Text 
      } // ColumnLayout 

      GridLayout 
      { 
       id: ueKeypadNumbersLayout 

       Layout.fillWidth: true 
       Layout.fillHeight: true 

       Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter 

       layoutDirection: Qt.LeftToRight 

       columnSpacing: 8 
       rowSpacing: 8 

       flow: GridLayout.LeftToRight 

       columns: 3 

       UeButton 
       { 
        id: ueKeypadButton1 

        Layout.minimumHeight: 32 
        Layout.preferredHeight: 32 
        Layout.maximumHeight: 32 

        ueText: qsTr("1") 
       } 

       UeButton 
       { 
        id: ueKeypadButton2 

        Layout.minimumHeight: 32 
        Layout.preferredHeight: 32 
        Layout.maximumHeight: 32 

        ueText: qsTr("2") 
       } 

       UeButton 
       { 
        id: ueKeypadButton3 

        Layout.minimumHeight: 32 
        Layout.preferredHeight: 32 
        Layout.maximumHeight: 32 

        ueText: qsTr("3") 
       } 

       UeButton 
       { 
        id: ueKeypadButton4 

        Layout.minimumHeight: 32 
        Layout.preferredHeight: 32 
        Layout.maximumHeight: 32 

        ueText: qsTr("4") 
       } 

       UeButton 
       { 
        id: ueKeypadButton5 

        Layout.minimumHeight: 32 
        Layout.preferredHeight: 32 
        Layout.maximumHeight: 32 

        ueText: qsTr("5") 
       } 

       UeButton 
       { 
        id: ueKeypadButton6 

        Layout.minimumHeight: 32 
        Layout.preferredHeight: 32 
        Layout.maximumHeight: 32 

        ueText: qsTr("6") 
       } 

       UeButton 
       { 
        id: ueKeypadButton7 

        Layout.minimumHeight: 32 
        Layout.preferredHeight: 32 
        Layout.maximumHeight: 32 

        ueText: qsTr("7") 
       } 

       UeButton 
       { 
        id: ueKeypadButton8 

        Layout.minimumHeight: 32 
        Layout.preferredHeight: 32 
        Layout.maximumHeight: 32 

        ueText: qsTr("8") 
       } 

       UeButton 
       { 
        id: ueKeypadButton9 

        Layout.minimumHeight: 32 
        Layout.preferredHeight: 32 
        Layout.maximumHeight: 32 

        ueText: qsTr("9") 
       } 
      } // GridLayout 

      RowLayout 
      { 
       id: ueKeypadActionLayout 

       Layout.fillWidth: true 
       Layout.fillHeight: true 

       Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter 

       layoutDirection: Qt.LeftToRight 

       spacing: 8 

       UeButton 
       { 
        id: ueKeypadButtonOk 

        ueText: qsTr("Ok") 
       } // UeButton 

       UeButton 
       { 
        id: ueKeypadButton0 

        ueText: qsTr("0") 

        Layout.minimumHeight: 32 
        Layout.preferredHeight: 32 
        Layout.maximumHeight: 32 
       } // UeButton 

       UeButton 
       { 
        id: ueKeypadButtonCancel 

        ueText: qsTr("Cancel") 
       } // UeButton 
      } // RowLayout 
     } // ColumnLayout 
    } // Rectangle 
} // Item 

Он использует пользовательский QML Button, названный UeButton:

import QtQuick.Controls 1.4 
import QtQuick.Controls.Styles 1.4 
import QtQuick 2.5 

Button 
{ 
    property string ueText 

    id: ueButton 

    text: ueText 

    style: ButtonStyle 
    { 
     background: Rectangle 
     { 
      antialiasing: true 
      smooth: true 
      gradient: Gradient 
      { 
       GradientStop 
       { 
        position: 0 
        color: "#ffffff" 
       } // GradientStop 

       GradientStop 
       { 
        position: 0.418 
        color: "#000000" 
       } // GradientStop 
      } // Gradient 

      border.color: "steelblue" 
      border.width: control.activeFocus?2:1 
      radius: 4 
     } // background 

     label: Text 
     { 
      color: "#ffffff" 
      font.bold: true 
      verticalAlignment: Text.AlignVCenter 
      horizontalAlignment: Text.AlignHCenter 
      font.pointSize: 16 

      text: control.text 
     } // label 
    } // ButtonStyle 
} // ueButton 

Если я просматриваю первый код в Инструменте конструктора QtCreator, я получаю следующую ситуацию:

Почему Button не распространяется на GridLayout? То же самое относится к нижнему RowLayout, чьи Item s (три Item с типа UeButton) не центрированы и выровнены по всему RowLayout?

Answer 1

Прилагаемые свойства Layout гарантируют, что Item с указаны в правильном размере w.r.t. данные ограничения.

Item ы могут быть растянуты, чтобы заполнить доступное пространство (fillWidth/fillHeight), вынуждены не дают усадки при определенном значении (minimumWidth/minimumHeight) или не ниже в течение определенного другое значение (maximumWidth/maximumHeight). Вы также можете заставить Item заняться более чем одной строкой/столбцом (rowSpan/columnSpan) и принять определенный размер (preferredWidth/preferredHeight, что подразумевает minimum == maximum).

Предшествование является:

< preferredminimum/maximum < width/height

Установка свойства влево автоматически отбрасывать любые вправо. Вы можете легко понять причины этого. Эта схема может быть несколько «разбита» на implicitWidth/implicitHeight, так как размер любого Item не может уменьшаться под этими значениями. fill обеспечивают, чтобы Item заполнил доступное пространство в соответствии с ограничениями выше: если fill не определен, Item не может расти или сокращаться в соответствии с его ограничениями.

Теперь, если вы хотите Button s поддерживать они аспект и еще растянуть сетку, вы можете использовать промежуточныйItem. При нанесении Layout прилагаемых свойств к внешнему Item, Button s может быть centerIn и не подвергаться воздействию.

Пример кода:

import QtQuick 2.5 
import QtQuick.Window 2.2 
import QtQuick.Layouts 1.1 
import QtQuick.Controls 1.4 

Window { 
    width: 200; height: 200; minimumHeight: 100; visible: true 

    GridLayout { 
     anchors.fill: parent 
     rows: 3 
     columns: 3 

     Repeater { 
      model: 9 

      Item { 
       Layout.fillWidth: true 
       Layout.fillHeight: true 

       Button { anchors.centerIn: parent; width: 32; height: 32; text: index + 1 } 
      } 
     } 
    } 
} 

Вместо если вы хотите Button s, чтобы заполнить свободное пространство, просто указать fillWidth/fillHeight. Поскольку никаких других ограничений компоновки не установлены (например, minimum*, maximum*), Button s правильно занимают все свободное пространство. Вот приведенный выше код.Как и ожидалось, width и просто отбрасываются:

import QtQuick 2.5 
import QtQuick.Window 2.2 
import QtQuick.Layouts 1.1 
import QtQuick.Controls 1.4 

Window { 
    width: 200; height: 200; minimumHeight: 100; visible: true 

    GridLayout { 
     anchors.fill: parent 
     rows: 3 
     columns: 3 

     Repeater { 
      model: 9 

      Button {width: 32; height: 32; text: index + 1; // 32? NOPE! 
       Layout.fillWidth: true; Layout.fillHeight: true 
      } 
     } 
    } 
}