Ask / Submit
1

How to position nested Items in a QML component?

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

lbt gravatar image

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

2 Answers

Sort by » oldest newest most voted
0

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

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 more

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
0

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

lbt gravatar image

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 more
Login/Signup to Answer

Question tools

Follow
1 follower

Stats

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

Seen: 5,959 times

Last updated: Dec 28 '13