Skip to main content

5-3 Basic QML Types

This chapter introduces fundamental QML types commonly used in UI development. Understanding these types will help you design and structure user interfaces efficiently.

When designing a UI, organizing elements properly is crucial. Often, we use layout components to arrange elements.

Creating a New QML File​

To add a new QML file:

  1. Right-click on qml.qrc in the Projects tree view.
  2. Select Add New > Qt/QML File (Qt Quick 2).
tip

It is recommended to start QML filenames with a capital letter. For example:

StackView.qml

Basic QML Types​

Rectangle QML Type​

Reference: Rectangle QML Type

Rectangle {
    width: 100
    height: 100
    color: "red"
    border.color: "black"
    border.width: 5
    radius: 10
}

Image QML Type​

Reference: Image QML Type

Image {
    width: 640
    height: 480  
    anchors.centerIn: parent  
    source: "qrc:/images/img.png"
}

Item QML Type​

Reference: Item QML Type

import QtQuick 2.0

Item {
    width: 100
    height: 100

    Rectangle { width: 80; height: 80; border.width: 1 }
    Rectangle { x: 20; y: 20; width: 80; height: 80; border.width: 1 }
}

Positioning with Anchors​

Reference: Qt Quick Positioning

Commonly used anchors:

anchors.centerIn: parent
anchors.fill: parent
anchors.left: parent.left

Practice Exercise 1:​

  • Create a new Qt/QML File (Qt Quick 2).
  • Add three Rectangle elements aligned horizontally using RowLayout.
  • Center the rectangles within the display using:
anchors.centerIn: parent

Practice Exercise 2:​

  • Create a Button and a Rectangle.
  • When the button is clicked, the Rectangle changes color.

StackView QML Type​

StackView allows managing UI pages by pushing and popping views dynamically.

Reference: StackView QML Type

Example 1:​

import QtQuick.Controls 1.4
import QtQuick.Layouts 1.2

Item {
    anchors.fill: parent
    StackView {
        id: stack
        initialItem: mainView
        anchors.fill: parent
    }

    Component {
        id: mainView

        Row {
            spacing: 10

            Button {
                text: "Push"
                onClicked: stack.push(mainView)
            }
            Button {
                text: "Pop"
                enabled: stack.depth > 1
                onClicked: stack.pop()
            }
            Text {
                text: stack.depth
            }
        }
    }
}

Loader QML Type​

The Loader component dynamically loads QML files.

Loader {
    id: mainLoader
    anchors.fill: parent
    source: "qrc:/MainForm.ui.qml"
}

MouseArea Example for Loader Switching:​

Rectangle {
    MouseArea {
        anchors.fill: parent
        onClicked: {
            mainLoader.source = "qrc:/Page2.qml"
        }
    }
}

SwipeView QML Type​

SwipeView enables navigation between pages by swiping sideways.

Reference: SwipeView QML Type

Example Usage:​

SwipeView {
    id: view
    anchors.fill: parent
    Rectangle { width: 640; height: 480; color: "red" }
    Rectangle { width: 640; height: 480; color: "blue" }
}

PageIndicator {
    id: indicator
    count: view.count
    currentIndex: view.currentIndex
    anchors.bottom: view.bottom
    anchors.horizontalCenter: parent.horizontalCenter
}
tip

To change the SwipeView orientation to vertical:

orientation: Qt.Vertical

MediaPlayer QML Type​

Reference: MediaPlayer QML Type

Example:​

import QtMultimedia 5.5

MediaPlayer {
    id: player
    source: "qrc:/videos/video.mp4"
    autoPlay: true
}

VideoOutput {
    width: 464
    height: 588
    id: videoOutput
    source: player
    anchors.centerIn: parent
}

Trigger Playback with a Button:​

MouseArea {
    anchors.fill: parent
    onClicked: {
        player.play()
    }
}
note

If you compile using "Desktop GCC 64-bit", you might see the following error:

defaultServiceProvider::requestService(): no service found for - "org.qt-project.qt.mediaplayer"

However, the issue will not occur when compiling with the Renesas kit setting and running on the target board.

Additional Resources​

Conclusion​

This tutorial provides a structured introduction to basic QML types, positioning techniques, UI components, and multimedia integration. By following these examples, you can efficiently develop QML applications for various platforms, including Renesas RZ/G2L and RZ/V2H.