Как обновить нижний элемент управления на основе загрузчика в QML

У меня есть основной qml-файл, который содержит верхний элемент — прямоугольник, средний элемент — загрузчик, который загружает различные qml-файлы, а нижний элемент — некоторый текст.

Основываясь на элементе загрузчика, я хочу, чтобы нижний элемент корректировался, я пытался использовать якоря, но кое-кто, как он не работает, мог бы кто-нибудь объяснить мне, как это сделать.

Вот мой код:

main.qml

import QtQuick 2.3
import QtQuick.Controls 1.2

ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")

Rectangle{
anchors.fill: parent
Rectangle{
id: toprect
width: 100
height: 100
color: "green"anchors.horizontalCenter: parent.horizontalCenter
}
Loader{
id: middlerect
anchors.top: toprect.bottom
source: "qrc:/new.qml"}
Rectangle{
id: belowrect
anchors.top: middlerect.bottom
Text{
text: "Bottom"}
}
}
}

new.qml

import QtQuick 2.0
import QtQuick.Controls 1.2

Item {
id: newid
Column{
spacing: 10
Rectangle{
width: 100
height: 50
color: "lightblue"}
Rectangle{
width: 100
height: 50
color: "lightgreen"}
}
}

Выпуск:

Нижний элемент накладывается на средний элемент

1

Решение

у вас есть 2 проблемы в вашем коде:

  1. Вы должны дать высоту и ширину нижнему правому
  2. вы должны указать высоту и ширину вашего объекта new.qml

попробуй это:

main.qml

import QtQuick 2.3
import QtQuick.Controls 1.2

ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")

Rectangle{
anchors.fill: parent
Rectangle{
id: toprect
width: 100
height: 100
color: "green"anchors.horizontalCenter: parent.horizontalCenter
}Loader{
id: middlerect
anchors.top: toprect.bottom
source: "qrc:/new.qml"}
Rectangle{
id: belowrect
color:"yellow"
width: childrenRect.width
height: childrenRect.height
anchors.top: middlerect.bottom
Text{
id:text
text: "Bottom"}
}
}
}

new.qml

import QtQuick 2.0
import QtQuick.Controls 1.2

Item {
id: newid
width: childrenRect.width
height: childrenRect.height
Column{
spacing: 10
Rectangle{
width: 100
height: 50
color: "lightblue"}
Rectangle{
width: 100
height: 50
color: "lightgreen"}
}
}
0

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]