Jede Art von Positionern funktioniert nicht mit benutzerdefinierten Element

Question

Es gibt einen Code von Sensorelement. Es ist wie eine Basisklasse für andere Sensortypen Elemente:

Rectangle { 
    property real value: 0 

    property alias imageWidth: image.width 
    property alias imageSource: image.source 
    property alias displayWidth: display.width 

    width: Math.max(image.width, display.width) 
    height: image.height + display.height 

    border.width: 1 

    Rectangle { 
     id: display 
     width: 40 
     height: 20 
     border.width: 1 
     color: "lightgreen" 

     Text { 
      anchors.centerIn: parent 
      text: value 
      font.pixelSize: parent.width * 0.3; 
     } 
    } 

    Image { 
     id: image 
     width: display.width * 0.5 
     anchors.top: display.bottom 
     anchors.horizontalCenter: display.horizontalCenter 
     source: "qrc:/images/temperature.png" 
     fillMode: Image.PreserveAspectFit 
    } 
} 

Wenn ich Sensoren in einem Column setzen, sie richtig angeordnet sind.

Die Umsetzung der abgeleiteten Typ - Pressure:

Item { 
    Sensor { 
     imageSource: "qrc:/images/pressure.png" 
     imageWidth: displayWidth * 0.4 
    } 
} 

Aber wenn ich Pressure Sensoren in einem oder Column setzen, alle Sensoren überlappen einander nur.

Column { 
     spacing: 10 
     Pressure {} 
     Pressure {} 
     Pressure {} 
} 

Pressures and Sensors comparison (image)

Könnten Sie bitte erklären, was mit ihm los?

Answer 1

Oh, es scheint, ich habe die Antwort alleine gefunden.

Items in abgeleiteten Klasse wie Pressure haben keine eigene Breite und Höhe. Wenn ich Item löschen, funktioniert es richtig:

Sensor { 
    imageSource: "qrc:/images/pressure.png" 
    imageWidth: displayWidth * 0.4 
}