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)

Set background color on Layout (such as GridLayout)

Scheduled Pinned Locked Moved Solved QML and Qt Quick
6 Posts 5 Posters 30.9k 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.
  • J Offline
    J Offline
    Jehyeok
    wrote on 14 Jul 2016, 08:04 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
    • D Offline
      D Offline
      dheerendra
      Qt Champions 2022
      wrote on 14 Jul 2016, 08:41 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
      • J Offline
        J Offline
        jpnurmi
        wrote on 14 Jul 2016, 09:53 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
            }
        }
        
        J A 2 Replies Last reply 20 Jul 2016, 07:15
        2
        • J jpnurmi
          14 Jul 2016, 09:53

          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
              }
          }
          
          J Offline
          J Offline
          Jehyeok
          wrote on 20 Jul 2016, 07:15 last edited by
          #4

          @jpnurmi Thanks. It works

          1 Reply Last reply
          0
          • J jpnurmi
            14 Jul 2016, 09:53

            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 15 Oct 2018, 07:35 last edited by
            #5

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

            O 1 Reply Last reply 15 Oct 2018, 07:53
            0
            • A amarism
              15 Oct 2018, 07:35

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

              O Offline
              O Offline
              ODБOï
              wrote on 15 Oct 2018, 07:53 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