QtQuick 레이아웃 여백

Question

QML 레이아웃 구성 요소에서 시작 및 끝 여백을 제거 할 수있는 방법이 있습니까?

다음은 몇 개의 하위가있는 ColumnLayout의 예입니다. 문제는 상위 및 하위 여백을 제거하고 상위 레이아웃의 전체 높이를 따라 모든 하위를 재배포하는 방법입니다.

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

레이아웃 위치 실험의 몇 후, 나는 해결책을 다음과 같이 왔어요.

제거하려는 여백에 레이아웃 어린이 사이의 간격의 절반이있는 것으로 가정하면 레이아웃 구성 요소의 시작과 끝 부분에 음수 여백을 설정하고 처음과 마지막 자식이 시작/끝에서 정렬 될 때까지 늘릴 수 있습니다. 형세. 나는 여백을 계산하는 데 사용

기능 :

root 레이아웃 구성 요소의 부모

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

, root.radius*2 레이아웃 자식 항목의 크기를 나타내며, 다른 자식 차원과 아이들이 계산을 위해 model.length 스탠드로 교체 할 수 있습니다.

그러면 레이아웃 구성 요소에 앵커를 설정하고 해당 여백을 설정할 수 있습니다.

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. 레이아웃 위/아래 앵커를 왼쪽/오른쪽으로 바꾸면 동일한 솔루션을 RowLayout에 적용 할 수 있습니다.

Answer 2

당신은 모두 상단과 하단에 레이아웃 내에서 항목을 정렬 할 수 없습니다. 아래 그림과 같이 당신은 컨테이너 내부 변수 y로 항목을 넣을 수 있습니다 해결 방법으로 :

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" 
       } 
      } 
     } 
    } 
}