Spacers

[marmistrz]

Hi
Is there any built-in spacer in qml, so that I don't have to hardcode pixel heights/widths (what gives me flexibility among devices)?
Thanks in advance

[wysota]

Use anchors to attach one element to another so that you don't need spacers. There is rarely need for something different but if you present your exact situation, maybe we can find a solution that fits.

[marmistrz]

Use anchors to attach one element to another so that you don't need spacers. There is rarely need for something different but if you present your exact situation, maybe we can find a solution that fits.

Thanks for your reply
It's an app for mobile device. The height will be sometimes 480 px (landscape), sometimes 800 px (portrait N900), sometimes 854 px (portrait N9), maybe sometimes something else (when I decide to release it for other devices)

main.qml

import QtQuick 1.0
import com.nokia.meego 1.0
//property color fontcolor: "white"
 
PageStackWindow
{
    id: pagestackwindow
    property int screenwidth: (screen.currentOrientation == Screen.Landscape) ? screen.displayWidth : screen.displayHeight // to ensure
 
    visible: true
    MainPage
    {
        id: mainview
    }
    initialPage: mainview
    ToolBarLayout
    {
        id: toolbar
        ToolIcon
        {
            iconId: "toolbar-back"
            onClicked: pageStack.pop()
        }
    }
}

import QtQuick 1.0
import com.nokia.meego 1.0
//property color fontcolor: "white"

PageStackWindow
{
    id: pagestackwindow
    property int screenwidth: (screen.currentOrientation == Screen.Landscape) ? screen.displayWidth : screen.displayHeight // to ensure

    visible: true
    MainPage
    {
        id: mainview
    }
    initialPage: mainview
    ToolBarLayout
    {
        id: toolbar
        ToolIcon
        {
            iconId: "toolbar-back"
            onClicked: pageStack.pop()
        }
    }
}

To copy to clipboard, switch view to plain text mode 

MainPage.qml

import QtQuick 1.0
import com.nokia.meego 1.0
 
Page
{
    id: mainPage
    tools: toolbar
    Column
    {
        width: parent.width
        CheckBox
        {
            id: tracksrc
            text: "Select track from library" // label isn't needed with PageStackWindow
            checked: true
            anchors.horizontalCenter: parent.horizontalCenter
            //checkable: true
        }
 
        // button for selecting a track from the media library
        Button
        {
            id: selecttrack
            text: "No track selected"
            checkable: false
            visible: tracksrc.checked
            width: screenwidth
            onClicked:
            {
                console.log("Select track button clicked")
                pageStack.push(Qt.resolvedUrl("SelectTrackPage.qml"))
            }
        }
 
        //line edits for entering the data manually
 
        TextField
        {
            id: artistfield
            placeholderText: "Artist"
            visible: !tracksrc.checked
            width: screenwidth
        }
        TextField
        {
            id: trackfield
            placeholderText: "Track"
            visible: !tracksrc.checked
            width: screenwidth
        }
 
        Button
        {
            id: lyricssrcbutton
            text: lyricssrcdialog.model.get(lyricssrcdialog.selectedIndex).name
            width: screenwidth
            onClicked: { lyricssrcdialog.open(); }
        }
 
        Button
        {
            id: go
            text: "Go!"
            width: screenwidth
            onClicked:
            {
               console.log("Go! button clicked")
               pageStack.push(Qt.resolvedUrl("ShowLyricsPage.qml"))
            }
        }
    }
    SelectionDialog
    {
        id: lyricssrcdialog
        titleText: "Download source"
        selectedIndex: 0
        model: ListModel
        {
            ListElement { name: "AZLyrics" }
        }
    }
    OKDialog
    {
        id: notimplementeddialog
        message: "Sorry, not implemented yet!"
    }
}

import QtQuick 1.0
import com.nokia.meego 1.0

Page
{
    id: mainPage
    tools: toolbar
    Column
    {
        width: parent.width
        CheckBox
        {
            id: tracksrc
            text: "Select track from library" // label isn't needed with PageStackWindow
            checked: true
            anchors.horizontalCenter: parent.horizontalCenter
            //checkable: true
        }

        // button for selecting a track from the media library
        Button
        {
            id: selecttrack
            text: "No track selected"
            checkable: false
            visible: tracksrc.checked
            width: screenwidth
            onClicked:
            {
                console.log("Select track button clicked")
                pageStack.push(Qt.resolvedUrl("SelectTrackPage.qml"))
            }
        }

        //line edits for entering the data manually

        TextField
        {
            id: artistfield
            placeholderText: "Artist"
            visible: !tracksrc.checked
            width: screenwidth
        }
        TextField
        {
            id: trackfield
            placeholderText: "Track"
            visible: !tracksrc.checked
            width: screenwidth
        }

        Button
        {
            id: lyricssrcbutton
            text: lyricssrcdialog.model.get(lyricssrcdialog.selectedIndex).name
            width: screenwidth
            onClicked: { lyricssrcdialog.open(); }
        }

        Button
        {
            id: go
            text: "Go!"
            width: screenwidth
            onClicked:
            {
               console.log("Go! button clicked")
               pageStack.push(Qt.resolvedUrl("ShowLyricsPage.qml"))
            }
        }
    }
    SelectionDialog
    {
        id: lyricssrcdialog
        titleText: "Download source"
        selectedIndex: 0
        model: ListModel
        {
            ListElement { name: "AZLyrics" }
        }
    }
    OKDialog
    {
        id: notimplementeddialog
        message: "Sorry, not implemented yet!"
    }
}

To copy to clipboard, switch view to plain text mode 

There are other pages, but I don't think they'll be relevant now.

I'm using the built-in qml application viewer

When created this way there's only one block of components and I'd like to place them among all the screen.

[wysota]

This is one possibility:

import QtQuick 1.1
 
Item {
  Rectangle {
    id: i1
    color: "#ccc"
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.right
    height: parent.height/3
 
    Rectangle {
      id: b1
      anchors.centerIn: parent
      color: "blue"
      Text { text: "B1"; anchors.centerIn: parent; color: "white" }
      width: 200
      height: 50 
    }
  }
  Rectangle {
    id: i2
    color: "#777"
    anchors.top: i1.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    height: i1.height
    Rectangle {
      id: b2
      anchors.centerIn: parent
      color: "blue"
      Text { text: "B2"; anchors.centerIn: parent; color: "white" }
      width: 200
      height: 50
    }
  }
  Rectangle {
    id: i3
    color: "#aaa"
    anchors.top: i2.bottom
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    height: i1.height
    Rectangle {
      id: b3
      anchors.centerIn: parent
      color: "blue"
      Text { text: "B3"; anchors.centerIn: parent; color: "white" }
      width: 200
      height: 50
    }
  }
}

import QtQuick 1.1

Item {
  Rectangle {
    id: i1
    color: "#ccc"
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.right
    height: parent.height/3

    Rectangle {
      id: b1
      anchors.centerIn: parent
      color: "blue"
      Text { text: "B1"; anchors.centerIn: parent; color: "white" }
      width: 200
      height: 50 
    }
  }
  Rectangle {
    id: i2
    color: "#777"
    anchors.top: i1.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    height: i1.height
    Rectangle {
      id: b2
      anchors.centerIn: parent
      color: "blue"
      Text { text: "B2"; anchors.centerIn: parent; color: "white" }
      width: 200
      height: 50
    }
  }
  Rectangle {
    id: i3
    color: "#aaa"
    anchors.top: i2.bottom
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    height: i1.height
    Rectangle {
      id: b3
      anchors.centerIn: parent
      color: "blue"
      Text { text: "B3"; anchors.centerIn: parent; color: "white" }
      width: 200
      height: 50
    }
  }
}

To copy to clipboard, switch view to plain text mode 

[marmistrz]

Thanks.
Using your idea I can place Rectanges inside Column and have width: parent.width and height: parent.height/x, x is the number of sections.
(using horizontalCenter if needed instead of centerIn)