ColumnLayout에서 위치를 변경하는 방법

Question

나는 QML의 초보자이며 "아코디언"항목을 만들었습니다. 나는 완전한 QML 프로젝트를 수정했다. 이를 위해 , 나는 PanelItems 사용 "드래그를 사용하는 동안 내가 성공 이제

, 나는 것이 가능 columnLayout도에서 두 개의 서로 다른 PanelItems 사이에 위치를 교환 할 수 있도록하고 싶었

Item { 
    default property var contentItem: null 
    property string title: "panel" 
    id: root 
    Layout.fillWidth: true 
    height: 30 
    Layout.fillHeight: current 
    property bool current: false 

    ColumnLayout { 

     anchors.fill: parent 
     spacing: 0 
     Rectangle { 
      Drag.active: dragArea.drag.active 
      id: bar 
      Layout.fillWidth: true 
      height: 30 
      color: root.current ? "#81BEF7" : "#CEECF5" 
      Text { 
       anchors.fill: parent 
       anchors.margins: 10 
       horizontalAlignment: Text.AlignLeft 
       verticalAlignment: Text.AlignVCenter 
       text: root.title 
      } 
      Text { 
       anchors{ 
        right: parent.right 
        top: parent.top 
        bottom: parent.bottom 
        margins: 10 
       } 
       horizontalAlignment: Text.AlignRight 
       verticalAlignment: Text.AlignVCenter 
       text: "^" 
       rotation: root.current ? "180" : 0 
      } 
      MouseArea { 
       id: dragArea 
       anchors.fill: parent 
       cursorShape: Qt.PointingHandCursor 
       drag.axis: Drag.YAxis 

       drag.target: root 

       onReleased: { 
        console.log("release !") 
        root.Drag.drop() 
       } 
       onClicked: { 
        if (root.parent.current !== root) { 
         console.log('test'); 
         // if((root.parent.currentItem !== null)) 
         // root.parent.currentItem.current = false; 
         root.current = !root.current; 

         root.parent.currentItem = root; 
        } 
       } 
      } 
     } 

     Rectangle { 
      id: container 
      Layout.fillWidth: true 
      anchors.top: bar.bottom 
      implicitHeight: root.height - bar.height 
      clip: true 
      Behavior on implicitHeight { 
       PropertyAnimation { duration: 100 } 
      } 
     } 
     Component.onCompleted: { 
      if(root.contentItem !== null) 
       root.contentItem.parent = container; 
     } 
    } 
} 

PanelItem.qml 및 드롭 "functionnalities.

지금은 항목을 드래그 앤 드롭 할 수 있지만 항목간에 위치를 바꾸는 방법을 모르겠습니다.

여기 내 주요입니다 :

ApplicationWindow { 
    visible: true 
    width: 400 
    height: 400 

    ColumnLayout { 
     anchors.fill: parent 
     spacing: 1 
     id: test 
     property var currentItem: null 
     PanelItem { 
      title: "Panel 1" 
      Rectangle { 
       color: "orange" 
       anchors.fill: parent 
      } 
     } 
     PanelItem { 
      title: "Panel 2" 
      Rectangle { 
       color: "lightgreen" 
       anchors.fill: parent 
      } 
     } 
     PanelItem { 
      title: "Panel 3" 
      Rectangle { 
       color: "lightblue" 
       anchors.fill: parent 
      } 
     } 
     PanelItem { 
      title: "Panel 4" 
      Rectangle { 
       color: "yellow" 
       anchors.fill: parent 
      } 
     } 
     Item { 
      Layout.fillWidth: true 
      Layout.fillHeight: true 
     } 
    } 
} 

main.qml

나는 어쩌면 ListView에 함께 할 것을 시도해야하지만 난 내 PanelItems와 함께 작동 할 수 없습니다 읽어 보시기 바랍니다.

의견이 있으십니까? 나는 QML, Views 등으로 조금 잃었다.

고마워!

Answer 1

ColumnLayout을 채우기 위해 Repeater 및 ObjectModel을 사용할 수 있습니다. ObejctModel의 move(from, to, amount)- 방법을 사용하여 개체의 순서를 재정렬 할 수 있습니다.

과 함께하려면 드래그 앤 드롭 약간의 작업이 필요합니다. 필요한 색인을 찾아야하며, 일부 애니메이션을 추가하여 부드럽게 보이게 만들 수 있습니다. DropArea.onDropped -handler의 drop.x, drop.y과 함께 열 레이아웃의 childAt(x,y)을 사용하여 대상 인덱스를 가져올 수 있습니다.

example1.qml는 : 그러나 ColumnLayout을 삭제하고 최적화 된 ListView로 이동하는 것이 더 쉬울 수 있습니다, 모든 것이 부드럽게 보이게하려면 ColumnLayout

ColumnLayout { 
    id: test 
    anchors.fill: parent 
    spacing: 1 
    property var currentItem: null 
    Repeater { 
     model: ObjectModel { 
      id: om 
      Button { 
       text: '1' 
       onClicked: om.move(ObjectModel.index, 0, 1) 
       width: test.width 
       height: 50 
      } 
      Button { 
       text: '2' 
       onClicked: om.move(ObjectModel.index, 0, 1) 
       width: test.width 
       height: 50 
      } 
      Button { 
       text: '3' 
       onClicked: om.move(ObjectModel.index, 0, 1) 
       width: test.width 
       height: 50 
      } 
      Button { 
       text: '4' 
       onClicked: om.move(ObjectModel.index, 0, 1) 
       width: test.width 
       height: 50 
      } 
      Button { 
       text: '5' 
       onClicked: om.move(ObjectModel.index, 0, 1) 
       width: test.width 
       height: 50 
      } 
      Button { 
       text: '6' 
       onClicked: om.move(ObjectModel.index, 0, 1) 
       width: test.width 
       height: 50 
      } 
     } 
    } 
} 

내부 Repeater 및 ObjectModel를 사용하여 모델의 사용을 위해, 그리고 객체를 추가, 이동 및 대체하기위한 전환이 있습니다.

example2.qml : ListView

ListView { 
    id: test 
    anchors.fill: parent 
    spacing: 1 
    model: ObjectModel { 
     id: om 
     Button { 
      text: '1' 
      onClicked: om.move(ObjectModel.index, 0, 1) 
      width: test.width 
      height: 50 
     } 
     Button { 
      text: '2' 
      onClicked: om.move(ObjectModel.index, 0, 1) 
      width: test.width 
      height: 50 
     } 
     Button { 
      text: '3' 
      onClicked: om.move(ObjectModel.index, 0, 1) 
      width: test.width 
      height: 50 
     } 
     Button { 
      text: '4' 
      onClicked: om.move(ObjectModel.index, 0, 1) 
      width: test.width 
      height: 50 
     } 
     Button { 
      text: '5' 
      onClicked: om.move(ObjectModel.index, 0, 1) 
      width: test.width 
      height: 50 
     } 
     Button { 
      text: '6' 
      onClicked: om.move(ObjectModel.index, 0, 1) 
      width: test.width 
      height: 50 
     } 
    } 
}