如何在ColumnLayout中更改位置

Question

我是QML的新手，我製作了「手風琴」項目。我修改了一個不完整的QML項目。 對於這一點，我用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

現在我成功了，我想讓它能夠在ColumnLayout兩個不同PanelItems之間互換位置，同時使用「拖放放下「功能。

在這個時候，我可以拖放我的物品，但我不知道如何交換我的物品之間的位置。

這裏是我的主：

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

您可以使用Repeater和ObjectModel填寫您的ColumnLayout。 在那裏您可以使用ObejctModel的move(from, to, amount) - 方法重新排列對象的順序。

要做到這一點拖n滴需要一點工作。您需要了解哪些索引是必需的，並且可能會添加一些動畫以使其看起來平滑。您可以嘗試使用列布局的childAt(x,y)以及DropArea.onDropped-處理程序中的drop.x, drop.y來獲取目標索引。

example1.qml：使用Repeater和ObjectModel內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 
      } 
     } 
    } 
} 

使一切看起來光滑，可能更容易掉落ColumnLayout但是並移動到其優化的ListView用於模型，並且具有添加，移動和替換物體的轉換。

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