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. Set background color on Layout (such as GridLayout)
Forum Update on Tuesday, May 27th 2025

Set background color on Layout (such as GridLayout)

Scheduled Pinned Locked Moved Solved QML and Qt Quick
6 Posts 5 Posters 31.0k 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.
  • JehyeokJ Offline
    JehyeokJ Offline
    Jehyeok
    wrote on last edited by
    #1

    I create QT quick component redefinding GridLayout to make simple use.
    MyGridLayout.qml

    GridLayout  {
      rows:1
      columns:0
    }
    

    And I use this
    myDialog.qml

    MyGridLayout  {
      MyGridLayout {
        Text {
        }
        Text {
        }
      }
      MyGridLayout {
        Button {
        }
      }
    }
    

    It works well to have same setting.
    However, I would like to set background color on it. there is no such a property on GridLayout...
    Do you know how to do it with my customised component (MyGridLayout)
    I would like to do like below.

    MyGridLayout  {
      color: "white"
      MyGridLayout {
      color: "gray"
        Text {
        }
        Text {
        }
      }
      MyGridLayout {
      color: "black"
        Button {
        }
      }
    }
    
    1 Reply Last reply
    0
    • dheerendraD Offline
      dheerendraD Offline
      dheerendra
      Qt Champions 2022
      wrote on last edited by
      #2

      Not possible. You need to try something like follows. Your grid layout need to child of Rect with appropriate colors.

      Rectangle {
          width: 200;height: 200;color :"black"
          MyGridLayout {
              id: grid
              columns: 3
              anchors.fill: parent
      
              Text { text: "Three"; font.bold: true; }
              Text { text: "words"; color: "red" }
                 }
      

      }

      Dheerendra
      @Community Service
      Certified Qt Specialist
      http://www.pthinks.com

      1 Reply Last reply
      4
      • jpnurmiJ Offline
        jpnurmiJ Offline
        jpnurmi
        wrote on last edited by
        #3

        How about this?

        // MyGridLayout.qml
        import QtQuick 2.5
        import QtQuick.Layouts 1.1
        
        Rectangle {
            default property alias data: grid.data
            implicitWidth: grid.implicitWidth
            implicitHeight: grid.implicitHeight
            GridLayout {
                anchors.fill: parent
            }
        }
        
        JehyeokJ A 2 Replies Last reply
        2
        • jpnurmiJ jpnurmi

          How about this?

          // MyGridLayout.qml
          import QtQuick 2.5
          import QtQuick.Layouts 1.1
          
          Rectangle {
              default property alias data: grid.data
              implicitWidth: grid.implicitWidth
              implicitHeight: grid.implicitHeight
              GridLayout {
                  anchors.fill: parent
              }
          }
          
          JehyeokJ Offline
          JehyeokJ Offline
          Jehyeok
          wrote on last edited by
          #4

          @jpnurmi Thanks. It works

          1 Reply Last reply
          0
          • jpnurmiJ jpnurmi

            How about this?

            // MyGridLayout.qml
            import QtQuick 2.5
            import QtQuick.Layouts 1.1
            
            Rectangle {
                default property alias data: grid.data
                implicitWidth: grid.implicitWidth
                implicitHeight: grid.implicitHeight
                GridLayout {
                    anchors.fill: parent
                }
            }
            
            A Offline
            A Offline
            amarism
            wrote on last edited by
            #5

            @jpnurmi may i know what is "data" is here???

            ODБOïO 1 Reply Last reply
            0
            • A amarism

              @jpnurmi may i know what is "data" is here???

              ODБOïO Offline
              ODБOïO Offline
              ODБOï
              wrote on last edited by
              #6

              @amarism
              see here for data
              http://doc.qt.io/qt-5/qml-qtquick-item.html

              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