How to position nested Items in a QML component?

Question

1

How to position nested Items in a QML component?

asked 2013-12-28 15:20:51 +0300

lbt

6514 ●41 ●48 ●51

moderator

http://www.merproject.org...

Given MyPage.qml:

import QtQuick 2.0
import Sailfish.Silica 1.0

Page {
    id: page
    Header { }
    Column {
      // child Items should go here
    }
    Footer { }
}

How can I do

import QtQuick 2.0
import Sailfish.Silica 1.0

// snip
    MyPage {
      MyObj {}
      AnotherObj { cmd: "a" }
      AnotherObj { cmd: "b" }
    }
// snip
    MyPage2 {
      MyObj {}
      AnotherObj { cmd: "c" }
    }

and have the MyObj and AnotherObj items appear in the column?

The actual use-case is to have quite a few pages with very similar boiler plate using a set of display objects with parameters.

edit retag flag offensive close delete

Answer 1

0

answered 2013-12-28 16:13:35 +0300

Sfiet_Konstantin

6385 ●45 ●72 ●97

http://sfietkonstantin.wo...

You do this by exporting the children property of Column.

The code needs some tweaks, but here is the generic idea. If I have a container component (Container.qml) described as follow

import QtQuick 2.0

Item {
    width: 500
    height: 500
    property alias content: column.children

    Column {
        id: column
        anchors.fill: parent
    }
}

Then you can "inherit" from this component, and use the content property to set the children components. I wrote two components that put one and two rectangles in the column:

import QtQuick 2.0

Container {
    content: Rectangle {
        width: parent.width
        height: 100
        color: "red"
    }
}

and

import QtQuick 2.0

Container {
    content: [
        Rectangle {
            width: parent.width
            height: 100
            color: "red"
        },
        Rectangle {
            width: parent.width
            height: 100
            color: "blue"
        }
    ]
}

Note that you need to pass the two components (two rectangles) as a list.

edit flag offensive delete publish link

Comments

Thanks - this is definitely along the right lines. I found a solution that looks even better :)

lbt ( 2013-12-28 17:35:58 +0300 )edit

Accepted Answer

0

answered 2013-12-28 17:34:51 +0300

lbt

6514 ●41 ●48 ●51

moderator

http://www.merproject.org...

Thanks to Sami I found the 'correct' solution is to use 2 concepts: the default property and the data property

So making the default the data property of the Column means that any children get dropped in there.

import QtQuick 2.0
import Sailfish.Silica 1.0

Page {
    id: page
    // set the default property to be a private property aliased to content.data
    // so any children are added to the Column
    default property alias _contentChildren: content.data
    Header { }
    Column {
      id: content
    }
    Footer { }
}

This now works:

import QtQuick 2.0
import Sailfish.Silica 1.0

// snip
    MyPage {
      MyObj {}
      AnotherObj { cmd: "a" }
      AnotherObj { cmd: "b" }
    }
// snip
    MyPage2 {
      MyObj {}
      AnotherObj { cmd: "c" }
    }

edit flag offensive delete publish link

How to position nested Items in a QML component?

2 Answers

Comments

Question tools

Stats

Related questions

How to position nested Items in a QML component?

2 Answers

Comments

Question tools

Public thread

Stats

Related questions