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

Question

I have a rectangle which displays some information in the center of my app, like so:

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

Now since its a SailfishOS app, the font sizes as well as the padding will differ according to the theme. This leaves me unable to set a fixed height for the Rectangle with id info.

It already makes a difference when running in emulator and when running on my device. I can make only one of both fit, not both at the same time.

So I need a way to have the rectangle automatically pick an appropriate height according to its contents, including padding. How can I achieve this?

The rect itself disappears/becomes invisible and the rect contents are placed wrong, e.g. no longer centered on screen. — user826955, Jul 03 '21 at 17:47

score 3 · Accepted Answer · answered Jul 04 '21 at 13:42

I tested your code and got it to work by removing the top and bottom anchors from your Column object. Columns will automatically resize themselves based on their children, so you don't need to manually restrict their height.

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

        ...
    }
}

Just came to the same solution and was about to comment here :) Thanks for the hint, it now works fine. — user826955, Jul 04 '21 at 13:47

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

1 Answers1