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

Posted 2023-03-17

【中文标题】QML 矩形的高度取决于子内容（SailfishOS 应用程序）

【英文标题】：Height of QML rectangle depending on child contents (SailfishOS app)

【发布时间】：2021-09-15 01:57:17

【问题描述】：

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

   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 设置固定高度。

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

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

【问题讨论】：

你试过height: childrenRect.height吗？

是的，给出了一些奇怪的结果。

我不知道“奇怪的结果”是什么意思。

矩形本身消失/变得不可见，并且矩形内容放置错误，例如不再以屏幕为中心。

【参考方案1】：

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

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

        ...
    

【讨论】：

刚找到相同的解决方案，正准备在这里发表评论:) 感谢您的提示，现在可以正常工作了。