ListView가 예상대로 레이아웃에 배치되지 않았습니다.

Question

RowLayout에 RowLayout이 있습니다. RowLayout은 예상대로 배치됩니다. 창 크기를 조정하는 경우에도 마찬가지입니다. 창문 전체 columnLayout도보다 작은 경우에도

을 (두 번째 이미지 참조) 그러나 나는 (수평) ListView에 의해 RowLayout를 교체하면 내가 기대하는 것처럼,이 ListView에이 위치하지 않습니다.

을 그리고 창은 파란색 사각형 '작은에'얻는 경우에 첫 번째 예는 달리 ListView에 '로 이동':이가 RowLayout와 예처럼 동작하지만 ListView에 더 높은 위치 기대 :

어떻게 ListView를 가진 첫 번째 예제의 동작을 달성 할 수 있습니까?

소스

import QtQuick 2.0 
import QtQuick.Layouts 1.1 

Rectangle { 
    width: 360 
    height: 360 

    ColumnLayout { 
     anchors.fill: parent 
     anchors.margins: 20 

     Item { 
      Layout.fillHeight: true 
     } 
/* 
     ListView { 
      Layout.fillHeight: true 
      Layout.fillWidth: true 
      orientation: ListView.Horizontal 
      spacing: 5 
      model: 3 
      delegate: Rectangle { 
       width: 50 
       height: 50 
       color: "red" 
      } 
     } 
*/ 

     RowLayout { 
      Layout.fillHeight: true 
      Layout.fillWidth: true 

      Rectangle { 
       width: 50 
       height: 50 
       color: "red" 
      } 

      Rectangle { 
       width: 50 
       height: 50 
       color: "red" 
      } 

      Rectangle { 
       width: 50 
       height: 50 
       color: "red" 
      } 
     } 

     Item { 
      Layout.fillHeight: true 
     } 

     Rectangle { 
      width: 50 
      height: 50 
      color: "blue" 
     } 
    } 
} 

Answer 1

당신은 당신의 ListView에 대한 너비와 높이를 정의 할 필요가있다. 그런 식으로 열 레이아웃은 크기를 고려하여 고정 된 크기로 유지합니다.

여기에 코드가 업데이트 :

import QtQuick 2.0 
import QtQuick.Layouts 1.1 

Rectangle { 
    width: 360 
    height: 360 

    ColumnLayout { 
     anchors.fill: parent 
     anchors.margins: 20 

     Item { 
      Layout.fillHeight: true 
     } 

     ListView { 
      //take as much width as possible with a binding 
      width: parent.width 
      //keep enought height to display each delegate instance 
      height: 50 
      orientation: ListView.Horizontal 
      spacing: 5 
      model: 3 
      delegate: Rectangle { 
       width: 50 
       height: 50 
       color: "red" 
      } 
     } 

     Item { 
      Layout.fillHeight: true 
     } 

     Rectangle { 
      width: 50 
      height: 50 
      color: "blue" 
     } 
    } 
}