QT quick2 qml 동적 변경 GridView 열

Question

GridView를 사용하여 ListModel을 표시했습니다. 3 열 그리드를 만들

cellWidth = grid.width/3

: 원래 난에 cellWidth을 설정합니다. 그때 나는 열이 2로 계산 변경하려면, 그래서에 cellWidth를 설정 한 다음의 GridView의 화면이 변경된 경우

cellWidth = grid.width/2 

. 그러나 컨테이너의 바탕 화면 창 크기를 조정하면 Gridview의 셀이 더 이상 크기를 변경하지 않습니다.

수정하려면 어떻게해야합니까? 내가있는 gridview의 onWidthChanged를 정의하여 문제를 해결 한

import QtQuick 2.1 
import QtQuick.Controls 1.0 
import QtQuick.Window 2.0 

ApplicationWindow { 
title: qsTr("Hello World") 
width: 640 
height: 480 

menuBar: MenuBar { 
    Menu { 
     title: qsTr("File") 
     MenuItem { 
      text: qsTr("2 columns") 
      onTriggered: grid.cellWidth = grid.width/2; 
     } 
     MenuItem { 
      text: qsTr("3 columns") 
      onTriggered: grid.cellWidth = grid.width/3; 
     } 
    } 
} 

GridView { 
    id: grid 
    anchors.fill: parent 
    cellWidth: width/3; 
    cellHeight: 300; 
    model: ListModel { 
     ListElement { 
      name: "Apple" 
      cost: 2.45 
     } 
     ListElement { 
      name: "Orange" 
      cost: 3.25 
     } 
     ListElement { 
      name: "Banana" 
      cost: 1.95 
     } 
    } 
    delegate : Rectangle { 
     //anchors.fill: parent 
     width: grid.cellWidth 
     height: grid.cellHeight 
     border.color: "green" 
     border.width: 2 
     color: "red" 
    } 
} 
} 

Answer 1

:

다음 코드에서 참조하시기 바랍니다.

import QtQuick 2.1 
import QtQuick.Controls 1.0 
import QtQuick.Window 2.0 

ApplicationWindow { 
    title: qsTr("Hello World") 
    width: 640 
    height: 480 
    id: appwnd 
    property int columns : 3; 

    menuBar: MenuBar { 
     Menu { 
      title: qsTr("File") 
      MenuItem { 
       text: qsTr("2 columns") 
       onTriggered: { 
        columns = 2; 
        grid.cellWidth = grid.width/columns; 
       } 
      } 
      MenuItem { 
       text: qsTr("3 columns") 
       onTriggered: { 
        columns = 3; 
        grid.cellWidth = grid.width/columns; 
       } 
      } 
     } 
    } 

    GridView { 
     id: grid 
     anchors.fill: parent 
     cellWidth: width/3; 
     cellHeight: 300; 
     model: ListModel { 
      ListElement { 
       name: "Apple" 
       cost: 2.45 
      } 
      ListElement { 
       name: "Orange" 
       cost: 3.25 
      } 
      ListElement { 
       name: "Banana" 
       cost: 1.95 
      } 
     } 
     delegate : Rectangle { 
      //anchors.fill: parent 
      width: grid.cellWidth 
      height: grid.cellHeight 
      border.color: "green" 
      border.width: 2 
      color: "red" 
     } 
     onWidthChanged: { 
      grid.cellWidth = grid.width/appwnd.columns; 
     } 
    } 
} 

Answer 2

당신이 가지고 있었던 문제는 바인딩이 자동으로 당신이 (당신이 당신의 onTriggered 시그널 핸들러에서하고있는) 자바 스크립트를 작성할 때 설정되지 않은 것입니다.

이 Qt.binding()를 사용하여 (바인딩 순수한 QML 속성에 반대) 자바 스크립트에서 바인딩을 할 수 있습니다 : 당신의 onWidthChanged 핸들러 솔루션은 작동하지만

이

onTriggered: { 
    columns = 2; 
    grid.cellWidth = Qt.binding(function() { return grid.width/columns; }); 
} 

, 이것은 청소기 솔루션입니다.

참조 : 작동 방식에 대한 자세한 내용은 http://doc.qt.io/qt-5/qtqml-syntax-propertybinding.html#creating-property-bindings-from-javascript을 참조하십시오.