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. Color background for Label
Forum Updated to NodeBB v4.3 + New Features

Color background for Label

Scheduled Pinned Locked Moved Solved QML and Qt Quick
3 Posts 2 Posters 8.2k 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.
  • G Offline
    G Offline
    GrahamLa
    wrote on last edited by
    #1

    Hi
    I know how to set the background color for a label -
    this is my main qml that does this

    ApplicationWindow {
        visible: true
        title: "Basic layouts"
        property int margin: 11
    
    
        Label {
            id: label
            text: qsTr("Frame Title")
            leftPadding: 17
            font.pointSize: 17
            anchors.right: parent.right
            anchors.rightMargin: 0
            anchors.left: parent.left
            anchors.leftMargin: 0
    
            color: "red"
    
            background: Rectangle {
                color: "black"
            }
        }
    }
    

    Now if move the code for the label into its own component and instantiate it from main

    MyLabel

    import QtQuick 2.0
    import QtQuick.Controls 2.5
    
    Rectangle {
        Label {
            id: label
            text: qsTr("Frame Title")
            leftPadding: 17
            font.pointSize: 17
            anchors.right: parent.right
            anchors.rightMargin: 0
            anchors.left: parent.left
            anchors.leftMargin: 0
    
            color: "red"
    
            background: Rectangle {
                color: "black"
            }
        }
    }
    

    main -

    ApplicationWindow {
        visible: true
        title: "Basic layouts"
        property int margin: 11
    
        MyLabel {
    
        }
    }
    

    Running this results in the background color being lost.
    What is happening here?

    Thanks

    J.HilkJ 1 Reply Last reply
    0
    • G GrahamLa

      Hi
      I know how to set the background color for a label -
      this is my main qml that does this

      ApplicationWindow {
          visible: true
          title: "Basic layouts"
          property int margin: 11
      
      
          Label {
              id: label
              text: qsTr("Frame Title")
              leftPadding: 17
              font.pointSize: 17
              anchors.right: parent.right
              anchors.rightMargin: 0
              anchors.left: parent.left
              anchors.leftMargin: 0
      
              color: "red"
      
              background: Rectangle {
                  color: "black"
              }
          }
      }
      

      Now if move the code for the label into its own component and instantiate it from main

      MyLabel

      import QtQuick 2.0
      import QtQuick.Controls 2.5
      
      Rectangle {
          Label {
              id: label
              text: qsTr("Frame Title")
              leftPadding: 17
              font.pointSize: 17
              anchors.right: parent.right
              anchors.rightMargin: 0
              anchors.left: parent.left
              anchors.leftMargin: 0
      
              color: "red"
      
              background: Rectangle {
                  color: "black"
              }
          }
      }
      

      main -

      ApplicationWindow {
          visible: true
          title: "Basic layouts"
          property int margin: 11
      
          MyLabel {
      
          }
      }
      

      Running this results in the background color being lost.
      What is happening here?

      Thanks

      J.HilkJ Offline
      J.HilkJ Offline
      J.Hilk
      Moderators
      wrote on last edited by
      #2

      hi @GrahamLa

      your MyLabel and therefore the (root)Rectangle inside your QML file has no size and is not part of a layout -> size is 0,0 and no background is drawn.

      You see a text because the Textelement by default allows drawing outside its actual bounds.


      Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


      Q: What's that?
      A: It's blue light.
      Q: What does it do?
      A: It turns blue.

      1 Reply Last reply
      0
      • G Offline
        G Offline
        GrahamLa
        wrote on last edited by
        #3

        Thanks for a good explanation

        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