qiurui
/
qtdeclarative
mirror of https://github.com/qt/qtdeclarative.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update examples to use new PropertyChanges 

Also, prefer the multi-line syntax over ';'-separated bindings for
readability.

Change-Id: I3d6eb854e514ee257ca83773a11e6e9e10770bff
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
This commit is contained in:
Ulf Hermann 2021-10-28 09:34:00 +02:00
parent 2a60d5eb1c
commit d7862eac1b
31 changed files with 254 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
examples/qml/dynamicscene/dynamicscene.qml
View File

@ -268,9 +268,11 @@ Item {
name: "Day"
when: window.activeSuns > 0
PropertyChanges { target: gradientStopA; color: "DeepSkyBlue" }
PropertyChanges { target: gradientStopB; color: "SkyBlue" }
PropertyChanges { target: stars; opacity: 0 }
PropertyChanges {
gradientStopA.color: "DeepSkyBlue"
gradientStopB.color: "SkyBlue"
stars.opacity: 0
}
}
//! [top-level transitions]

7
examples/quick/animation/easing/easing.qml
View File

@ -145,9 +145,10 @@ Rectangle {
states : State {
name: "right"
PropertyChanges {
target: rect;
x: window.width - 76;
color: delegateInstance.ballColor
rect {
x: window.width - 76;
color: delegateInstance.ballColor
}
}
}

14
examples/quick/animation/states/states.qml
View File

@ -101,13 +101,23 @@ Rectangle {
// In state 'middleRight', move the image to middleRightRect
State {
name: "middleRight"
PropertyChanges { target: userIcon; x: middleRightRect.x; y: middleRightRect.y }
PropertyChanges {
userIcon {
x: middleRightRect.x
y: middleRightRect.y
}
}
},
// In state 'bottomLeft', move the image to bottomLeftRect
State {
name: "bottomLeft"
PropertyChanges { target: userIcon; x: bottomLeftRect.x; y: bottomLeftRect.y }
PropertyChanges {
userIcon {
x: bottomLeftRect.x
y: bottomLeftRect.y
}
}
}
// ![0]
]

14
examples/quick/animation/states/transitions.qml
View File

@ -105,13 +105,23 @@ Rectangle {
// In state 'middleRight', move the image to middleRightRect
State {
name: "middleRight"
PropertyChanges { target: userIcon; x: middleRightRect.x; y: middleRightRect.y }
PropertyChanges {
userIcon {
x: middleRightRect.x
y: middleRightRect.y
}
}
},
// In state 'bottomLeft', move the image to bottomLeftRect
State {
name: "bottomLeft"
PropertyChanges { target: userIcon; x: bottomLeftRect.x; y: bottomLeftRect.y }
PropertyChanges {
userIcon {
x: bottomLeftRect.x
y: bottomLeftRect.y
}
}
}
]

2
examples/quick/customitems/flipable/Card.qml
View File

@ -75,7 +75,7 @@ Flipable {
states: State {
name: "back"; when: container.flipped
PropertyChanges { target: rotation; angle: container.angle }
PropertyChanges { rotation.angle: container.angle }
}
transitions: Transition {

6
examples/quick/customitems/scrollbar/main.qml
View File

@ -71,8 +71,10 @@ Rectangle {
states: State {
name: "ShowBars"
when: view.movingVertically || view.movingHorizontally
PropertyChanges { target: verticalScrollBar; opacity: 1 }
PropertyChanges { target: horizontalScrollBar; opacity: 1 }
PropertyChanges {
verticalScrollBar.opacity: 1
horizontalScrollBar.opacity: 1
}
}
transitions: Transition {

6
examples/quick/customitems/searchbox/SearchBox.qml
View File

@ -102,8 +102,10 @@ FocusScope {
states: State {
name: "hasText"; when: textInput.text != ''
PropertyChanges { target: typeSomething; opacity: 0 }
PropertyChanges { target: clear; opacity: 1 }
PropertyChanges {
typeSomething.opacity: 0
clear.opacity: 1
}
}
transitions: [

12
examples/quick/customitems/slideswitch/content/Switch.qml
View File

@ -107,13 +107,17 @@ Item {
states: [
State {
name: "on"
PropertyChanges { target: knob; x: 78 }
PropertyChanges { target: toggleswitch; on: true }
PropertyChanges {
knob.x: 78
toggleswitch.on: true
}
},
State {
name: "off"
PropertyChanges { target: knob; x: 1 }
PropertyChanges { target: toggleswitch; on: false }
PropertyChanges {
knob.x: 1
toggleswitch.on: false
}
}
]
//![6]

3
examples/quick/draganddrop/tiles/DropTile.qml
View File

@ -70,8 +70,7 @@ DropArea {
State {
when: dragTarget.containsDrag
PropertyChanges {
target: dropRectangle
color: "grey"
dropRectangle.color: "grey"
}
}
]

7
examples/quick/keyinteraction/focus/Core/GridMenu.qml
View File

@ -105,7 +105,12 @@ FocusScope {
states: State {
name: "active"; when: container.activeFocus
PropertyChanges { target: content; color: "#FCFFF5"; scale: 1.1 }
PropertyChanges {
content {
color: "#FCFFF5"
scale: 1.1
}
}
}
transitions: Transition {

9
examples/quick/keyinteraction/focus/Core/ListViewDelegate.qml
View File

@ -87,8 +87,13 @@ Item {
states: State {
name: "active"; when: container.activeFocus
PropertyChanges { target: content; color: "#FCFFF5"; scale: 1.1 }
PropertyChanges { target: label; font.pixelSize: 16 }
PropertyChanges {
content {
color: "#FCFFF5"
scale: 1.1
}
label.font.pixelSize: 16
}
}
transitions: Transition {

7
examples/quick/keyinteraction/focus/Core/TabMenu.qml
View File

@ -100,7 +100,12 @@ FocusScope {
states: State {
name: "active"; when: container.activeFocus
PropertyChanges { target: content; color: "#FCFFF5"; scale: 1.1 }
PropertyChanges {
content {
color: "#FCFFF5"
scale: 1.1
}
}
}
transitions: Transition {

35
examples/quick/keyinteraction/focus/focus.qml
View File

@ -119,23 +119,29 @@ Rectangle {
states: [
State {
name: "showTabViews"
PropertyChanges { target: tabMenu; y: 160 }
PropertyChanges { target: gridMenu; y: 320 }
PropertyChanges { target: listMenu; y: 640 }
PropertyChanges {
tabMenu.y: 160
gridMenu.y: 320
listMenu.y: 640
}
},
State {
name: "showGridViews"
PropertyChanges { target: tabMenu; y: 0 }
PropertyChanges { target: gridMenu; y: 160 }
PropertyChanges { target: listMenu; y: 480 }
PropertyChanges {
tabMenu.y: 0
gridMenu.y: 160
listMenu.y: 480
}
},
State {
name: "showListViews"
PropertyChanges { target: tabMenu; y: -160 }
PropertyChanges { target: gridMenu; y: 0 }
PropertyChanges { target: listMenu; y: 320 }
PropertyChanges {
tabMenu.y: -160
gridMenu.y: 0
listMenu.y: 320
}
}
]
@ -166,9 +172,14 @@ Rectangle {
states: State {
name: "contextMenuOpen"
when: !mainView.activeFocus
PropertyChanges { target: contextMenu; x: 0; open: true }
PropertyChanges { target: mainView; x: 130 }
PropertyChanges { target: shade; opacity: 0.25 }
PropertyChanges {
contextMenu {
x: 0
open: true
}
mainView.x: 130
shade.opacity: 0.25
}
}
transitions: Transition {

2
examples/quick/particles/imageparticle/content/sharing.qml
View File

@ -87,7 +87,7 @@ Rectangle {
states: State {
name: "Current"
when: pet.ListView.isCurrentItem
PropertyChanges { target: pet; x: 20 }
PropertyChanges { pet.x: 20 }
}
transitions: Transition {
NumberAnimation { properties: "x"; duration: 200 }

3
examples/quick/particles/itemparticle/content/Delegate2.qml
View File

@ -66,8 +66,7 @@ Package {
name: "gridded"
when: root.inGrid
PropertyChanges {
target: wrapper
rotation: 0
wrapper.rotation: 0
}
ParentChange {
target: wrapper

37
examples/quick/particles/itemparticle/content/ExpandingDelegate.qml
View File

@ -182,16 +182,37 @@ import "../../../modelviews/listview/content"
states: State {
name: "Details"
PropertyChanges { target: background; color: "white" }
PropertyChanges { target: recipeImage; width: 130; height: 130 } // Make picture bigger
PropertyChanges { target: recipe; detailsOpacity: 1; x: 0; opacity: 1 } // Make details visible
PropertyChanges { target: recipe; height: root.height; width: root.height; x:0; y:0; z:100} // Fill the entire list area with the detailed view
PropertyChanges {
background.color: "white"
recipeImage {
// Make picture bigger
width: 130
height: 130
}
recipe {
// Make details visible
detailsOpacity: 1
x: 0
opacity: 1
// Move the list so that this item is at the top.
//PropertyChanges { target: recipe.ListView.view; explicit: true; contentY: recipe.y }
// Fill the entire list area with the detailed view
height: root.height
width: root.height
x:0
y:0
z:100
}
}
// Disallow flicking while we're in detailed view
//PropertyChanges { target: recipe.ListView.view; interactive: false }
// Move the list so that this item is at the top and
// disallow flicking while we're in detailed view
// PropertyChanges {
// recipe.ListView.view {
// explicit: true
// contentY: recipe.y
// interactive: false
// }
// }
}
transitions: Transition {

21
examples/quick/particles/itemparticle/particleview.qml
View File

@ -281,16 +281,17 @@ Item {
parent: root
}
PropertyChanges {
target: image
source: image.media
x: 0
y: 0
width: root.width
height: root.height
z: 101
opacity: 1
rotation: 0
darken: 0
image {
source: image.media
x: 0
y: 0
width: root.width
height: root.height
z: 101
opacity: 1
rotation: 0
darken: 0
}
}
}
transitions: Transition {

66
examples/quick/pointerhandlers/components/ScrollBar.qml
View File

@ -115,47 +115,41 @@ Rectangle {
State {
name: "horizontal"
PropertyChanges {
target: knob
max: root.width - knob.width
scrolledX: Math.min(max, Math.max(0, max * flick.contentX / (flick.width - flick.contentWidth)))
scrolledY: 1
scrollDistance: flick.width - flick.contentWidth
width: flick.width * (flick.width / flick.contentWidth) - (height - anchors.margins) * 2
height: root.height - 2
}
PropertyChanges {
target: drag
xAxis.minimum: 0
xAxis.maximum: knob.max
yAxis.minimum: 1
yAxis.maximum: 1
}
PropertyChanges {
target: root
position: knob.x / drag.xAxis.maximum
knob {
max: root.width - knob.width
scrolledX: Math.min(max, Math.max(0, max * flick.contentX / (flick.width - flick.contentWidth)))
scrolledY: 1
scrollDistance: flick.width - flick.contentWidth
width: flick.width * (flick.width / flick.contentWidth) - (height - anchors.margins) * 2
height: root.height - 2
}
drag {
xAxis.minimum: 0
xAxis.maximum: knob.max
yAxis.minimum: 1
yAxis.maximum: 1
}
root.position: knob.x / drag.xAxis.maximum
}
},
State {
name: "vertical"
PropertyChanges {
target: knob
max: root.height - knob.height
scrolledX: 1
scrolledY: Math.min(max, Math.max(0, max * flick.contentY / (flick.height - flick.contentHeight)))
scrollDistance: flick.height - flick.contentHeight
width: root.width - 2
height: root.width - 2
}
PropertyChanges {
target: drag
xAxis.minimum: 1
xAxis.maximum: 1
yAxis.minimum: 0
yAxis.maximum: knob.max
}
PropertyChanges {
target: root
position: knob.y / drag.yAxis.maximum
knob {
max: root.height - knob.height
scrolledX: 1
scrolledY: Math.min(max, Math.max(0, max * flick.contentY / (flick.height - flick.contentHeight)))
scrollDistance: flick.height - flick.contentHeight
width: root.width - 2
height: root.width - 2
}
drag {
xAxis.minimum: 1
xAxis.maximum: 1
yAxis.minimum: 0
yAxis.maximum: knob.max
}
root.position: knob.y / drag.yAxis.maximum
}
}
]

14
examples/quick/text/textselection/textselection.qml
View File

@ -208,14 +208,18 @@ Rectangle {
states: [
State {
name: "selection"
PropertyChanges { target: startHandle; opacity: 1.0 }
PropertyChanges { target: endHandle; opacity: 1.0 }
PropertyChanges {
startHandle.opacity: 1.0
endHandle.opacity: 1.0
}
},
State {
name: "menu"
PropertyChanges { target: startHandle; opacity: 0.5 }
PropertyChanges { target: endHandle; opacity: 0.5 }
PropertyChanges { target: menu; opacity: 1.0 }
PropertyChanges {
startHandle.opacity: 0.5
endHandle.opacity: 0.5
menu.opacity: 1.0
}
}
]
}

9
examples/quick/touchinteraction/flickable/Panel.qml
View File

@ -143,8 +143,13 @@ Item {
states: State {
name: "pressed"
when: mouse.pressed
PropertyChanges { target: sticky; rotation: 8; scale: 1 }
PropertyChanges { target: page; z: 8 }
PropertyChanges {
sticky {
rotation: 8
scale: 1
}
page.z: 8
}
}
transitions: Transition {

8
examples/quick/tutorials/helloworld/tutorial3.qml
View File

@ -70,7 +70,13 @@ Rectangle {
//![2]
states: State {
name: "down"; when: mouseArea.pressed == true
PropertyChanges { target: helloText; y: 160; rotation: 180; color: "red" }
PropertyChanges {
helloText {
y: 160
rotation: 180
color: "red"
}
}
}
//![2]

4
examples/quick/tutorials/samegame/samegame4/BoomBlock.qml
View File

@ -124,14 +124,14 @@ Item {
State {
name: "AliveState"
when: block.spawned == true && block.dying == false
PropertyChanges { target: img; opacity: 1 }
PropertyChanges { img.opacity: 1 }
},
State {
name: "DeathState"
when: block.dying == true
StateChangeScript { script: particles.burst(50); }
PropertyChanges { target: img; opacity: 0 }
PropertyChanges { img.opacity: 0 }
StateChangeScript { script: block.destroy(1000); }
}
]

16
examples/quick/views/delegatemodel/dragselection.qml
View File

@ -91,7 +91,7 @@ Item {
when: visibleContainer.drag.active
AnchorChanges { target: draggable; anchors { horizontalCenter: undefined; verticalCenter: undefined} }
ParentChange { target: selectionView; parent: draggable; x: 0; y: 0 }
PropertyChanges { target: root; dragging: true }
PropertyChanges { root.dragging: true }
ParentChange { target: draggable; parent: root }
}
}
@ -156,15 +156,17 @@ Item {
State {
name: "selected"
ParentChange { target: content; parent: selectionContainer; x: 3; y: 3 }
PropertyChanges { target: packageRoot; DelegateModel.inItems: visibleContainer.drag.active }
PropertyChanges { target: gradientStart; color: "#017423" }
PropertyChanges { target: gradientStart; color: "#007423" }
PropertyChanges {
packageRoot.DelegateModel.inItems: visibleContainer.drag.active
gradientStart.color: "#017423"
}
PropertyChanges { gradientStart.color: "#007423" }
}, State {
name: "visible"
PropertyChanges { target: packageRoot; DelegateModel.inItems: true }
PropertyChanges { packageRoot.DelegateModel.inItems: true }
ParentChange { target: content; parent: visibleContainer; x: 3; y: 3 }
PropertyChanges { target: gradientStart; color: "#8AC953" }
PropertyChanges { target: gradientStart; color: "#8BC953" }
PropertyChanges { gradientStart.color: "#8AC953" }
PropertyChanges { gradientStart.color: "#8BC953" }
}
]
transitions: Transition {

12
examples/quick/views/delegatemodel/slideshow.qml
View File

@ -104,15 +104,19 @@ Rectangle {
when: root.displayItem === delegateItem
name: "inDisplay";
ParentChange { target: image; parent: imageContainer; x: 75; y: 75; width: 150; height: 150 }
PropertyChanges { target: image; z: 2 }
PropertyChanges { target: delegateItem; DelegateModel.inItems: false }
PropertyChanges {
image.z: 2
delegateItem.DelegateModel.inItems: false
}
},
State {
when: root.displayItem !== delegateItem
name: "inList";
ParentChange { target: image; parent: delegateItem; x: 2; y: 2; width: 75; height: 75 }
PropertyChanges { target: image; z: 1 }
PropertyChanges { target: delegateItem; DelegateModel.inItems: true }
PropertyChanges {
image.z: 1
delegateItem.DelegateModel.inItems: true
}
}
]

2
examples/quick/views/listview/content/TextButton.qml
View File

@ -80,7 +80,7 @@ Rectangle {
states: State {
name: "pressed"
when: mouseArea.pressed
PropertyChanges { target: gradientStop; color: "#333333" }
PropertyChanges { gradientStop.color: "#333333" }
}
}

29
examples/quick/views/listview/expandingdelegates.qml
View File

@ -195,16 +195,33 @@ Rectangle {
states: State {
name: "Details"
PropertyChanges { target: background; color: "white" }
PropertyChanges { target: recipeImage; width: 130; height: 130 } // Make picture bigger
PropertyChanges { target: recipe; detailsOpacity: 1; x: 0 } // Make details visible
PropertyChanges { target: recipe; height: listView.height } // Fill the entire list area with the detailed view
PropertyChanges {
background.color: "white"
recipeImage {
// Make picture bigger
width: 130
height: 130
}
recipe {
// Make details visible
detailsOpacity: 1
x: 0
// Fill the entire list area with the detailed view
height: listView.height
}
}
// Move the list so that this item is at the top.
PropertyChanges { target: recipe.ListView.view; explicit: true; contentY: recipe.y }
PropertyChanges {
recipe.ListView.view.contentY: recipe.y
explicit: true;
}
// Disallow flicking while we're in detailed view
PropertyChanges { target: recipe.ListView.view; interactive: false }
PropertyChanges {
recipe.ListView.view.interactive: false
}
}
transitions: Transition {

2
examples/quick/views/listview/highlight.qml
View File

@ -78,7 +78,7 @@ Rectangle {
states: State {
name: "Current"
when: pet.ListView.isCurrentItem
PropertyChanges { target: pet; x: 20 }
PropertyChanges { pet.x: 20 }
}
transitions: Transition {
NumberAnimation { properties: "x"; duration: 200 }

2
examples/quickcontrols2/contactlist/ContactDelegate.ui.qml
View File

@ -119,6 +119,8 @@ ItemDelegate {
when: delegate.checked
PropertyChanges {
// TODO: When Qt Design Studio supports generalized grouped properties, change to:
// grid.visible: true
target: grid
visible: true
}

9
examples/quickcontrols2/flatstyle/imports/Flat/Button.qml
View File

@ -77,16 +77,12 @@ T.Button {
State {
name: "normal"
when: !control.down
PropertyChanges {
target: buttonBackground
}
},
State {
name: "down"
when: control.down
PropertyChanges {
target: buttonBackground
border.color: Theme.mainColorDarker
buttonBackground.border.color: Theme.mainColorDarker
}
}
]
@ -112,8 +108,7 @@ T.Button {
name: "down"
when: control.down
PropertyChanges {
target: textItem
color: Theme.mainColorDarker
textItem.color: Theme.mainColorDarker
}
}
]

15
examples/quickcontrols2/flatstyle/imports/Flat/CheckBox.qml
View File

@ -93,8 +93,7 @@ T.CheckBox {
when: control.checked && !control.down
PropertyChanges {
target: rectangle
visible: true
rectangle.visible: true
}
},
State {
@ -102,13 +101,8 @@ T.CheckBox {
when: !control.checked && control.down
PropertyChanges {
target: rectangle
color: Theme.mainColorDarker
}
PropertyChanges {
target: checkboxHandle
border.color: Theme.mainColorDarker
rectangle.color: Theme.mainColorDarker
checkboxHandle.border.color: Theme.mainColorDarker
}
},
State {
@ -117,8 +111,7 @@ T.CheckBox {
when: control.checked && control.down
PropertyChanges {
target: rectangle
visible: true
rectangle.visible: true
}
}
]

33
examples/quickcontrols2/flatstyle/imports/Flat/Switch.qml
View File

@ -97,14 +97,11 @@ T.Switch {
when: control.checked && !control.down
PropertyChanges {
target: switchHandle
color: Theme.mainColor
border.color: Theme.mainColor
}
PropertyChanges {
target: rectangle
x: parent.width - width
switchHandle {
color: Theme.mainColor
border.color: Theme.mainColor
}
rectangle.x: parent.width - width
}
},
@ -113,8 +110,7 @@ T.Switch {
when: !control.checked && control.down
PropertyChanges {
target: rectangle
color: Theme.light
rectangle.color: Theme.light
}
},
@ -124,15 +120,14 @@ T.Switch {
when: control.checked && control.down
PropertyChanges {
target: rectangle
x: parent.width - width
color: Theme.light
}
PropertyChanges {
target: switchHandle
color: Theme.mainColorDarker
border.color: Theme.mainColorDarker
rectangle {
x: parent.width - width
color: Theme.light
}
switchHandle {
color: Theme.mainColorDarker
border.color: Theme.mainColorDarker
}
}
}
]