Qt/QML - удобный просмоторщик исходников Qt

Удобство связанно с расширенными функциями поиска и навигации по коду. https://code.woboq.org/

QML - после добавление MouseArea слоты нижних обьектов не работают

Если после добавления MouseArea слоты обьектов над которыми она размещена перестают работать.
Необходимо для требуемых сигналов в MouseArea установить mouse.accepted = false что позволит передать событие элементу находящемуся ниже.

RowLayout {
    TextEdit { text: "Hi" }
    Slider {}
    CheckBox { text: "CheckBox"}

    MouseArea {
        anchors.fill: parent
        propagateComposedEvents: true

        onClicked: mouse.accepted = false;
        onPressed: mouse.accepted = false;
        onReleased: mouse.accepted = false;
        onDoubleClicked: mouse.accepted = false;
        onPositionChanged: mouse.accepted = false;
        onPressAndHold: mouse.accepted = false;
    }
}

Более подробно тут и тут.

QML - vertical Slider

Если взять слайдер из примера в документации, то нам необходимо сделать несколько изменений.
1. Добавить параметр orientation: Qt.Vertical
2. Поменять формулу рассчета x и y:
y: mainVolume.topPadding + mainVolume.visualPosition * (mainVolume.availableHeight - height)
x: mainVolume.leftPadding + mainVolume.availableWidth / 2 - width / 2

If you take the slider from the example in the documentation, then you need to make a few changes.
1. Add the orientation parameter: Qt.Vertical
2. Change the calculation formula for x and y:
y: mainVolume.topPadding + mainVolume.visualPosition * (mainVolume.availableHeight - height)
x: mainVolume.leftPadding + mainVolume.availableWidth / 2 - width / 2

import QtQuick 2.6
import QtQuick.Controls 2.1

Slider {
    id: control
    value: 0.5
    orientation: Qt.Vertical

            background: Rectangle {
                x: control.leftPadding + control.availableWidth / 2 - width / 2
                y: control.topPadding
                implicitWidth: 4
                implicitHeight: 200
                width: implicitWidth
                height: control.availableHeight
                radius: 2
                color: "#bdbebf"

                Rectangle {
                    width: parent.width
                    height: control.visualPosition * parent.height
                    color: "#21be2b"
                    radius: 2
                }
            }

    handle: Rectangle {
        y: control.topPadding + control.visualPosition * (control.availableHeight - height)
        x: control.leftPadding + control.availableWidth / 2 - width / 2
        implicitWidth: 26
        implicitHeight: 26
        radius: 13
        color: control.pressed ? "#f0f0f0" : "#f6f6f6"
        border.color: "#bdbebf"
    }
}

QML stretched item

Если наш экран состоит из трех элементов. И при изменении размеров окна мы хотим расстягивать только центральный. Необходимо закрепить боковые элементы к краям видимой области.

If our screen consists of three elements. And when changing the size of the window, we want to stretch only the central. It is necessary to fix the side elements to the edges of the visible area

import QtQuick 2.0

Rectangle {
  width: 500; height: 200
  color: "lightgray"

          Rectangle {
            id: rect1
            width: 100
            height: parent.height
            color: "blue"
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.bottom: parent.bottom
        }

        Rectangle {
            id: rect2
            height: parent.height
            anchors.top: rect1.top
            anchors.left: rect1.right
            anchors.right: rect3.left
            color: "green"
        }

        Rectangle {
            id: rect3
            width: 100
            height: parent.height
            anchors.top: parent.top
            anchors.right:  parent.right
            color: "blue"
        }

}

QML - прямоугольник с закругленными углами с одной стороны

Для этого комбинируем один Rectangle из двух

import QtQuick 2.0



Item{

                Rectangle {//прямоугольник с закругленными углами

                  id: roundRect

                  radius: 10

                  color: "green"

                  width: 40

                  height: 80

                }



                Rectangle {//прямоуглоьник закрывающий одну из граней roundRect

                  id: squareRect

                  width: 40



                  color: "green"

                  height: roundRect.radius

                  anchors.bottom: roundRect.bottom

                  anchors.left: roundRect.left

                  anchors.right: roundRect.right



                }

}
 

Просмотр QML on-line

Сервис отображающий результат исполнения QML кода

A QML engine in a web browser. https://qmlweb.github.io/

QML - ListElement with subelement

It is possible for roles to contain list data.

ListModel {
    id: fruitModel

    ListElement {
        name: "Apple"
        cost: 2.45
        attributes: [
            ListElement { description: "Core" },
            ListElement { description: "Deciduous" }
        ]
    }
    ListElement {
        name: "Orange"
        cost: 3.25
        attributes: [
            ListElement { description: "Citrus" }
        ]
    }
    ListElement {
        name: "Banana"
        cost: 1.95
        attributes: [
            ListElement { description: "Tropical" },
            ListElement { description: "Seedless" }
        ]
    }
}

link