Qt QML-Anker funktioniert nicht in benutzerdefinierten Artikel

Question

Ich bin neu von Qml. Ich fange an, eine kleine Anwendung mit einem benutzerdefinierten Element zu entwickeln. Wenn ich versuche, in der Anwendung anchor.top: first_item.bottom zu verwenden, um die Rechtecke der benutzerdefinierten Komponente zu positionieren, funktioniert einer unter dem anderen nicht.

Inhaltsdatei main.qml:

import QtQuick 2.5 

Item 
{ 
    id:main_screen 
    Rectangle 
    { 
     width: 300 
     height: 60 

     id: text_content 
     color: "DarkGray" 
     opacity: 0.9 
     border.color: "blue" 
     border.width: 3 
     radius: 5 
     z:6 

     Text { 
      id: titleText 
      width: parent.width 
      height: parent.height 
      font.pointSize: 20 
      font.family: "Arial" 
      horizontalAlignment: Text.AlignHCenter 
      verticalAlignment: Text.AlignVCenter 
      text: "Test - title" 
      color: "White"; style: Text.Raised; 
     } 
    } 


//..................This rectangle is shown below main_screen... so is OK 
    Custom_item 
    { 
     id:first_item 
     anchors.top: main_screen.bottom 
    } 

//..................This rectangle is not shown below first_item... but it shown on absolute top, in overlap of retangle title 
    Custom_item 
    { 
     id:second_item 
     anchors.top: first_item.bottom 
    } 

//..................This rectangle is not shown below second_item... but it shown on absolute top, in overlap of retangle title 
    Custom_item 
    { 
     id:third_item 
     anchors.top: second_item.bottom 
    } 
} 

Inhaltsdatei Custom_item.qml

import QtQuick 2.5 

Item 
{ 
    id:testComponent 

    Rectangle 
    { 
     width: 300 
     height: 60 

     id: text_content 

     color: "DarkGray" 
     opacity: 0.9 
     border.color: "blue" 
     border.width: 3 
     radius: 5 
     z:6 
    } 
} 

, was mache ich falsch?

Dank

Answer 1

Das Problem liegt innerhalb der Abmessungen der Objekte Ihre zu verankern.

Obwohl die Rectangle s width und ein height hat, das Einschließen Item hat keine, so ist es im Grunde genommen 0 Pixel in der Höhe und Breite ist, während die Rectangle ragt.

Wenn Sie keinen Grund haben, für die Rectangle im Item umschließt, würde ich Ihnen empfehlen, die Rectangle sich als Top-Level-Element der Datei zu übernehmen.

Gründe für die Item mit könnten diejenigen sein: vielleicht existieren

• Ausblenden der Rectangles Eigenschaften
• mit mehreren Kindern für die Item, die logisch Geschwister zum Rectangle
• ... aus anderen Gründen; -)

Trotzdem müssen Sie sicherstellen, dass der Toplevel-Artikel immer hat die richtigen Dimensionen. Sie sollten also die Breite und Höhe, besser die implicitWidth und implicitHeight in Komponentendeklarationen festlegen.

Beispiel 1: Ohne Item

import QtQuick 2.5 
Rectangle { 
    id: root 
    width: 300 
    height: 60 

    color: "DarkGray" 
    opacity: 0.9 
    border.color: "blue" 
    border.width: 3 
    radius: 5 
    z:6 
} 

Beispiel 2: Item

import QtQuick 2.5 
Item { 
    id:testComponent 
    implicitHeight: 60 // < This 
    implicitWidth: 300 // < and that are important to have the dimensions 

    Rectangle { 
     id: text_content 

     anchors.fill: parent 
     color: "DarkGray" 
     opacity: 0.9 
     border.color: "blue" 
     border.width: 3 
     radius: 5 
     z:6 
    } 
} 

Answer 2

Sie verankern die alle Rectangle ‚s zum Item daher sind Sie nicht das gewünschte Ergebnis zu bekommen. Einfache Änderung der ID des oberen Rectangle wie folgt

Item 
{ 
    id: root   
    Rectangle 
    { 
     id:main_screen 
     ... 
    } 
}