Problems with the size of the Popup content
Solved
QML and Qt Quick
-
Greetings. I am developing an application for android, in the Help and Contact section, I want to add a module to show the changes in the new versions. My current idea is to show the content in a Popup, but it happens that the text leaves the contours of the Popup, just as shown in the image:
This is the Popup code, can someone tell me how I can correct this?import QtQuick 2.0 import QtQuick 2.6 import QtQuick.Controls 1.4 import QtQuick.Controls 2.0 import QtQuick.Layouts 1.0 import QtQuick.LocalStorage 2.0 import QtQuick.Controls.Material 2.0 import Qt.labs.settings 1.0 Popup { id: mainPopup Material.theme: Material.Dark Keys.onBackPressed: close() FontLoader { id: fontLoader source: "qrc:/Fonts/MYFONT.TTF" } modal: true property var delegateComponentMap: { "Cambio": changeLabel } x: (parent.width - width) / 2 y: (parent.height - height) / 2 contentItem: ColumnLayout { id: mainColumn Label { Layout.fillWidth: true text: "Cambios en la aplicación" font.bold: true horizontalAlignment: Label.AlignHCenter font.family: fontLoader.name } GridView { Layout.fillWidth: true Layout.fillHeight: true Component { id: changeLabel1 Label { text: changeText Layout.fillWidth: true font.family: fontLoader.name wrapMode: Label.Wrap onTextChanged: { if(text.indexOf("**") != -1) { font.bold = true horizontalAlignment = Label.AlignHCenter Material.foreground = Material.color(Material.Pink) } } } } model: ListModel { ListElement { type: "0.10.21"; changeText: "** 0.10.28 **"; elem: "Cambio"} ListElement { type: "0.10.21"; changeText: "Añadido resistro de cambios en la aplicación"; elem: "Cambio"} ListElement { type: "0.10.21"; changeText: "Añadido botón de seleccionar todos en la sección de Base de Datos"; elem: "Cambio"} ListElement { type: "0.10.21"; changeText: "Modificado el estilo de las letras de la aplicación"; elem: "Cambio"} ListElement { type: "0.10.21"; changeText: "Modificado los iconos internos de la aplicación"; elem: "Cambio"} } cellWidth: okButton.width cellHeight: 20 delegate: changeLabel1 } RowLayout { spacing: 0 Button { id: okButton text: "OK" Layout.fillWidth: true highlighted: true onClicked: { mainPopup.close() } } } } }
-
Hi @Blaster ,
please try to give an explicit width to the LabelGridView { id:_view Layout.fillWidth: true Layout.fillHeight: true Component { id: changeLabel1 Label { text: changeText width : _view.width
-
Solved thanks to @LeLev.
Popup { id: mainPopup property int _spacing : 15 height: parent.height * 2 / 3 width: parent.width * 5 / 6 x: (parent.width - width) / 2 y: (parent.height - height) / 2 Material.theme: Material.Dark modal: true contentItem: ColumnLayout { id: mainColumn Label { Layout.fillWidth: true text: "Cambios de en la aplicación" } ListView { id:view Layout.fillWidth: true Layout.fillHeight: true model: ListModel { ListElement { type: "0.10.21"; changeText: "**0.10.21**"; elem: "Cambio"} ListElement { type: "0.10.21"; changeText: "Modificado el estilo de las letras o el estilo de las letras de la aplicaciónModificado el estilo de las"; elem: "Cambio"} ListElement { type: "0.10.21"; changeText: "Modificado los iconos internos de la aplicación"; elem: "Cambio"} } delegate: Item{ height: theText.paintedHeight + _spacing width: view.width Label { id:theText text: changeText Layout.fillWidth: true width: parent.width wrapMode: Label.Wrap onTextChanged: { if(text.indexOf("**") != -1) { font.bold = true horizontalAlignment = Label.AlignHCenter Material.foreground = Material.color(Material.Pink) } } } } } } }