項目不能跨越網格佈局

正確傳播

我有以下的自定義QML Item，這將是一個pin碼輸入，GUI元素：項目不能跨越網格佈局

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（s的UeButton）不是集中在一起，整個RowLayout對齊？

來源

2015-10-05 KernelPanic

Layout的附加屬性確保包含的Item的尺寸正確w.r.t.給定的約束。

Item s時，可以拉伸，以填充可用空間（fillWidth/fillHeight），被迫不低於一定值（minimumWidth/minimumHeight）或不縮小放大超過一定值等（maximumWidth/maximumHeight）。您還可以強制Item佔據多行/列（rowSpan/columnSpan）並假定特定大小（preferredWidth/preferredHeight，這意味着minimum == maximum）。

的優先順序是：

preferred < minimum/maximum < width/height

設置屬性向左自動放棄任何的權利。您可以輕鬆理解背後的原因。由於Item的尺寸無法縮小到這些值，因此該方案可能會有所「破」implicitWidth/implicitHeight。 fill屬性確保Item根據以上約束填充可用空間：如果未定義fill，則Item不能根據其約束條件增長或縮小。現在

，如果你想Button s到維護他們的方面，仍然拉伸網格，您可以使用中間Item。在將Layout附加屬性應用於外部Item時，Button可以是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正確地佔據了所有可用空間。這是上面重新訪問的代碼。正如所料，width和height被簡單地丟棄：

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

來源

2015-10-07 22:07:37 BaCaRoZzo

項目不能跨越網格佈局

回答

相關問題