diff options
author | Ulf Hermann <ulf.hermann@qt.io> | 2019-09-17 18:10:59 +0200 |
---|---|---|
committer | Ulf Hermann <ulf.hermann@qt.io> | 2020-02-11 19:26:05 +0100 |
commit | 90b4528b846542bfa6f0723487315140b9de17b4 (patch) | |
tree | 9356c0e6b5a736b3228ca6793416d927432c101e /examples/quick/views | |
parent | 38c03709236f6a2114ace7adf1b6bdcdfe8e4e18 (diff) |
Avoid discouraged patterns in examples
In particular, use required properties where applicable, explicitly
import QtQml where we use it, avoid unqualified access into the root
scope of a component, use JavaScript functions with explicit parameters
as signal handlers.
Change-Id: I3eaaba47cc3c7a2a12d488e36f9eec145cedbb0e
Reviewed-by: Fabian Kosmale <fabian.kosmale@qt.io>
Reviewed-by: Shawn Rutledge <shawn.rutledge@qt.io>
Diffstat (limited to 'examples/quick/views')
-rw-r--r-- | examples/quick/views/delegatemodel/dragselection.qml | 5 | ||||
-rw-r--r-- | examples/quick/views/delegatemodel/slideshow.qml | 4 | ||||
-rw-r--r-- | examples/quick/views/gridview/gridview-example.qml | 10 | ||||
-rw-r--r-- | examples/quick/views/listview/content/PressAndHoldButton.qml | 4 | ||||
-rw-r--r-- | examples/quick/views/listview/content/ToggleButton.qml | 2 | ||||
-rw-r--r-- | examples/quick/views/listview/displaymargin.qml | 5 | ||||
-rw-r--r-- | examples/quick/views/listview/dynamiclist.qml | 37 | ||||
-rw-r--r-- | examples/quick/views/listview/expandingdelegates.qml | 18 | ||||
-rw-r--r-- | examples/quick/views/listview/highlight.qml | 68 | ||||
-rw-r--r-- | examples/quick/views/listview/highlightranges.qml | 32 | ||||
-rw-r--r-- | examples/quick/views/listview/sections.qml | 10 | ||||
-rw-r--r-- | examples/quick/views/objectmodel/objectmodel.qml | 10 | ||||
-rw-r--r-- | examples/quick/views/package/Delegate.qml | 10 | ||||
-rw-r--r-- | examples/quick/views/package/view.qml | 4 |
14 files changed, 141 insertions, 78 deletions
diff --git a/examples/quick/views/delegatemodel/dragselection.qml b/examples/quick/views/delegatemodel/dragselection.qml index 15fd2654c2..f9a0d37311 100644 --- a/examples/quick/views/delegatemodel/dragselection.qml +++ b/examples/quick/views/delegatemodel/dragselection.qml @@ -48,6 +48,7 @@ ** ****************************************************************************/ +import QtQml 2.0 import QtQuick 2.0 import QtQml.Models 2.1 @@ -64,6 +65,8 @@ Item { Package { id: packageRoot + required property var modelData + MouseArea { id: visibleContainer Package.name: "visible" @@ -130,7 +133,7 @@ Item { horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter color: "white" - text: modelData + text: packageRoot.modelData font.pixelSize: 18 } diff --git a/examples/quick/views/delegatemodel/slideshow.qml b/examples/quick/views/delegatemodel/slideshow.qml index b252519bbf..638c8bf10f 100644 --- a/examples/quick/views/delegatemodel/slideshow.qml +++ b/examples/quick/views/delegatemodel/slideshow.qml @@ -74,6 +74,8 @@ Rectangle { width: 76; height: 76 + required property string thumbnail + Rectangle { id: image x: 0; y: 0; width: 76; height: 76 @@ -86,7 +88,7 @@ Rectangle { anchors.leftMargin: 1 anchors.topMargin: 1 - source: thumbnail + source: delegateItem.thumbnail fillMode: Image.PreserveAspectFit } diff --git a/examples/quick/views/gridview/gridview-example.qml b/examples/quick/views/gridview/gridview-example.qml index 76a1d8dd37..4cc30d3736 100644 --- a/examples/quick/views/gridview/gridview-example.qml +++ b/examples/quick/views/gridview/gridview-example.qml @@ -74,20 +74,24 @@ Rectangle { highlight: Rectangle { width: 80; height: 80; color: "lightsteelblue" } delegate: Item { + required property string icon + required property string name + required property int index + width: 100; height: 100 Image { id: myIcon y: 20; anchors.horizontalCenter: parent.horizontalCenter - source: icon + source: parent.icon } Text { anchors { top: myIcon.bottom; horizontalCenter: parent.horizontalCenter } - text: name + text: parent.name } MouseArea { anchors.fill: parent - onClicked: parent.GridView.view.currentIndex = index + onClicked: parent.GridView.view.currentIndex = parent.index } } } diff --git a/examples/quick/views/listview/content/PressAndHoldButton.qml b/examples/quick/views/listview/content/PressAndHoldButton.qml index 527394eb4d..6d633c0264 100644 --- a/examples/quick/views/listview/content/PressAndHoldButton.qml +++ b/examples/quick/views/listview/content/PressAndHoldButton.qml @@ -72,12 +72,12 @@ Image { PropertyAction { target: container; property: "pressed"; value: true } ScriptAction { script: container.clicked() } - PauseAnimation { duration: repeatDelay } + PauseAnimation { duration: container.repeatDelay } SequentialAnimation { loops: Animation.Infinite ScriptAction { script: container.clicked() } - PauseAnimation { duration: repeatDuration } + PauseAnimation { duration: container.repeatDuration } } } diff --git a/examples/quick/views/listview/content/ToggleButton.qml b/examples/quick/views/listview/content/ToggleButton.qml index 0a2747a683..890a94570b 100644 --- a/examples/quick/views/listview/content/ToggleButton.qml +++ b/examples/quick/views/listview/content/ToggleButton.qml @@ -63,6 +63,6 @@ Rectangle { Text { id: text; anchors.centerIn: parent; font.pixelSize: 14 } MouseArea { anchors.fill: parent - onClicked: { active = !active; root.toggled() } + onClicked: { root.active = !root.active; root.toggled() } } } diff --git a/examples/quick/views/listview/displaymargin.qml b/examples/quick/views/listview/displaymargin.qml index e0024e72a9..19261caaa6 100644 --- a/examples/quick/views/listview/displaymargin.qml +++ b/examples/quick/views/listview/displaymargin.qml @@ -68,10 +68,13 @@ Item { width: parent.width height: 25 color: index % 2 ? "steelblue" : "lightsteelblue" + + required property int index + Text { anchors.centerIn: parent color: "white" - text: "Item " + (index + 1) + text: "Item " + (parent.index + 1) } } } diff --git a/examples/quick/views/listview/dynamiclist.qml b/examples/quick/views/listview/dynamiclist.qml index bfc697d094..f37aab98e2 100644 --- a/examples/quick/views/listview/dynamiclist.qml +++ b/examples/quick/views/listview/dynamiclist.qml @@ -101,6 +101,11 @@ Rectangle { width: listView.width; height: 80 clip: true + required property int index + required property string name + required property real cost + required property var attributes + Column { id: arrows anchors { @@ -109,10 +114,16 @@ Rectangle { } Image { source: "content/pics/arrow-up.png" - MouseArea { anchors.fill: parent; onClicked: fruitModel.move(index, index-1, 1) } + MouseArea { + anchors.fill: parent + onClicked: fruitModel.move(delegateItem.index, delegateItem.index - 1, 1) + } } Image { source: "content/pics/arrow-down.png" - MouseArea { anchors.fill: parent; onClicked: fruitModel.move(index, index+1, 1) } + MouseArea { + anchors.fill: parent + onClicked: fruitModel.move(delegateItem.index, delegateItem.index + 1, 1) + } } } @@ -125,7 +136,7 @@ Rectangle { Text { anchors.horizontalCenter: parent.horizontalCenter - text: name + text: delegateItem.name font.pixelSize: 15 color: "white" } @@ -133,8 +144,12 @@ Rectangle { anchors.horizontalCenter: parent.horizontalCenter spacing: 5 Repeater { - model: attributes - Text { text: description; color: "White" } + model: delegateItem.attributes + Text { + required property string description + text: description + color: "White" + } } } } @@ -154,13 +169,13 @@ Rectangle { PressAndHoldButton { anchors.verticalCenter: parent.verticalCenter source: "content/pics/plus-sign.png" - onClicked: fruitModel.setProperty(index, "cost", cost + 0.25) + onClicked: fruitModel.setProperty(delegateItem.index, "cost", delegateItem.cost + 0.25) } Text { id: costText anchors.verticalCenter: parent.verticalCenter - text: '$' + Number(cost).toFixed(2) + text: '$' + Number(delegateItem.cost).toFixed(2) font.pixelSize: 15 color: "white" font.bold: true @@ -169,12 +184,16 @@ Rectangle { PressAndHoldButton { anchors.verticalCenter: parent.verticalCenter source: "content/pics/minus-sign.png" - onClicked: fruitModel.setProperty(index, "cost", Math.max(0,cost-0.25)) + onClicked: fruitModel.setProperty(delegateItem.index, "cost", + Math.max(0, delegateItem.cost - 0.25)) } Image { source: "content/pics/list-delete.png" - MouseArea { anchors.fill:parent; onClicked: fruitModel.remove(index) } + MouseArea { + anchors.fill: parent + onClicked: fruitModel.remove(delegateItem.index) + } } } } diff --git a/examples/quick/views/listview/expandingdelegates.qml b/examples/quick/views/listview/expandingdelegates.qml index 1308e8441d..6ed1d8c341 100644 --- a/examples/quick/views/listview/expandingdelegates.qml +++ b/examples/quick/views/listview/expandingdelegates.qml @@ -67,6 +67,11 @@ Rectangle { Item { id: recipe + required property string title + required property string picture + required property string ingredients + required property string method + // Create a property to contain the visibility of the details. // We can bind multiple element's opacity to this one property, // rather than having a "PropertyChanges" line for each element we @@ -106,7 +111,7 @@ Rectangle { Image { id: recipeImage width: 50; height: 50 - source: picture + source: recipe.picture } //! [1] Column { @@ -114,7 +119,7 @@ Rectangle { spacing: 5 Text { - text: title + text: recipe.title font.bold: true; font.pointSize: 16 } @@ -125,7 +130,7 @@ Rectangle { } SmallText { - text: ingredients + text: recipe.ingredients wrapMode: Text.WordWrap width: parent.width opacity: recipe.detailsOpacity @@ -155,7 +160,12 @@ Rectangle { contentHeight: methodText.height clip: true - Text { id: methodText; text: method; wrapMode: Text.WordWrap; width: details.width } + Text { + id: methodText + text: recipe.method + wrapMode: Text.WordWrap + width: details.width + } } Image { diff --git a/examples/quick/views/listview/highlight.qml b/examples/quick/views/listview/highlight.qml index 5b03d30f25..092b4d59bd 100644 --- a/examples/quick/views/listview/highlight.qml +++ b/examples/quick/views/listview/highlight.qml @@ -58,44 +58,44 @@ import "content" Rectangle { width: 200; height: 300 - // Define a delegate component. A component will be + // Define a delegate component. The component will be // instantiated for each visible item in the list. - Component { - id: petDelegate - Item { - id: wrapper - width: 200; height: 55 - Column { - SmallText { text: 'Name: ' + name } - SmallText { text: 'Type: ' + type } - SmallText { text: 'Age: ' + age } - } - // indent the item if it is the current item - states: State { - name: "Current" - when: wrapper.ListView.isCurrentItem - PropertyChanges { target: wrapper; x: 20 } - } - transitions: Transition { - NumberAnimation { properties: "x"; duration: 200 } - } - MouseArea { - anchors.fill: parent - onClicked: wrapper.ListView.view.currentIndex = index - } + component PetDelegate: Item { + id: pet + width: 200; height: 55 + + required property int index + required property string name + required property string type + required property int age + + Column { + SmallText { text: 'Name: ' + pet.name } + SmallText { text: 'Type: ' + pet.type } + SmallText { text: 'Age: ' + pet.age } + } + // indent the item if it is the current item + states: State { + name: "Current" + when: pet.ListView.isCurrentItem + PropertyChanges { target: pet; x: 20 } + } + transitions: Transition { + NumberAnimation { properties: "x"; duration: 200 } + } + MouseArea { + anchors.fill: parent + onClicked: pet.ListView.view.currentIndex = pet.index } } //! [0] // Define a highlight with customized movement between items. - Component { - id: highlightBar - Rectangle { - width: 200; height: 50 - color: "#FFFF88" - y: listView.currentItem.y; - Behavior on y { SpringAnimation { spring: 2; damping: 0.1 } } - } + component HighlightBar : Rectangle { + width: 200; height: 50 + color: "#FFFF88" + y: listView.currentItem.y + Behavior on y { SpringAnimation { spring: 2; damping: 0.1 } } } ListView { @@ -104,12 +104,12 @@ Rectangle { x: 30 model: PetsModel {} - delegate: petDelegate + delegate: PetDelegate {} focus: true // Set the highlight delegate. Note we must also set highlightFollowsCurrentItem // to false so the highlight delegate can control how the highlight is moved. - highlight: highlightBar + highlight: HighlightBar {} highlightFollowsCurrentItem: false } //! [0] diff --git a/examples/quick/views/listview/highlightranges.qml b/examples/quick/views/listview/highlightranges.qml index 7bc9ab7fe1..dafd064332 100644 --- a/examples/quick/views/listview/highlightranges.qml +++ b/examples/quick/views/listview/highlightranges.qml @@ -62,17 +62,17 @@ Rectangle { loops: -1 running: true ScriptAction { - script: if (increasing) { - current++; - if (current >= aModel.count -1) { - current = aModel.count - 1; - increasing = !increasing; + script: if (root.increasing) { + root.current++; + if (root.current >= aModel.count -1) { + root.current = aModel.count - 1; + root.increasing = !root.increasing; } } else { - current--; - if (current <= 0) { - current = 0; - increasing = !increasing; + root.current--; + if (root.current <= 0) { + root.current = 0; + root.increasing = !root.increasing; } } } @@ -161,16 +161,22 @@ Rectangle { Item { width: 160 height: column.height + + required property int index + required property string name + required property string type + required property int age + Column { id: column - Text { text: 'Name: ' + name } - Text { text: 'Type: ' + type } - Text { text: 'Age: ' + age } + Text { text: 'Name: ' + parent.name } + Text { text: 'Type: ' + parent.type } + Text { text: 'Age: ' + parent.age } } MouseArea { anchors.fill: parent - onClicked: root.current = index + onClicked: root.current = parent.index } } } diff --git a/examples/quick/views/listview/sections.qml b/examples/quick/views/listview/sections.qml index 75b0f5c6d9..d51ed89789 100644 --- a/examples/quick/views/listview/sections.qml +++ b/examples/quick/views/listview/sections.qml @@ -87,8 +87,10 @@ Rectangle { height: childrenRect.height color: "lightsteelblue" + required property string section + Text { - text: section + text: parent.section font.bold: true font.pixelSize: 20 } @@ -101,7 +103,11 @@ Rectangle { anchors.bottom: buttonBar.top width: parent.width model: animalsModel - delegate: Text { text: name; font.pixelSize: 18 } + delegate: Text { + required property string name + text: name + font.pixelSize: 18 + } section.property: "size" section.criteria: ViewSection.FullString diff --git a/examples/quick/views/objectmodel/objectmodel.qml b/examples/quick/views/objectmodel/objectmodel.qml index 8fc2f7c386..c9e4b8a5cd 100644 --- a/examples/quick/views/objectmodel/objectmodel.qml +++ b/examples/quick/views/objectmodel/objectmodel.qml @@ -70,21 +70,21 @@ Rectangle { color: "#FFFEF0" Text { text: "Page 1"; font.bold: true; anchors.centerIn: parent } - Component.onDestruction: if (printDestruction) print("destroyed 1") + Component.onDestruction: if (root.printDestruction) print("destroyed 1") } Rectangle { width: view.width; height: view.height color: "#F0FFF7" Text { text: "Page 2"; font.bold: true; anchors.centerIn: parent } - Component.onDestruction: if (printDestruction) print("destroyed 2") + Component.onDestruction: if (root.printDestruction) print("destroyed 2") } Rectangle { width: view.width; height: view.height color: "#F4F0FF" Text { text: "Page 3"; font.bold: true; anchors.centerIn: parent } - Component.onDestruction: if (printDestruction) print("destroyed 3") + Component.onDestruction: if (root.activeFocusprintDestruction) print("destroyed 3") } } @@ -112,6 +112,8 @@ Rectangle { model: itemModel.count Rectangle { + required property int index + width: 5; height: 5 radius: 3 color: view.currentIndex == index ? "blue" : "white" @@ -119,7 +121,7 @@ Rectangle { MouseArea { width: 20; height: 20 anchors.centerIn: parent - onClicked: view.currentIndex = index + onClicked: view.currentIndex = parent.index } } } diff --git a/examples/quick/views/package/Delegate.qml b/examples/quick/views/package/Delegate.qml index 7c73f35c3d..9f4f1946d8 100644 --- a/examples/quick/views/package/Delegate.qml +++ b/examples/quick/views/package/Delegate.qml @@ -52,6 +52,12 @@ import QtQuick 2.0 //! [0] Package { + id: delegate + + required property int upTo + required property int index + required property string display + Text { id: listDelegate; width: parent.width; height: 25; text: 'Empty'; Package.name: 'list' } Text { id: gridDelegate; width: parent.width / 2; height: 50; text: 'Empty'; Package.name: 'grid' } @@ -60,8 +66,8 @@ Package { width: parent.width; height: 25 color: 'lightsteelblue' - Text { text: display; anchors.centerIn: parent } - state: root.upTo > index ? 'inGrid' : 'inList' + Text { text: delegate.display; anchors.centerIn: parent } + state: delegate.upTo > delegate.index ? 'inGrid' : 'inList' states: [ State { name: 'inList' diff --git a/examples/quick/views/package/view.qml b/examples/quick/views/package/view.qml index 311cc3be8e..632d27c724 100644 --- a/examples/quick/views/package/view.qml +++ b/examples/quick/views/package/view.qml @@ -77,7 +77,9 @@ Rectangle { //![0] DelegateModel { id: visualModel - delegate: Delegate {} + delegate: Delegate { + upTo: root.upTo + } model: myModel } |