Блог

Я пытаюсь разделить код на несколько файлов.

У меня есть два следующих qml-файла:

 // MainWindow.qml
import QtQuick 2.12
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.2


ApplicationWindow {
    visible: true
    width: 640
    height: 240
    title: qsTr("Hi Hi")
    color: "red"

    GridLayout {
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.margins: 9

        MessageLabel{
            message: "debug"
        }
        MessageLabel {
        }
        MessageLabel {
            message: "is critical"
        }
    }
}
 

и

 // MessageLabel.qml
import QtQuick 2.12

Rectangle {
    height: 50
    color: "blue"
    property string message: "debug message"

    Column {
        anchors.fill: parent
        padding: 5.0
        spacing: 2
        Text {
            text: message
        }
    }
}
 

Я ожидаю, что прямоугольники сообщений будут окрашены в синий цвет, но они будут красными или прозрачными:

Я не нашел ни малейшего намека на то, что здесь не так…

Как уже отмечалось, ошибка вызвана тем, что элемент не имеет ширины. В этом случае есть несколько решений, одно из них-установить ширину, как указано в другом сообщении, но, поскольку вы собираетесь использовать макеты, лучше установить эти значения через implicitWidth и implicitHeight, которые используются непосредственно макетами, и, например, вы можете использовать в качестве ссылки размер столбца.

Метка сообщения.qml

 import QtQuick 2.12

Rectangle {
    property string message: "debug message"

    implicitWidth: column.implicitWidth
    implicitHeight: column.implicitHeight
    color: "blue"

    Column {
        id: column

        anchors.fill: parent
        padding: 5
        spacing: 2

        Text {
            text: message
        }

    }

}
 

Выход

это происходит из-за того, что вы не задали ширину и высоту для строк сообщения: посмотрите на это :

Я меняю его на этот код:

 // MainWindow.qml
import QtQuick 2.12
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.2


ApplicationWindow {
    visible: true
    width: 640
    height: 240
    title: qsTr("Hi Hi")
    color: "red"

    GridLayout {
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.margins: 9

        MessageLabel{
            width: 145

            message: "debug"
        }
        MessageLabel {
            width: 135
        }
        MessageLabel {
            width: 150
            message: "is critical"
        }
    }
}
 

Вышел Из Строя :