레이아웃 방법 창 너비를 조정할 때 창의 내용?

Question

내가 격자을 반으로 줄이면 4X4 (4 행 4 열)를 보여주고 있다고 가정 해 봅시다. 레이아웃은 2X8이어야합니다. 나는 구글에서 검색하고, 신이 어떤 아이디어를 가지고 있는지를 동적으로 바꿔 JavaScript로 호출 할 수는 있지만, 크기 이후에는 윈도우 크기를 얻을 수 없다.

import QtQuick 2.2 

    Grid{ 
     id:root 
     property int rootWidth:400//Created type to change using javascript 
     property int rootHeight:400//Created type to change using javascript 
     width:rootWidth 
     height:rootHeight 

     property int myRows: 4//Initially 4X4 
     property int myColumns: 4 
     rows: myRows 
     columns: myColumns 
     onWidthChanged:{ widthChange()}//Executed javascript, when width changes. 
     Repeater{ 
      model:16 
      //Fixed Rectangle. 
      Rectangle{radius:36;width:100;height:100;color:"blue"} 

     } 
     function widthChange(){ 
      //It seems, this condition failes, How to get the width of the 
      //window, after resizing the window? 
      if(root.width > 200 & root.width <400) 
      { 
      //When width is less than 400 and greater than 200, set Grid as 2X4. 
      root.myColumns = 2; 
      root.myRows = 8; 
      root.rootWidth=200; 
       root.rootHeight= 800; 
      } 
     } 
    } 

은 무엇을 달성하려고하고, 나는 장치 폭에 따라 스크롤 막대 그리드 콘텐츠 (사각형 고정)/또는 맞게해야합니다. 누구나 최소한의 도움을 줄 수 있습니까?이 문제를 해결할 수 있습니까?, 이것을 달성하기위한 대안을 알고 계시다면 감사하겠습니다.

Answer 1

질문에 따르면 나는 또한 ScrollBar이 필요하다고 가정 했으므로 ScrollView을 추가했습니다. 우리가 후자를 제거하더라도, 일반적인 접근법은 여전히 ​​적용됩니다.

키포인트는 필요한/사용 가능한 행과 열의 수를 동적으로 다시 계산합니다. 그런 다음 QML 바인딩을 활용하고 표현식을 rows 및 columns 속성에 직접 설정하여 크기가 변경 될 때 그에 따라 값이 변경되도록 할 수 있습니다. 결과 코드는 아래 예제에서 1) 및 2)으로 강조 표시됩니다.

import QtQuick 2.2 
import QtQuick.Controls 1.2 
import QtQuick.Window 2.2 

Window{ 
    id: root 
    width: 300 
    height: 300 
    visible: true 

    ScrollView { 
     id: scroller 
     width: parent.width 
     height: parent.height 
     Grid{ 
      // 1) calculate enough columns to fill the width 
      columns: Math.floor(scroller.width/100) 
      // 2) calculate required rows to contain all the elements 
      rows: Math.ceil(model.count/columns) 

      Repeater{ 
       id: model 
       model:16 
       Rectangle{radius:36;width:100;height:100;color:"blue"} 
      } 
     } 
    } 
}