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. a generic qml label for display of an image and a text

a generic qml label for display of an image and a text

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
2 Posts 2 Posters 998 Views
  • 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.
  • JoeCFDJ Offline
    JoeCFDJ Offline
    JoeCFD
    wrote on last edited by
    #1

    any recommendations for making a generic qml label to display an image and a text?

    Functions:

    1. horizontal layout or vertical layout
    2. image first or text first

    One option is to use fixed layout to text and image, but kind of messy. Looking
    for simpler solutions.

    Qt5.15.3 and Ubuntu 22.04

    1 Reply Last reply
    0
    • JoeCFDJ JoeCFD deleted this topic on
    • JoeCFDJ JoeCFD restored this topic on
    • SavizS Offline
      SavizS Offline
      Saviz
      wrote on last edited by
      #2

      @JoeCFD said in a generic qml label for display of an image and a text:

      any recommendations for making a generic qml label to display an image and a text?

      If by "image and text" you mean a label that displays an icon (e.g., SVG) alongside text, you can use the IconLabel type. While there is no official documentation for it, you can view its source code. It allows you to assign text, an icon, and even customize the layout.

      For example, this is how it is used in a Button:

      Button {
          id: control
      
          property real radius: 0
      
          implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitContentWidth + leftPadding + rightPadding)
          implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitContentHeight + topPadding + bottomPadding)
      
          opacity: control.enabled ? 1 : 0.5
      
          padding: 6
          spacing: 6
      
          icon.width: 24
          icon.height: 24
      
          contentItem: IconLabel {
              id: iconLabel
      
              spacing: control.spacing
              mirrored: control.mirrored
              display: control.display // Controls Layout
      
              icon: control.icon // Icon
              text: control.text // Text
              font: control.font
          }
      }
      

      If by "image" you mean PNG or other non-icon image types, your best option is to use an Image type alongside a Text or Label type within a layout.

      I don’t see any other straightforward approach.

      1 Reply Last reply
      0

      • Login

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