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.

Pick-to: 6.5 6.5.0
Change-Id: I33958c414537aff32814f4ef2f04c73a03dc5295
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
This commit is contained in:
Bumjoon Park 2023-03-15 17:53:23 +09:00
parent 2fcb336698
commit b1115d957f
9 changed files with 276 additions and 170 deletions

View File

@ -6,59 +6,59 @@ import QtQuick
ListModel {
ListElement {
name: "Polly"
type: "Parrot"
name: qsTr("Polly")
type: qsTr("Parrot")
age: 12
size: "Small"
size: qsTr("Small")
}
ListElement {
name: "Penny"
type: "Turtle"
name: qsTr("Penny")
type: qsTr("Turtle")
age: 4
size: "Small"
size: qsTr("Small")
}
//![0]
ListElement {
name: "Warren"
type: "Rabbit"
name: qsTr("Warren")
type: qsTr("Rabbit")
age: 2
size: "Small"
size: qsTr("Small")
}
ListElement {
name: "Spot"
type: "Dog"
name: qsTr("Spot")
type: qsTr("Dog")
age: 9
size: "Medium"
size: qsTr("Medium")
}
ListElement {
name: "Schrödinger"
type: "Cat"
name: qsTr("Schrödinger")
type: qsTr("Cat")
age: 2
size: "Medium"
size: qsTr("Medium")
}
ListElement {
name: "Joey"
type: "Kangaroo"
name: qsTr("Joey")
type: qsTr("Kangaroo")
age: 1
size: "Medium"
size: qsTr("Medium")
}
ListElement {
name: "Kimba"
type: "Bunny"
name: qsTr("Kimba")
type: qsTr("Bunny")
age: 65
size: "Large"
size: qsTr("Large")
}
ListElement {
name: "Rover"
type: "Dog"
name: qsTr("Rover")
type: qsTr("Dog")
age: 5
size: "Large"
size: qsTr("Large")
}
ListElement {
name: "Tiny"
type: "Elephant"
name: qsTr("Tiny")
type: qsTr("Elephant")
age: 15
size: "Large"
size: qsTr("Large")
}
//![1]
}

View File

@ -8,7 +8,8 @@ import QtQuick
Rectangle {
id: root
width: 300; height: 400
width: 300
height: 400
//![1]
Component {
@ -32,12 +33,15 @@ Rectangle {
Column {
id: column
anchors { fill: parent; margins: 2 }
anchors {
fill: parent
margins: 2
}
Text { text: 'Name: ' + name }
Text { text: 'Type: ' + type }
Text { text: 'Age: ' + age }
Text { text: 'Size: ' + size }
Text { text: qsTr('Name: ') + content.name }
Text { text: qsTr('Type: ') + content.type }
Text { text: qsTr('Age: ') + content.age }
Text { text: qsTr('Size: ') + content.size }
}
}
}
@ -46,7 +50,10 @@ Rectangle {
ListView {
id: view
anchors { fill: parent; margins: 2 }
anchors {
fill: parent
margins: 2
}
model: PetsModel {}
delegate: dragDelegate

View File

@ -5,57 +5,57 @@ import QtQuick
ListModel {
ListElement {
name: "Polly"
type: "Parrot"
name: qsTr("Polly")
type: qsTr("Parrot")
age: 12
size: "Small"
size: qsTr("Small")
}
ListElement {
name: "Penny"
type: "Turtle"
name: qsTr("Penny")
type: qsTr("Turtle")
age: 4
size: "Small"
size: qsTr("Small")
}
ListElement {
name: "Warren"
type: "Rabbit"
name: qsTr("Warren")
type: qsTr("Rabbit")
age: 2
size: "Small"
size: qsTr("Small")
}
ListElement {
name: "Spot"
type: "Dog"
name: qsTr("Spot")
type: qsTr("Dog")
age: 9
size: "Medium"
size: qsTr("Medium")
}
ListElement {
name: "Schrödinger"
type: "Cat"
name: qsTr("Schrödinger")
type: qsTr("Cat")
age: 2
size: "Medium"
size: qsTr("Medium")
}
ListElement {
name: "Joey"
type: "Kangaroo"
name: qsTr("Joey")
type: qsTr("Kangaroo")
age: 1
size: "Medium"
size: qsTr("Medium")
}
ListElement {
name: "Kimba"
type: "Bunny"
name: qsTr("Kimba")
type: qsTr("Bunny")
age: 65
size: "Large"
size: qsTr("Large")
}
ListElement {
name: "Rover"
type: "Dog"
name: qsTr("Rover")
type: qsTr("Dog")
age: 5
size: "Large"
size: qsTr("Large")
}
ListElement {
name: "Tiny"
type: "Elephant"
name: qsTr("Tiny")
type: qsTr("Elephant")
age: 15
size: "Large"
size: qsTr("Large")
}
}

View File

@ -1,12 +1,14 @@
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
pragma ComponentBehavior: Bound
import QtQuick
Rectangle {
id: root
width: 300; height: 400
width: 300
height: 400
//![0]
Component {
@ -17,8 +19,15 @@ Rectangle {
id: dragArea
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
drag.target: held ? content : undefined
@ -34,7 +43,8 @@ Rectangle {
horizontalCenter: parent.horizontalCenter
verticalCenter: parent.verticalCenter
}
width: dragArea.width; height: column.implicitHeight + 4
width: dragArea.width
height: column.implicitHeight + 4
border.width: 1
border.color: "lightsteelblue"
@ -47,21 +57,30 @@ Rectangle {
states: State {
when: dragArea.held
ParentChange { target: content; parent: root }
ParentChange {
target: content
parent: root
}
AnchorChanges {
target: content
anchors { horizontalCenter: undefined; verticalCenter: undefined }
anchors {
horizontalCenter: undefined
verticalCenter: undefined
}
}
}
//![4]
Column {
id: column
anchors { fill: parent; margins: 2 }
anchors {
fill: parent
margins: 2
}
Text { text: 'Name: ' + name }
Text { text: 'Type: ' + type }
Text { text: 'Age: ' + age }
Text { text: 'Size: ' + size }
Text { text: qsTr('Name: ') + dragArea.name }
Text { text: qsTr('Type: ') + dragArea.type }
Text { text: qsTr('Age: ') + dragArea.age }
Text { text: qsTr('Size: ') + dragArea.size }
}
//![2]
}
@ -73,7 +92,10 @@ Rectangle {
ListView {
id: view
anchors { fill: parent; margins: 2 }
anchors {
fill: parent
margins: 2
}
model: PetsModel {}
delegate: dragDelegate

View File

@ -5,57 +5,57 @@ import QtQuick
ListModel {
ListElement {
name: "Polly"
type: "Parrot"
name: qsTr("Polly")
type: qsTr("Parrot")
age: 12
size: "Small"
size: qsTr("Small")
}
ListElement {
name: "Penny"
type: "Turtle"
name: qsTr("Penny")
type: qsTr("Turtle")
age: 4
size: "Small"
size: qsTr("Small")
}
ListElement {
name: "Warren"
type: "Rabbit"
name: qsTr("Warren")
type: qsTr("Rabbit")
age: 2
size: "Small"
size: qsTr("Small")
}
ListElement {
name: "Spot"
type: "Dog"
name: qsTr("Spot")
type: qsTr("Dog")
age: 9
size: "Medium"
size: qsTr("Medium")
}
ListElement {
name: "Schrödinger"
type: "Cat"
name: qsTr("Schrödinger")
type: qsTr("Cat")
age: 2
size: "Medium"
size: qsTr("Medium")
}
ListElement {
name: "Joey"
type: "Kangaroo"
name: qsTr("Joey")
type: qsTr("Kangaroo")
age: 1
size: "Medium"
size: qsTr("Medium")
}
ListElement {
name: "Kimba"
type: "Bunny"
name: qsTr("Kimba")
type: qsTr("Bunny")
age: 65
size: "Large"
size: qsTr("Large")
}
ListElement {
name: "Rover"
type: "Dog"
name: qsTr("Rover")
type: qsTr("Dog")
age: 5
size: "Large"
size: qsTr("Large")
}
ListElement {
name: "Tiny"
type: "Elephant"
name: qsTr("Tiny")
type: qsTr("Elephant")
age: 15
size: "Large"
size: qsTr("Large")
}
}

View File

@ -1,13 +1,15 @@
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
pragma ComponentBehavior: Bound
import QtQuick
import QtQml.Models
//![0]
Rectangle {
id: root
width: 300; height: 400
width: 300
height: 400
Component {
id: dragDelegate
@ -16,8 +18,15 @@ Rectangle {
id: dragArea
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
drag.target: held ? content : undefined
@ -33,7 +42,8 @@ Rectangle {
horizontalCenter: parent.horizontalCenter
verticalCenter: parent.verticalCenter
}
width: dragArea.width; height: column.implicitHeight + 4
width: dragArea.width
height: column.implicitHeight + 4
border.width: 1
border.color: "lightsteelblue"
@ -51,29 +61,41 @@ Rectangle {
states: State {
when: dragArea.held
ParentChange { target: content; parent: root }
ParentChange {
target: content
parent: root
}
AnchorChanges {
target: content
anchors { horizontalCenter: undefined; verticalCenter: undefined }
anchors {
horizontalCenter: undefined
verticalCenter: undefined
}
}
}
Column {
id: column
anchors { fill: parent; margins: 2 }
anchors {
fill: parent
margins: 2
}
Text { text: 'Name: ' + name }
Text { text: 'Type: ' + type }
Text { text: 'Age: ' + age }
Text { text: 'Size: ' + size }
Text { text: qsTr('Name: ') + dragArea.name }
Text { text: qsTr('Type: ') + dragArea.type }
Text { text: qsTr('Age: ') + dragArea.age }
Text { text: qsTr('Size: ') + dragArea.size }
}
//![2]
}
//![3]
DropArea {
anchors { fill: parent; margins: 10 }
anchors {
fill: parent
margins: 10
}
onEntered: (drag)=> {
onEntered: (drag) => {
visualModel.items.move(
drag.source.DelegateModel.itemsIndex,
dragArea.DelegateModel.itemsIndex)
@ -94,7 +116,10 @@ Rectangle {
ListView {
id: view
anchors { fill: parent; margins: 2 }
anchors {
fill: parent
margins: 2
}
model: visualModel

View File

@ -1,6 +1,7 @@
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
pragma ComponentBehavior: Bound
import QtQuick
Item {
@ -11,12 +12,17 @@ Item {
property alias label: labelText.text
property bool expanded
width: 100; height: labelText.implicitHeight + 26
width: 100
height: labelText.implicitHeight + 26
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 } }
radius: 2
@ -31,13 +37,20 @@ Item {
Text {
id: labelText
anchors { left: parent.left; top: parent.top; margins: 2 }
anchors {
left: parent.left
top: parent.top
margins: 2
}
}
Rectangle {
anchors {
left: parent.left; top: labelText.bottom;
right: parent.right; bottom: parent.bottom;
left: parent.left
top: labelText.bottom
right: parent.right
bottom: parent.bottom
margins: 2
leftMargin: 10
}
@ -53,7 +66,13 @@ Item {
clip: true
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
verticalAlignment: Text.AlignVCenter
@ -64,13 +83,16 @@ Item {
anchors.fill: parent
onClicked: {
view.currentIndex = index
parent.ListView.view.currentIndex = parent.index
selector.expanded = !selector.expanded
}
}
}
highlight: Rectangle {
anchors { left: parent.left; right: parent.right }
anchors {
left: parent.left
right: parent.right
}
height: 20
radius: 2

View File

@ -5,57 +5,57 @@ import QtQuick
ListModel {
ListElement {
name: "Polly"
type: "Parrot"
name: qsTr("Polly")
type: qsTr("Parrot")
age: 12
size: "Small"
size: qsTr("Small")
}
ListElement {
name: "Penny"
type: "Turtle"
name: qsTr("Penny")
type: qsTr("Turtle")
age: 4
size: "Small"
size: qsTr("Small")
}
ListElement {
name: "Warren"
type: "Rabbit"
name: qsTr("Warren")
type: qsTr("Rabbit")
age: 2
size: "Small"
size: qsTr("Small")
}
ListElement {
name: "Spot"
type: "Dog"
name: qsTr("Spot")
type: qsTr("Dog")
age: 9
size: "Medium"
size: qsTr("Medium")
}
ListElement {
name: "Schrödinger"
type: "Cat"
name: qsTr("Schrödinger")
type: qsTr("Cat")
age: 2
size: "Medium"
size: qsTr("Medium")
}
ListElement {
name: "Joey"
type: "Kangaroo"
name: qsTr("Joey")
type: qsTr("Kangaroo")
age: 1
size: "Medium"
size: qsTr("Medium")
}
ListElement {
name: "Kimba"
type: "Bunny"
name: qsTr("Kimba")
type: qsTr("Bunny")
age: 65
size: "Large"
size: qsTr("Large")
}
ListElement {
name: "Rover"
type: "Dog"
name: qsTr("Rover")
type: qsTr("Dog")
age: 5
size: "Large"
size: qsTr("Large")
}
ListElement {
name: "Tiny"
type: "Elephant"
name: qsTr("Tiny")
type: qsTr("Elephant")
age: 15
size: "Large"
size: qsTr("Large")
}
}

View File

@ -1,13 +1,15 @@
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
pragma ComponentBehavior: Bound
import QtQuick
import QtQml.Models
Rectangle {
id: root
width: 300; height: 400
width: 300
height: 400
Component {
id: dragDelegate
@ -16,8 +18,15 @@ Rectangle {
id: dragArea
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
enabled: visualModel.sortOrder == visualModel.lessThan.length
@ -35,7 +44,8 @@ Rectangle {
horizontalCenter: parent.horizontalCenter
verticalCenter: parent.verticalCenter
}
width: dragArea.width; height: column.implicitHeight + 4
width: dragArea.width
height: column.implicitHeight + 4
border.width: 1
border.color: "lightsteelblue"
@ -53,28 +63,40 @@ Rectangle {
states: State {
when: dragArea.held
ParentChange { target: content; parent: root }
ParentChange {
target: content
parent: root
}
AnchorChanges {
target: content
anchors { horizontalCenter: undefined; verticalCenter: undefined }
anchors {
horizontalCenter: undefined
verticalCenter: undefined
}
}
}
Column {
id: column
anchors { fill: parent; margins: 2 }
anchors {
fill: parent
margins: 2
}
Text { text: 'Name: ' + name }
Text { text: 'Type: ' + type }
Text { text: 'Age: ' + age }
Text { text: 'Size: ' + size }
Text { text: qsTr('Name: ') + dragArea.name }
Text { text: qsTr('Type: ') + dragArea.type }
Text { text: qsTr('Age: ') + dragArea.age }
Text { text: qsTr('Size: ') + dragArea.size }
}
}
DropArea {
anchors { fill: parent; margins: 10 }
anchors {
fill: parent
margins: 10
}
onEntered: (drag)=> {
onEntered: (drag) => {
visualModel.items.move(
drag.source.DelegateModel.itemsIndex,
dragArea.DelegateModel.itemsIndex)
@ -110,11 +132,11 @@ Rectangle {
//![6]
//![3]
function insertPosition(lessThan, item) {
var lower = 0
var upper = items.count
let lower = 0
let upper = items.count
while (lower < upper) {
var middle = Math.floor(lower + (upper - lower) / 2)
var result = lessThan(item.model, items.get(middle).model);
const middle = Math.floor(lower + (upper - lower) / 2)
const result = lessThan(item.model, items.get(middle).model)
if (result) {
upper = middle
} else {
@ -126,8 +148,8 @@ Rectangle {
function sort(lessThan) {
while (unsortedItems.count > 0) {
var item = unsortedItems.get(0)
var index = insertPosition(lessThan, item)
const item = unsortedItems.get(0)
const index = insertPosition(lessThan, item)
item.groups = "items"
items.move(item.itemsIndex, index)
@ -162,7 +184,10 @@ Rectangle {
id: view
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
}
@ -175,9 +200,14 @@ Rectangle {
ListSelector {
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"
list: [ "Name", "Type", "Age", "Size", "Custom" ]
label: qsTr("Sort By")
list: [ qsTr("Name"), qsTr("Type"), qsTr("Age"), qsTr("Size"), qsTr("Custom") ]
}
}