Как сделать "декоратор окон" типа custom qml? - PullRequest
0 голосов
/ 20 февраля 2020

Я новичок в QML и пытаюсь создать своего рода контейнер в рамке с заголовком, содержащим простой текст для заголовка и несколько световых индикаторов. Я хочу использовать это таким образом, чтобы я мог просто импортировать его и заполнить «тело» другими элементами. Очень похоже на окно. Однако я не до конца понимаю, как это реализовать. Будем благодарны за любые указания или помощь.

import QtQuick 2.2
import QtQuick.Extras 1.4
Rectangle{
    id: framedContainer
    property alias title: title.text
    property alias titleHeight: containerTitle.height
    border.color: "#ffffff"
    border.width: 1
    clip: true
    Column {
        id: column
        width: parent.width
        height: parent.height
        clip: true

        Rectangle{
            id: containerTitle
            color: "#400707"
            clip: true
            width: parent.width
            height: titleHeight - framedContainer.border.width

            Row {
                id: row
                width: parent.width
                height: parent.width
                clip: true
                spacing: 5

                Text{
                    id: title
                    width: parent.width*0.8
                    color: "#ffffff"
                    fontSizeMode: Text.VerticalFit
                    wrapMode: Text.VerticalFit
                    height: parent.height
                }
                Rectangle{
                    width: parent.width*0.2
                    height: parent.height
                    color: "#400707"
                    clip: true

                    Row {
                        spacing: 3
                        StatusIndicator {
                            width: 10;
                            height: 10;
                            color: "green"
                            visible: true
                        }
                        StatusIndicator {
                            width: 10;
                            height: 10;
                            color: "orange"
                        }
                        StatusIndicator {
                            width: 10;
                            height: 10;
                            color: "red"
                        }
                    }
                }
            }
        }
    }
}

Итак, я хочу иметь возможность использовать это таким образом, чтобы я мог просто:

FramedContainer{
        id: editor
        title: "EDITOR"
        width: grid.width/3
        height: grid.height/3
        titleHeight: 25
        //My stuff here that will fill "bottom part" of column, the body
    }

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...