Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Picture with text.



  • Is there a dedicated QML type for a picture with text?


  • Moderators

    Depends on what you need. Button has text and icon properties, for example.

    If you need to mix a regular Image with Text, it's easy to make a custom component out of it.



  • This might be of some help. This is a sample code

    import QtQuick 2.0
    
    Item {    
        id: root
        property var text: 'Image'
        anchors.fill: parent
    
        Rectangle
        {
            id: imageContainer
            anchors.fill: parent
    
            Image {
                id: imageSource
                anchors.fill: parent
                source: "qrc:/images/qt.jpg"
            }
    
            Rectangle
            {
                id: textContainer
                anchors.horizontalCenter: imageSource.horizontalCenter
                anchors.bottom: parent.bottom
                width: parent.width
                height: parent.height * 0.2
                color: "#95232323"
                Text {
                    id: imageText
                    anchors.horizontalCenter: textContainer.horizontalCenter
                    anchors.centerIn: parent
                    text: qsTr("Qt is Nice")
                    color: "#ffffff"
                    font.pixelSize: parent.height * 0.5
                }
            }
        }
    
    }
    
    

    QtSample.PNG


  • Moderators

    @jay1 said in Picture with text.:

    property var text: 'Image'

    Better just alias to the Text element below:

    property alias text: imageText.text
    

Log in to reply