Dynamicview example: Update by coding conventions from official doc
- Fix qmllint warning.
- Fix runtime warning.
- string are translated.
- JS statements no longer end with semi-colon.
Change-Id: I33958c414537aff32814f4ef2f04c73a03dc5295
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
(cherry picked from commit b1115d957f)
Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>
This commit is contained in:
Bumjoon Park
Qt Cherry-pick Bot
parent
361e34d3e1
commit
1aaafed88f
|
|
@ -6,59 +6,59 @@ import QtQuick
|
||||||
|
|
||||||
ListModel {
|
ListModel {
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Polly"
|
name: qsTr("Polly")
|
||||||
type: "Parrot"
|
type: qsTr("Parrot")
|
||||||
age: 12
|
age: 12
|
||||||
size: "Small"
|
size: qsTr("Small")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Penny"
|
name: qsTr("Penny")
|
||||||
type: "Turtle"
|
type: qsTr("Turtle")
|
||||||
age: 4
|
age: 4
|
||||||
size: "Small"
|
size: qsTr("Small")
|
||||||
}
|
}
|
||||||
//![0]
|
//![0]
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Warren"
|
name: qsTr("Warren")
|
||||||
type: "Rabbit"
|
type: qsTr("Rabbit")
|
||||||
age: 2
|
age: 2
|
||||||
size: "Small"
|
size: qsTr("Small")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Spot"
|
name: qsTr("Spot")
|
||||||
type: "Dog"
|
type: qsTr("Dog")
|
||||||
age: 9
|
age: 9
|
||||||
size: "Medium"
|
size: qsTr("Medium")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Schrödinger"
|
name: qsTr("Schrödinger")
|
||||||
type: "Cat"
|
type: qsTr("Cat")
|
||||||
age: 2
|
age: 2
|
||||||
size: "Medium"
|
size: qsTr("Medium")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Joey"
|
name: qsTr("Joey")
|
||||||
type: "Kangaroo"
|
type: qsTr("Kangaroo")
|
||||||
age: 1
|
age: 1
|
||||||
size: "Medium"
|
size: qsTr("Medium")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Kimba"
|
name: qsTr("Kimba")
|
||||||
type: "Bunny"
|
type: qsTr("Bunny")
|
||||||
age: 65
|
age: 65
|
||||||
size: "Large"
|
size: qsTr("Large")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Rover"
|
name: qsTr("Rover")
|
||||||
type: "Dog"
|
type: qsTr("Dog")
|
||||||
age: 5
|
age: 5
|
||||||
size: "Large"
|
size: qsTr("Large")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Tiny"
|
name: qsTr("Tiny")
|
||||||
type: "Elephant"
|
type: qsTr("Elephant")
|
||||||
age: 15
|
age: 15
|
||||||
size: "Large"
|
size: qsTr("Large")
|
||||||
}
|
}
|
||||||
//![1]
|
//![1]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,8 @@ import QtQuick
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: root
|
id: root
|
||||||
|
|
||||||
width: 300; height: 400
|
width: 300
|
||||||
|
height: 400
|
||||||
|
|
||||||
//![1]
|
//![1]
|
||||||
Component {
|
Component {
|
||||||
|
|
@ -32,12 +33,15 @@ Rectangle {
|
||||||
|
|
||||||
Column {
|
Column {
|
||||||
id: column
|
id: column
|
||||||
anchors { fill: parent; margins: 2 }
|
anchors {
|
||||||
|
fill: parent
|
||||||
|
margins: 2
|
||||||
|
}
|
||||||
|
|
||||||
Text { text: 'Name: ' + name }
|
Text { text: qsTr('Name: ') + content.name }
|
||||||
Text { text: 'Type: ' + type }
|
Text { text: qsTr('Type: ') + content.type }
|
||||||
Text { text: 'Age: ' + age }
|
Text { text: qsTr('Age: ') + content.age }
|
||||||
Text { text: 'Size: ' + size }
|
Text { text: qsTr('Size: ') + content.size }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -46,7 +50,10 @@ Rectangle {
|
||||||
ListView {
|
ListView {
|
||||||
id: view
|
id: view
|
||||||
|
|
||||||
anchors { fill: parent; margins: 2 }
|
anchors {
|
||||||
|
fill: parent
|
||||||
|
margins: 2
|
||||||
|
}
|
||||||
|
|
||||||
model: PetsModel {}
|
model: PetsModel {}
|
||||||
delegate: dragDelegate
|
delegate: dragDelegate
|
||||||
|
|
|
||||||
|
|
@ -5,57 +5,57 @@ import QtQuick
|
||||||
|
|
||||||
ListModel {
|
ListModel {
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Polly"
|
name: qsTr("Polly")
|
||||||
type: "Parrot"
|
type: qsTr("Parrot")
|
||||||
age: 12
|
age: 12
|
||||||
size: "Small"
|
size: qsTr("Small")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Penny"
|
name: qsTr("Penny")
|
||||||
type: "Turtle"
|
type: qsTr("Turtle")
|
||||||
age: 4
|
age: 4
|
||||||
size: "Small"
|
size: qsTr("Small")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Warren"
|
name: qsTr("Warren")
|
||||||
type: "Rabbit"
|
type: qsTr("Rabbit")
|
||||||
age: 2
|
age: 2
|
||||||
size: "Small"
|
size: qsTr("Small")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Spot"
|
name: qsTr("Spot")
|
||||||
type: "Dog"
|
type: qsTr("Dog")
|
||||||
age: 9
|
age: 9
|
||||||
size: "Medium"
|
size: qsTr("Medium")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Schrödinger"
|
name: qsTr("Schrödinger")
|
||||||
type: "Cat"
|
type: qsTr("Cat")
|
||||||
age: 2
|
age: 2
|
||||||
size: "Medium"
|
size: qsTr("Medium")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Joey"
|
name: qsTr("Joey")
|
||||||
type: "Kangaroo"
|
type: qsTr("Kangaroo")
|
||||||
age: 1
|
age: 1
|
||||||
size: "Medium"
|
size: qsTr("Medium")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Kimba"
|
name: qsTr("Kimba")
|
||||||
type: "Bunny"
|
type: qsTr("Bunny")
|
||||||
age: 65
|
age: 65
|
||||||
size: "Large"
|
size: qsTr("Large")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Rover"
|
name: qsTr("Rover")
|
||||||
type: "Dog"
|
type: qsTr("Dog")
|
||||||
age: 5
|
age: 5
|
||||||
size: "Large"
|
size: qsTr("Large")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Tiny"
|
name: qsTr("Tiny")
|
||||||
type: "Elephant"
|
type: qsTr("Elephant")
|
||||||
age: 15
|
age: 15
|
||||||
size: "Large"
|
size: qsTr("Large")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,14 @@
|
||||||
// Copyright (C) 2017 The Qt Company Ltd.
|
// Copyright (C) 2017 The Qt Company Ltd.
|
||||||
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
|
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
|
||||||
|
|
||||||
|
pragma ComponentBehavior: Bound
|
||||||
import QtQuick
|
import QtQuick
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: root
|
id: root
|
||||||
|
|
||||||
width: 300; height: 400
|
width: 300
|
||||||
|
height: 400
|
||||||
|
|
||||||
//![0]
|
//![0]
|
||||||
Component {
|
Component {
|
||||||
|
|
@ -17,8 +19,15 @@ Rectangle {
|
||||||
id: dragArea
|
id: dragArea
|
||||||
|
|
||||||
property bool held: false
|
property bool held: false
|
||||||
|
required property string name
|
||||||
|
required property string type
|
||||||
|
required property string size
|
||||||
|
required property int age
|
||||||
|
|
||||||
anchors { left: parent.left; right: parent.right }
|
anchors {
|
||||||
|
left: parent?.left
|
||||||
|
right: parent?.right
|
||||||
|
}
|
||||||
height: content.height
|
height: content.height
|
||||||
|
|
||||||
drag.target: held ? content : undefined
|
drag.target: held ? content : undefined
|
||||||
|
|
@ -34,7 +43,8 @@ Rectangle {
|
||||||
horizontalCenter: parent.horizontalCenter
|
horizontalCenter: parent.horizontalCenter
|
||||||
verticalCenter: parent.verticalCenter
|
verticalCenter: parent.verticalCenter
|
||||||
}
|
}
|
||||||
width: dragArea.width; height: column.implicitHeight + 4
|
width: dragArea.width
|
||||||
|
height: column.implicitHeight + 4
|
||||||
|
|
||||||
border.width: 1
|
border.width: 1
|
||||||
border.color: "lightsteelblue"
|
border.color: "lightsteelblue"
|
||||||
|
|
@ -47,21 +57,30 @@ Rectangle {
|
||||||
states: State {
|
states: State {
|
||||||
when: dragArea.held
|
when: dragArea.held
|
||||||
|
|
||||||
ParentChange { target: content; parent: root }
|
ParentChange {
|
||||||
|
target: content
|
||||||
|
parent: root
|
||||||
|
}
|
||||||
AnchorChanges {
|
AnchorChanges {
|
||||||
target: content
|
target: content
|
||||||
anchors { horizontalCenter: undefined; verticalCenter: undefined }
|
anchors {
|
||||||
|
horizontalCenter: undefined
|
||||||
|
verticalCenter: undefined
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//![4]
|
//![4]
|
||||||
Column {
|
Column {
|
||||||
id: column
|
id: column
|
||||||
anchors { fill: parent; margins: 2 }
|
anchors {
|
||||||
|
fill: parent
|
||||||
|
margins: 2
|
||||||
|
}
|
||||||
|
|
||||||
Text { text: 'Name: ' + name }
|
Text { text: qsTr('Name: ') + dragArea.name }
|
||||||
Text { text: 'Type: ' + type }
|
Text { text: qsTr('Type: ') + dragArea.type }
|
||||||
Text { text: 'Age: ' + age }
|
Text { text: qsTr('Age: ') + dragArea.age }
|
||||||
Text { text: 'Size: ' + size }
|
Text { text: qsTr('Size: ') + dragArea.size }
|
||||||
}
|
}
|
||||||
//![2]
|
//![2]
|
||||||
}
|
}
|
||||||
|
|
@ -73,7 +92,10 @@ Rectangle {
|
||||||
ListView {
|
ListView {
|
||||||
id: view
|
id: view
|
||||||
|
|
||||||
anchors { fill: parent; margins: 2 }
|
anchors {
|
||||||
|
fill: parent
|
||||||
|
margins: 2
|
||||||
|
}
|
||||||
|
|
||||||
model: PetsModel {}
|
model: PetsModel {}
|
||||||
delegate: dragDelegate
|
delegate: dragDelegate
|
||||||
|
|
|
||||||
|
|
@ -5,57 +5,57 @@ import QtQuick
|
||||||
|
|
||||||
ListModel {
|
ListModel {
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Polly"
|
name: qsTr("Polly")
|
||||||
type: "Parrot"
|
type: qsTr("Parrot")
|
||||||
age: 12
|
age: 12
|
||||||
size: "Small"
|
size: qsTr("Small")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Penny"
|
name: qsTr("Penny")
|
||||||
type: "Turtle"
|
type: qsTr("Turtle")
|
||||||
age: 4
|
age: 4
|
||||||
size: "Small"
|
size: qsTr("Small")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Warren"
|
name: qsTr("Warren")
|
||||||
type: "Rabbit"
|
type: qsTr("Rabbit")
|
||||||
age: 2
|
age: 2
|
||||||
size: "Small"
|
size: qsTr("Small")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Spot"
|
name: qsTr("Spot")
|
||||||
type: "Dog"
|
type: qsTr("Dog")
|
||||||
age: 9
|
age: 9
|
||||||
size: "Medium"
|
size: qsTr("Medium")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Schrödinger"
|
name: qsTr("Schrödinger")
|
||||||
type: "Cat"
|
type: qsTr("Cat")
|
||||||
age: 2
|
age: 2
|
||||||
size: "Medium"
|
size: qsTr("Medium")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Joey"
|
name: qsTr("Joey")
|
||||||
type: "Kangaroo"
|
type: qsTr("Kangaroo")
|
||||||
age: 1
|
age: 1
|
||||||
size: "Medium"
|
size: qsTr("Medium")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Kimba"
|
name: qsTr("Kimba")
|
||||||
type: "Bunny"
|
type: qsTr("Bunny")
|
||||||
age: 65
|
age: 65
|
||||||
size: "Large"
|
size: qsTr("Large")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Rover"
|
name: qsTr("Rover")
|
||||||
type: "Dog"
|
type: qsTr("Dog")
|
||||||
age: 5
|
age: 5
|
||||||
size: "Large"
|
size: qsTr("Large")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Tiny"
|
name: qsTr("Tiny")
|
||||||
type: "Elephant"
|
type: qsTr("Elephant")
|
||||||
age: 15
|
age: 15
|
||||||
size: "Large"
|
size: qsTr("Large")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,15 @@
|
||||||
// Copyright (C) 2017 The Qt Company Ltd.
|
// Copyright (C) 2017 The Qt Company Ltd.
|
||||||
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
|
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
|
||||||
|
|
||||||
|
pragma ComponentBehavior: Bound
|
||||||
import QtQuick
|
import QtQuick
|
||||||
import QtQml.Models
|
import QtQml.Models
|
||||||
//![0]
|
//![0]
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: root
|
id: root
|
||||||
|
|
||||||
width: 300; height: 400
|
width: 300
|
||||||
|
height: 400
|
||||||
|
|
||||||
Component {
|
Component {
|
||||||
id: dragDelegate
|
id: dragDelegate
|
||||||
|
|
@ -16,8 +18,15 @@ Rectangle {
|
||||||
id: dragArea
|
id: dragArea
|
||||||
|
|
||||||
property bool held: false
|
property bool held: false
|
||||||
|
required property string name
|
||||||
|
required property string type
|
||||||
|
required property string size
|
||||||
|
required property int age
|
||||||
|
|
||||||
anchors { left: parent.left; right: parent.right }
|
anchors {
|
||||||
|
left: parent?.left
|
||||||
|
right: parent?.right
|
||||||
|
}
|
||||||
height: content.height
|
height: content.height
|
||||||
|
|
||||||
drag.target: held ? content : undefined
|
drag.target: held ? content : undefined
|
||||||
|
|
@ -33,7 +42,8 @@ Rectangle {
|
||||||
horizontalCenter: parent.horizontalCenter
|
horizontalCenter: parent.horizontalCenter
|
||||||
verticalCenter: parent.verticalCenter
|
verticalCenter: parent.verticalCenter
|
||||||
}
|
}
|
||||||
width: dragArea.width; height: column.implicitHeight + 4
|
width: dragArea.width
|
||||||
|
height: column.implicitHeight + 4
|
||||||
|
|
||||||
border.width: 1
|
border.width: 1
|
||||||
border.color: "lightsteelblue"
|
border.color: "lightsteelblue"
|
||||||
|
|
@ -51,29 +61,41 @@ Rectangle {
|
||||||
states: State {
|
states: State {
|
||||||
when: dragArea.held
|
when: dragArea.held
|
||||||
|
|
||||||
ParentChange { target: content; parent: root }
|
ParentChange {
|
||||||
|
target: content
|
||||||
|
parent: root
|
||||||
|
}
|
||||||
AnchorChanges {
|
AnchorChanges {
|
||||||
target: content
|
target: content
|
||||||
anchors { horizontalCenter: undefined; verticalCenter: undefined }
|
anchors {
|
||||||
|
horizontalCenter: undefined
|
||||||
|
verticalCenter: undefined
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Column {
|
Column {
|
||||||
id: column
|
id: column
|
||||||
anchors { fill: parent; margins: 2 }
|
anchors {
|
||||||
|
fill: parent
|
||||||
|
margins: 2
|
||||||
|
}
|
||||||
|
|
||||||
Text { text: 'Name: ' + name }
|
Text { text: qsTr('Name: ') + dragArea.name }
|
||||||
Text { text: 'Type: ' + type }
|
Text { text: qsTr('Type: ') + dragArea.type }
|
||||||
Text { text: 'Age: ' + age }
|
Text { text: qsTr('Age: ') + dragArea.age }
|
||||||
Text { text: 'Size: ' + size }
|
Text { text: qsTr('Size: ') + dragArea.size }
|
||||||
}
|
}
|
||||||
//![2]
|
//![2]
|
||||||
}
|
}
|
||||||
//![3]
|
//![3]
|
||||||
DropArea {
|
DropArea {
|
||||||
anchors { fill: parent; margins: 10 }
|
anchors {
|
||||||
|
fill: parent
|
||||||
|
margins: 10
|
||||||
|
}
|
||||||
|
|
||||||
onEntered: (drag)=> {
|
onEntered: (drag) => {
|
||||||
visualModel.items.move(
|
visualModel.items.move(
|
||||||
drag.source.DelegateModel.itemsIndex,
|
drag.source.DelegateModel.itemsIndex,
|
||||||
dragArea.DelegateModel.itemsIndex)
|
dragArea.DelegateModel.itemsIndex)
|
||||||
|
|
@ -94,7 +116,10 @@ Rectangle {
|
||||||
ListView {
|
ListView {
|
||||||
id: view
|
id: view
|
||||||
|
|
||||||
anchors { fill: parent; margins: 2 }
|
anchors {
|
||||||
|
fill: parent
|
||||||
|
margins: 2
|
||||||
|
}
|
||||||
|
|
||||||
model: visualModel
|
model: visualModel
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
// Copyright (C) 2017 The Qt Company Ltd.
|
// Copyright (C) 2017 The Qt Company Ltd.
|
||||||
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
|
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
|
||||||
|
|
||||||
|
pragma ComponentBehavior: Bound
|
||||||
import QtQuick
|
import QtQuick
|
||||||
|
|
||||||
Item {
|
Item {
|
||||||
|
|
@ -11,12 +12,17 @@ Item {
|
||||||
property alias label: labelText.text
|
property alias label: labelText.text
|
||||||
property bool expanded
|
property bool expanded
|
||||||
|
|
||||||
width: 100; height: labelText.implicitHeight + 26
|
width: 100
|
||||||
|
height: labelText.implicitHeight + 26
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
anchors { left: parent.left; right: parent.right; bottom: parent.bottom; }
|
anchors {
|
||||||
|
left: parent.left
|
||||||
|
right: parent.right
|
||||||
|
bottom: parent.bottom
|
||||||
|
}
|
||||||
|
|
||||||
height: labelText.implicitHeight + 4 + (expanded ? 20 * view.count : 20)
|
height: labelText.implicitHeight + 4 + (selector.expanded ? 20 * view.count : 20)
|
||||||
Behavior on height { NumberAnimation { duration: 300 } }
|
Behavior on height { NumberAnimation { duration: 300 } }
|
||||||
|
|
||||||
radius: 2
|
radius: 2
|
||||||
|
|
@ -31,13 +37,20 @@ Item {
|
||||||
|
|
||||||
Text {
|
Text {
|
||||||
id: labelText
|
id: labelText
|
||||||
anchors { left: parent.left; top: parent.top; margins: 2 }
|
|
||||||
|
anchors {
|
||||||
|
left: parent.left
|
||||||
|
top: parent.top
|
||||||
|
margins: 2
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
anchors {
|
anchors {
|
||||||
left: parent.left; top: labelText.bottom;
|
left: parent.left
|
||||||
right: parent.right; bottom: parent.bottom;
|
top: labelText.bottom
|
||||||
|
right: parent.right
|
||||||
|
bottom: parent.bottom
|
||||||
margins: 2
|
margins: 2
|
||||||
leftMargin: 10
|
leftMargin: 10
|
||||||
}
|
}
|
||||||
|
|
@ -53,7 +66,13 @@ Item {
|
||||||
clip: true
|
clip: true
|
||||||
|
|
||||||
delegate: Text {
|
delegate: Text {
|
||||||
anchors { left: parent.left; right: parent.right }
|
required property int index
|
||||||
|
required property string modelData
|
||||||
|
|
||||||
|
anchors {
|
||||||
|
left: parent.left
|
||||||
|
right: parent.right
|
||||||
|
}
|
||||||
height: 20
|
height: 20
|
||||||
|
|
||||||
verticalAlignment: Text.AlignVCenter
|
verticalAlignment: Text.AlignVCenter
|
||||||
|
|
@ -64,13 +83,16 @@ Item {
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
|
|
||||||
onClicked: {
|
onClicked: {
|
||||||
view.currentIndex = index
|
parent.ListView.view.currentIndex = parent.index
|
||||||
selector.expanded = !selector.expanded
|
selector.expanded = !selector.expanded
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
highlight: Rectangle {
|
highlight: Rectangle {
|
||||||
anchors { left: parent.left; right: parent.right }
|
anchors {
|
||||||
|
left: parent.left
|
||||||
|
right: parent.right
|
||||||
|
}
|
||||||
height: 20
|
height: 20
|
||||||
radius: 2
|
radius: 2
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,57 +5,57 @@ import QtQuick
|
||||||
|
|
||||||
ListModel {
|
ListModel {
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Polly"
|
name: qsTr("Polly")
|
||||||
type: "Parrot"
|
type: qsTr("Parrot")
|
||||||
age: 12
|
age: 12
|
||||||
size: "Small"
|
size: qsTr("Small")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Penny"
|
name: qsTr("Penny")
|
||||||
type: "Turtle"
|
type: qsTr("Turtle")
|
||||||
age: 4
|
age: 4
|
||||||
size: "Small"
|
size: qsTr("Small")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Warren"
|
name: qsTr("Warren")
|
||||||
type: "Rabbit"
|
type: qsTr("Rabbit")
|
||||||
age: 2
|
age: 2
|
||||||
size: "Small"
|
size: qsTr("Small")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Spot"
|
name: qsTr("Spot")
|
||||||
type: "Dog"
|
type: qsTr("Dog")
|
||||||
age: 9
|
age: 9
|
||||||
size: "Medium"
|
size: qsTr("Medium")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Schrödinger"
|
name: qsTr("Schrödinger")
|
||||||
type: "Cat"
|
type: qsTr("Cat")
|
||||||
age: 2
|
age: 2
|
||||||
size: "Medium"
|
size: qsTr("Medium")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Joey"
|
name: qsTr("Joey")
|
||||||
type: "Kangaroo"
|
type: qsTr("Kangaroo")
|
||||||
age: 1
|
age: 1
|
||||||
size: "Medium"
|
size: qsTr("Medium")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Kimba"
|
name: qsTr("Kimba")
|
||||||
type: "Bunny"
|
type: qsTr("Bunny")
|
||||||
age: 65
|
age: 65
|
||||||
size: "Large"
|
size: qsTr("Large")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Rover"
|
name: qsTr("Rover")
|
||||||
type: "Dog"
|
type: qsTr("Dog")
|
||||||
age: 5
|
age: 5
|
||||||
size: "Large"
|
size: qsTr("Large")
|
||||||
}
|
}
|
||||||
ListElement {
|
ListElement {
|
||||||
name: "Tiny"
|
name: qsTr("Tiny")
|
||||||
type: "Elephant"
|
type: qsTr("Elephant")
|
||||||
age: 15
|
age: 15
|
||||||
size: "Large"
|
size: qsTr("Large")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,15 @@
|
||||||
// Copyright (C) 2017 The Qt Company Ltd.
|
// Copyright (C) 2017 The Qt Company Ltd.
|
||||||
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
|
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
|
||||||
|
|
||||||
|
pragma ComponentBehavior: Bound
|
||||||
import QtQuick
|
import QtQuick
|
||||||
import QtQml.Models
|
import QtQml.Models
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: root
|
id: root
|
||||||
|
|
||||||
width: 300; height: 400
|
width: 300
|
||||||
|
height: 400
|
||||||
|
|
||||||
Component {
|
Component {
|
||||||
id: dragDelegate
|
id: dragDelegate
|
||||||
|
|
@ -16,8 +18,15 @@ Rectangle {
|
||||||
id: dragArea
|
id: dragArea
|
||||||
|
|
||||||
property bool held: false
|
property bool held: false
|
||||||
|
required property string name
|
||||||
|
required property string type
|
||||||
|
required property string size
|
||||||
|
required property int age
|
||||||
|
|
||||||
anchors { left: parent.left; right: parent.right }
|
anchors {
|
||||||
|
left: parent?.left
|
||||||
|
right: parent?.right
|
||||||
|
}
|
||||||
height: content.height
|
height: content.height
|
||||||
|
|
||||||
enabled: visualModel.sortOrder == visualModel.lessThan.length
|
enabled: visualModel.sortOrder == visualModel.lessThan.length
|
||||||
|
|
@ -35,7 +44,8 @@ Rectangle {
|
||||||
horizontalCenter: parent.horizontalCenter
|
horizontalCenter: parent.horizontalCenter
|
||||||
verticalCenter: parent.verticalCenter
|
verticalCenter: parent.verticalCenter
|
||||||
}
|
}
|
||||||
width: dragArea.width; height: column.implicitHeight + 4
|
width: dragArea.width
|
||||||
|
height: column.implicitHeight + 4
|
||||||
|
|
||||||
border.width: 1
|
border.width: 1
|
||||||
border.color: "lightsteelblue"
|
border.color: "lightsteelblue"
|
||||||
|
|
@ -53,28 +63,40 @@ Rectangle {
|
||||||
states: State {
|
states: State {
|
||||||
when: dragArea.held
|
when: dragArea.held
|
||||||
|
|
||||||
ParentChange { target: content; parent: root }
|
ParentChange {
|
||||||
|
target: content
|
||||||
|
parent: root
|
||||||
|
}
|
||||||
AnchorChanges {
|
AnchorChanges {
|
||||||
target: content
|
target: content
|
||||||
anchors { horizontalCenter: undefined; verticalCenter: undefined }
|
anchors {
|
||||||
|
horizontalCenter: undefined
|
||||||
|
verticalCenter: undefined
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Column {
|
Column {
|
||||||
id: column
|
id: column
|
||||||
anchors { fill: parent; margins: 2 }
|
anchors {
|
||||||
|
fill: parent
|
||||||
|
margins: 2
|
||||||
|
}
|
||||||
|
|
||||||
Text { text: 'Name: ' + name }
|
Text { text: qsTr('Name: ') + dragArea.name }
|
||||||
Text { text: 'Type: ' + type }
|
Text { text: qsTr('Type: ') + dragArea.type }
|
||||||
Text { text: 'Age: ' + age }
|
Text { text: qsTr('Age: ') + dragArea.age }
|
||||||
Text { text: 'Size: ' + size }
|
Text { text: qsTr('Size: ') + dragArea.size }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
DropArea {
|
DropArea {
|
||||||
anchors { fill: parent; margins: 10 }
|
anchors {
|
||||||
|
fill: parent
|
||||||
|
margins: 10
|
||||||
|
}
|
||||||
|
|
||||||
onEntered: (drag)=> {
|
onEntered: (drag) => {
|
||||||
visualModel.items.move(
|
visualModel.items.move(
|
||||||
drag.source.DelegateModel.itemsIndex,
|
drag.source.DelegateModel.itemsIndex,
|
||||||
dragArea.DelegateModel.itemsIndex)
|
dragArea.DelegateModel.itemsIndex)
|
||||||
|
|
@ -110,11 +132,11 @@ Rectangle {
|
||||||
//![6]
|
//![6]
|
||||||
//![3]
|
//![3]
|
||||||
function insertPosition(lessThan, item) {
|
function insertPosition(lessThan, item) {
|
||||||
var lower = 0
|
let lower = 0
|
||||||
var upper = items.count
|
let upper = items.count
|
||||||
while (lower < upper) {
|
while (lower < upper) {
|
||||||
var middle = Math.floor(lower + (upper - lower) / 2)
|
const middle = Math.floor(lower + (upper - lower) / 2)
|
||||||
var result = lessThan(item.model, items.get(middle).model);
|
const result = lessThan(item.model, items.get(middle).model)
|
||||||
if (result) {
|
if (result) {
|
||||||
upper = middle
|
upper = middle
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -126,8 +148,8 @@ Rectangle {
|
||||||
|
|
||||||
function sort(lessThan) {
|
function sort(lessThan) {
|
||||||
while (unsortedItems.count > 0) {
|
while (unsortedItems.count > 0) {
|
||||||
var item = unsortedItems.get(0)
|
const item = unsortedItems.get(0)
|
||||||
var index = insertPosition(lessThan, item)
|
const index = insertPosition(lessThan, item)
|
||||||
|
|
||||||
item.groups = "items"
|
item.groups = "items"
|
||||||
items.move(item.itemsIndex, index)
|
items.move(item.itemsIndex, index)
|
||||||
|
|
@ -162,7 +184,10 @@ Rectangle {
|
||||||
id: view
|
id: view
|
||||||
|
|
||||||
anchors {
|
anchors {
|
||||||
left: parent.left; top: parent.top; right: parent.right; bottom: orderSelector.top;
|
left: parent.left
|
||||||
|
top: parent.top
|
||||||
|
right: parent.right
|
||||||
|
bottom: orderSelector.top
|
||||||
margins: 2
|
margins: 2
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -175,9 +200,14 @@ Rectangle {
|
||||||
ListSelector {
|
ListSelector {
|
||||||
id: orderSelector
|
id: orderSelector
|
||||||
|
|
||||||
anchors { left: parent.left; right: parent.right; bottom: parent.bottom; margins: 2 }
|
anchors {
|
||||||
|
left: parent.left
|
||||||
|
right: parent.right
|
||||||
|
bottom: parent.bottom
|
||||||
|
margins: 2
|
||||||
|
}
|
||||||
|
|
||||||
label: "Sort By"
|
label: qsTr("Sort By")
|
||||||
list: [ "Name", "Type", "Age", "Size", "Custom" ]
|
list: [ qsTr("Name"), qsTr("Type"), qsTr("Age"), qsTr("Size"), qsTr("Custom") ]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue