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 Updated to NodeBB v4.3 + New Features

Set background color on Layout (such as GridLayout)

Scheduled Pinned Locked Moved Solved QML and Qt Quick
6 Posts 5 Posters 31.3k 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