Create Layouts and Position Components in Your App

Use Density Independent Values

An important concept for apps is density independence. Which means, no matter how big the device is physically, and no matter what the display resolution is, any item should have the same physical size on every device. A button on a small phone should have the same size on a bigger phone or tablet. Same for the height of list items for example.

V-Play offers tool to get density independent values to support any screen size and resolution.

There is also an in-depth guide on this topic if you want to find out more about this: Supporting Multiple Screen Sizes & Screen Densities with V-Play Apps

Those are the most important functions and properties of the App components, that will help you with density independence:

  • dp() – Specifies a density-independent pixel; 160 dp at a 160 dpi screen equals 1 inch.
  • sp() – The same as dp(), but use it only for Text elements to set the font.pixelSize. This allows to dynamically change the size of all the text in your app with the App::spScale property.
  • pixelToInches() – Converts the pixel value to inches.

In addition to these functions, you may also choose to adapt your layout based on the actual screen size or depending on the interface orientation:

Positioning with x and y

This is the most basic form of positioning. Note that you should always use density-independent values with dp(), for positioing and sizes of your components.

 import VPlayApps 1.0
 import QtQuick 2.0

 App {
   NavigationStack {

     Page {
       title: "X & Y Positioning"

       AppText {
         x: dp(30)
         y: dp(50)
         text: "I am positioned with x and y!"
       }
     }
   }
 }

Positioning with Anchoring

With anchoring, you can align an item relative to its parent item or any sibling item.

Here is a more detailed guide about anchoring: Positioning with Anchors

 import VPlayApps 1.0
 import QtQuick 2.0

 App {
   NavigationStack {

     Page {
       title: "Anchoring"

       AppText {
         id: centerItem
         anchors.centerIn: parent
         text: "Centered"
       }
       AppText {
         anchors.top: parent.top
         anchors.left: parent.left
         text: "TopLeft"
       }
       AppText {
         anchors.top: parent.top
         anchors.right: parent.right
         text: "TopRight"
       }
       AppText {
         anchors.bottom: parent.bottom
         anchors.left: parent.left
         text: "BottomLeft"
       }
       AppText {
         anchors.bottom: parent.bottom
         anchors.right: parent.right
         text: "BottomRight"
       }

       // This item uses some more available anchoring options
       // centerItem is a sibling of this text, thus we can anchor to it
       AppText {
         anchors.verticalCenter: centerItem.verticalCenter // Anchoring by vertical center
         anchors.verticalCenterOffset: dp(10)              // Positive or negative offset from the vertical center
         anchors.right: centerItem.left                    // We anchor the right edge to the left edge of centerItem
         anchors.rightMargin: dp(20)                       // This creates an offset from the right edge
         text: "Relative"
       }
     }
   }
 }

You can also use anchoring to define the size of items:

 import VPlayApps 1.0
 import QtQuick 2.0

 App {
   NavigationStack {

     Page {
       title: "Boxes"

       // Fills the whole page with red
       Rectangle {
         anchors.fill: parent
         color: "red"
       }
       // Fills the page with green but with margins
       Rectangle {
         anchors.fill: parent
         anchors.topMargin: dp(50)
         anchors.bottomMargin: dp(50)
         anchors.leftMargin: dp(50)
         anchors.rightMargin: dp(50)
         color: "green"
       }
       // A fixed width blue rectangle centered in the page
       Rectangle {
         anchors.centerIn: parent
         width: dp(100)
         height: dp(100)
         color: "blue"
       }
     }
   }
 }

Layout using Positioners

You can use positioner components to create rows, columns, grids and more complex layouts.

Here is a more detailed guide about positioners: Item Positioners

 import VPlayApps 1.0
 import QtQuick 2.0

 App {
   NavigationStack {

     Page {
       title: "Row"

       // Aligns all child items in a row
       Row {
         anchors.centerIn: parent
         // This is the space between each item in the row
         spacing: dp(10)

         Rectangle {
           width: dp(100)
           height: dp(100)
           color: "red"
         }
         Rectangle {
           width: dp(100)
           height: dp(100)
           color: "green"
         }
         Rectangle {
           width: dp(100)
           height: dp(100)
           color: "blue"
         }
       }
     }
   }
 }

Layout using Qt Quick Layouts

This is closely documented here: Qt Quick Layouts

How do I add or remove a component from my layout?

You can control the visibility of each item as you like. Items thus do not require to be re-created and can keep their state while being hidden.

This example toggles between two items with an AppButton:

 import VPlayApps 1.0

 App {
   Page {
     AppText {
       id: appTextItem
       text: "Some Text"
       anchors.centerIn: parent
     }
     AppButton {
        text: "A Button"
        visible: !appTextItem.visible // hide button if text is visible and vice versa
        onClicked: console.log("Button clicked!")
        anchors.centerIn: parent
     }

     AppButton {
       anchors.bottom: parent.bottom
       flat: false
       text: "Toggle"
       onClicked: appTextItem.visible = !appTextItem.visible // show/hide text
     }
   }
 }

More Frequently Asked Development Questions

Find more examples for frequently asked development questions and important concepts in the following guides:

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support