C

Qt Quick Ultralite layouts Example

// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial

import QtQuick
import QtQuick.Controls

Rectangle {
    id: root

    required property string propertyName
    required property string propertyValue
    property bool checked: checkbox.checked

    width: container1.width
    height: container1.height + container2.height

    Column {
        Rectangle {
            id: container1
            width: 120
            height: 30
            color: "#003f48"

            Text {
                text: propertyName
                font.pointSize: 10
                color: "#21db81"
                anchors.verticalCenter: parent.verticalCenter
                x: 8
            }
            CheckBox {
                id: checkbox
                anchors.right: parent.right
                anchors.rightMargin: 8
                anchors.verticalCenter: parent.verticalCenter
                height: 28
                width: 28
            }
        }

        Rectangle {
            id: container2
            color: "#d4d4d4"
            width: 120
            height: 30

            Text {
                text: propertyValue
                font.pointSize: 10
                color: "#003f47"
                anchors.verticalCenter: parent.verticalCenter
                x: 8
            }
        }
    }
}