QML 矩形的高度取决于子内容（SailfishOS 应用程序）

Question

我有一个矩形，它在我的应用程序的中心显示一些信息，如下所示：

   Rectangle {
      id: info
      anchors.verticalCenter: parent.verticalCenter
      anchors.horizontalCenter: parent.horizontalCenter
      width: parent.width * 0.8
      height: 500

      Column {
         spacing: Theme.paddingLarge

         anchors.top: parent.top
         anchors.topMargin: Theme.paddingLarge
         anchors.bottom: parent.bottom
         anchors.horizontalCenter: parent.horizontalCenter
         width: parent.width - 2*Theme.paddingLarge

         Row {
            spacing: Theme.paddingLarge * 2
            anchors.horizontalCenter: parent.horizontalCenter

            Text {
               anchors.verticalCenter: parent.verticalCenter
               font.pointSize: Theme.fontSizeLarge
               text: info.brand
            }

            Image {
               width: 64
               height: 64
               source: "qrc:///graphics/other.png"
               anchors.verticalCenter: parent.verticalCenter
            }
         }

         Text {
            anchors.horizontalCenter: parent.horizontalCenter

            font.pointSize: Theme.fontSizeTiny
            wrapMode: Text.WordWrap
            width: parent.width
            text: info.priceString
         }

         Row {
            spacing: Theme.paddingMedium
            anchors.horizontalCenter: parent.horizontalCenter

            Rectangle {
               width: 60
               height: 30
            }

            Text {
               anchors.verticalCenter: parent.verticalCenter
               font.pointSize: Theme.fontSizeTiny
               text: info.description
            }

            Image {
               source: "qrc:///graphics/locked.png"
               width: 64
               height: 64
            }
         }

         Row {
            spacing: Theme.paddingMedium
            anchors.horizontalCenter: parent.horizontalCenter

            Button {
               text: qsTr("Find")
               width: (scooterInfo.width -2*Theme.paddingLarge) / 2 - Theme.paddingMedium
               visible: scooterInfo.mode == "show"
            }
            Button {
               text: qsTr("Missing")
               width: (scooterInfo.width -2*Theme.paddingLarge) / 2 - Theme.paddingMedium
               visible: scooterInfo.mode == "show"
            }
         }
      }
   }

现在由于它是一个 SailfishOS 应用程序，字体大小和填充将根据主题而有所不同。这让我无法为 ID 为 info.

的 Rectangle 设置固定高度

在模拟器中运行和在我的设备上运行时已经有所不同。我只能让两者合身，不能同时合身。

所以我需要一种方法让矩形根据其内容（包括填充）自动选择合适的高度。我怎样才能做到这一点？

Answer 1

我测试了您的代码，并通过从您的 Column object 中删除 top 和 bottom 锚使其正常工作。 Columns会根据他们的children自动调整自己的大小，所以你不需要手动限制他们的高度。

Rectangle {
    id: info
    anchors.verticalCenter: parent.verticalCenter
    anchors.horizontalCenter: parent.horizontalCenter
    width: parent.width * 0.8
    height: childrenRect.height  // Resize to fit children

    Column {
        spacing: Theme.paddingLarge

        anchors.horizontalCenter: parent.horizontalCenter
        width: parent.width - 2*Theme.paddingLarge

        ...
    }
}

QML 矩形的高度取决于子内容（SailfishOS 应用程序）

Height of QML rectangle depending on child contents (SailfishOS app)

layout

qt

rectangles

qml

sailfish-os