时间戳

首页 > 解决方案 > QML 矩形的高度取决于子内容（SailfishOS 应用程序）

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

问题描述

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

   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 应用程序，字体大小以及填充将根据主题而有所不同。Rectangle 这使我无法为id设置固定高度info。

在模拟器中运行和在我的设备上运行时，它已经有所作为。我只能使两者都适合，而不是同时适合两者。

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

标签： qtlayoutqmlrectanglessailfish-os

解决方案

我测试了您的代码并通过从您的对象中删除top和bottom锚点使其工作。将根据他们的孩子自动调整自己的大小，因此您无需手动限制他们的高度。ColumnColumns

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

        ...
    }
}

推荐阅读