QtQuick Layout Ränder

Question

Gibt es eine Möglichkeit, Anfangs- und Endränder in QML Layout-Komponenten zu entfernen?

Hier ist ein Beispiel für ColumnLayout mit ein paar Kindern. Die Frage ist, wie diese oberen und unteren Ränder entfernt und alle untergeordneten Elemente auf der gesamten Höhe des übergeordneten Layouts verteilt werden.

ColumnLayout { 
    id: dotColumn 
    anchors.horizontalCenter: bg.horizontalCenter 
    height: root.height 
    Repeater { 
     id: repeater 
     model: root.model 

     Item { 
      id: activeDot_container 

      property int radius: 15 
      width: radius * 2 
      height: radius * 2 

      Rectangle { 
       anchors.centerIn: parent 
       radius: parent.radius 

       width: radius * 2 
       height: radius * 2 

       color: Palette.colors['deepPurple']['500'] 
      } 
     } 
    } 
} 

Answer 1

Nach ein paar Versuchen mit Layout Positionierung Ich habe mit folgenden Lösung gekommen.

Angenommen, die Ränder, die ich eliminieren möchte, haben die Hälfte des Abstandes zwischen den Layout-Kindern, können wir negative Ränder auf den Anfang und das Ende der Layout-Komponente setzen, bis die ersten und letzten Kinder am Anfang/Ende der Linie ausgerichtet sind Layout.

Funktion habe ich Margen zu berechnen:

function getMargin() { 
    var height = root.height; 
    var spacing = (height - root.radius * 2 * model.length)/model.length; 
    return spacing/2; 
} 

Wo root ein Elternteil von Layout-Komponente stellt root.radius*2 Größe Layout Kind Element und kann mit einem anderen Kind Dimension und model.length steht für Kinder zählen ersetzt werden.

Dann können wir einfach Anker für Layout-Komponente setzen und entsprechende Ränder einstellen.

ColumnLayout { 
    anchors.top: root.top 
    anchors.bottom: root.bottom 
    anchors.topMargin: -1 * getMargin() 
    anchors.bottomMargin: -1 * getMargin() 
    Repeater { 
     model: root.model 
     Item { 
      property int radius: root.radius 
      width: radius * 2 
      height: radius * 2 
      /* more code */ 
     } 
    } 
} 

P.S. Dieselbe Lösung kann auf RowLayout angewendet werden, indem die oberen/unteren Anker des Layouts durch Links/Rechts ersetzt werden.

Answer 2

Sie können nicht Punkt im Inneren Layout-align sowohl nach oben und nach unten. Als Abhilfe können Sie Artikel mit variabler y Innenbehältern wie unten gezeigt setzen können:

Window { 
    visible: true 
    visibility: Window.Maximized 

    ColumnLayout { 
     anchors.horizontalCenter: parent.horizontalCenter 
     height: parent.height 
     spacing:1 
     Repeater { 
      id: repeater 
      model: 10 
      Rectangle { 
       color: "green" 
       property int radius: 15 
       width: radius 
       Layout.fillHeight: true 
       Rectangle { 
        anchors.horizontalCenter: parent.horizontalCenter 
        y: index * (parent.height - height)/(repeater.count - 1) 
        radius: parent.radius 
        width: radius * 2 
        height: radius * 2 
        color: "blue" 
       } 
      } 
     } 
    } 
}