Блог

Я хочу установить размер (в основном высоту) моего всплывающего окна, чтобы оно соответствовало содержимому, в зависимости от того, сколько текста отображается или отображается ли изображение значка во всплывающем окне. Как мне установить высоту всплывающего окна.

Например.

 Popup {
    id: popup
    width: window.width/2
    height: window.height/4
    x:  window.width/2 - width/2
    y: window.height/2 - height/2

    Rectangle {
        id: popupContent
        width: parent.width
        height: parent.height
        visible: notification
        anchors.fill: parent
        
        Rectangle {
            id: iconField
            anchors.top: parent.top
            width: parent.width
            height: parent.height/2

            Image {
                id: img
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.top
                width: window.width/18
                height: window.width/18
                fillMode: Image.PreserveAspectFit
                source: "qrc:/images/icons/info.png"
            }
        }

        Rectangle {
            id: textField
            anchors.top: iconField.bottom
            width: parent.width
            height: parent.height/2

            Text {
                id: text1
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                horizontalAlignment: Text.AlignHCenter
                width: parent.width
                wrapMode: Text.WordWrap
                text: "This long text overflows out of the popup up rectangle!"
            }
        }
    }
}
  

Если я использую длинный текст, то текст переполняется из всплывающего прямоугольника. Я пытался использовать implicitHeight в разных местах, но я не понимаю, как применить его в этой ситуации.

В вашем коде есть несколько проблем. Трудно дать идеальный ответ, потому что я не знаю точно, что предназначено. Например, ваш текст всегда будет находиться в нижней части Rectangle , потому что вы привязали textField anchor.top его к iconField.bottom , и iconField имеет тот же размер, что и все всплывающее окно. Но вот несколько идей о том, как это улучшить.

1. Ваш popupContent — это a Rectangle , но я не уверен, действительно ли вы собираетесь нарисовать там прямоугольник или нет. Я думаю, вы могли бы заменить это на ColumnLayout, подобный приведенному здесь примеру.

2. Вы также можете вручную указать высоту вашего содержимого, используя contentHeight свойство. Вы можете установить его на высоту вашего iconField плюс высоту вашего текстового поля, плюс любое заполнение, которое вы хотите.

3. У каждого Item есть свойство, childrenRect.height которое будет сообщать вам общую высоту всех его дочерних элементов.

Однако для всех этих параметров вам нужно будет перестать устанавливать высоту каждого объекта такой же, как высота его родительского элемента.