Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Picture with text.
Forum Updated to NodeBB v4.3 + New Features

Picture with text.

Scheduled Pinned Locked Moved Solved QML and Qt Quick
4 Posts 3 Posters 302 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • R Offline
    R Offline
    RobM
    wrote on last edited by
    #1

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

    1 Reply Last reply
    0
    • sierdzioS Offline
      sierdzioS Offline
      sierdzio
      Moderators
      wrote on last edited by
      #2

      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.

      (Z(:^

      1 Reply Last reply
      2
      • J Offline
        J Offline
        jay1
        wrote on last edited by
        #3

        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

        1 Reply Last reply
        1
        • sierdzioS Offline
          sierdzioS Offline
          sierdzio
          Moderators
          wrote on last edited by
          #4

          @jay1 said in Picture with text.:

          property var text: 'Image'

          Better just alias to the Text element below:

          property alias text: imageText.text
          

          (Z(:^

          1 Reply Last reply
          1

          • Login

          • Login or register to search.
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved