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. QML Prebuilt Items and Placement of new Items

QML Prebuilt Items and Placement of new Items

Scheduled Pinned Locked Moved Solved QML and Qt Quick
5 Posts 2 Posters 407 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.
  • fcarneyF Offline
    fcarneyF Offline
    fcarney
    wrote on last edited by
    #1

    Lets say I have a prebuilt Item like this:

    import QtQuick 2.12
    import QtQuick.Controls 2.12
    
    Item {
        Button {
            id: button1
            width: 100
            text: "button1"
            anchors.left: parent.left
        }
    }
    

    I then include it like this and add another sub Item to that item:

    import QtQuick 2.12
    import QtQuick.Controls 2.12
    import QtQuick.Window 2.12
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Item World")
    
        PrebuiltItem {
            Button {
                id: button2
                width: 100
                text: "button2"
                // What can I use to position relative to what is in PrebuiltItem
                anchors.left: parent.left
            }
        }
    }
    

    Is there a way to place the new item (in this case a Button) next to what is already in the item?

    It won't see ids for the items that are already in the item.

    Hmmm, maybe this might work:

    property var lastItem: idOfLastItem
    ...
    Item{
        Button{
            anchors.left: lastItem.left
        }
    }
    

    C++ is a perfectly valid school of magic.

    1 Reply Last reply
    0
    • fcarneyF Offline
      fcarneyF Offline
      fcarney
      wrote on last edited by
      #2

      I think this might be what I am looking for:
      https://together.jolla.com/question/4717/how-to-position-nested-items-in-a-qml-component/

      C++ is a perfectly valid school of magic.

      1 Reply Last reply
      0
      • fcarneyF Offline
        fcarneyF Offline
        fcarney
        wrote on last edited by
        #3

        Now I get it:
        PrebuiltItem.qml

        import QtQuick 2.12
        import QtQuick.Controls 2.12
        
        Item {
            // places items by default in content object
            default property alias _contentChildren: row0.data
            Row {
                id: row0
            }
        
            // places items when using this syntax
            /*
              row1: Item{} // as item
              row2: [Item{}, Item{}] // as list
              */
            property alias row1: row1.children
            property alias row2: row2.children
            property alias row3: row3.children
            Row {
                id: row1
                anchors.left: row0.right
            }
        
            Row {
                id: row2
                anchors.left: row1.right
            }
        
            Row {
                id: row3
                anchors.left: row2.right
            }
        }
        

        main.qml

        import QtQuick 2.12
        import QtQuick.Controls 2.12
        import QtQuick.Window 2.12
        
        Window {
            visible: true
            width: 640
            height: 480
            title: qsTr("Item World")
        
            PrebuiltItem {
                Text {
                    text: "one"
                }
                row1: Text {
                    text: "two"
                }
        
                row2: [
                Text {
                    text: "three"
                },
                Text {
                    text: "three"
                }]
        
                row3: Text {
                    text: "four"
                }
            }
        }
        

        C++ is a perfectly valid school of magic.

        ODБOïO 1 Reply Last reply
        0
        • fcarneyF fcarney

          Now I get it:
          PrebuiltItem.qml

          import QtQuick 2.12
          import QtQuick.Controls 2.12
          
          Item {
              // places items by default in content object
              default property alias _contentChildren: row0.data
              Row {
                  id: row0
              }
          
              // places items when using this syntax
              /*
                row1: Item{} // as item
                row2: [Item{}, Item{}] // as list
                */
              property alias row1: row1.children
              property alias row2: row2.children
              property alias row3: row3.children
              Row {
                  id: row1
                  anchors.left: row0.right
              }
          
              Row {
                  id: row2
                  anchors.left: row1.right
              }
          
              Row {
                  id: row3
                  anchors.left: row2.right
              }
          }
          

          main.qml

          import QtQuick 2.12
          import QtQuick.Controls 2.12
          import QtQuick.Window 2.12
          
          Window {
              visible: true
              width: 640
              height: 480
              title: qsTr("Item World")
          
              PrebuiltItem {
                  Text {
                      text: "one"
                  }
                  row1: Text {
                      text: "two"
                  }
          
                  row2: [
                  Text {
                      text: "three"
                  },
                  Text {
                      text: "three"
                  }]
          
                  row3: Text {
                      text: "four"
                  }
              }
          }
          
          ODБOïO Offline
          ODБOïO Offline
          ODБOï
          wrote on last edited by ODБOï
          #4

          @fcarney you can have RowLayout or Row as root item in the PrebuiltItem

          //PrebuiltItem.qml
          RowLayout{
          Button{}
          }

          //main.qml
          PrebuiltItem{Button{}}

          1 Reply Last reply
          0
          • fcarneyF Offline
            fcarneyF Offline
            fcarney
            wrote on last edited by
            #5

            My objects will be a lot more complex than that. With nested rects, layouts, etc.

            C++ is a perfectly valid school of magic.

            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