diff options
| -rw-r--r-- | examples/declarative/layouts/layouts.qml | 10 | ||||
| -rw-r--r-- | examples/declarative/listview/dynamic.qml | 15 | ||||
| -rw-r--r-- | examples/declarative/listview/highlight.qml | 1 | ||||
| -rw-r--r-- | examples/declarative/listview/listview-example.qml | 16 | ||||
| -rw-r--r-- | examples/declarative/progressbar/content/ProgressBar.qml | 8 | ||||
| -rw-r--r-- | examples/declarative/searchbox/SearchBox.qml | 6 | ||||
| -rw-r--r-- | examples/declarative/states/states.qml | 50 | ||||
| -rw-r--r-- | examples/declarative/states/transitions.qml | 69 | ||||
| -rw-r--r-- | examples/declarative/tic-tac-toe/content/Button.qml | 8 | ||||
| -rw-r--r-- | examples/declarative/tic-tac-toe/tic-tac-toe.qml | 10 |
10 files changed, 110 insertions, 83 deletions
diff --git a/examples/declarative/layouts/layouts.qml b/examples/declarative/layouts/layouts.qml index 81f9aed..391eab7 100644 --- a/examples/declarative/layouts/layouts.qml +++ b/examples/declarative/layouts/layouts.qml @@ -1,15 +1,15 @@ import Qt 4.7 -import Qt.widgets 4.6 +import Qt.widgets 4.7 Item { id: resizable - width:400 - height:400 + width: 400 + height: 400 QGraphicsWidget { - size.width:parent.width - size.height:parent.height + size.width: parent.width + size.height: parent.height layout: QGraphicsLinearLayout { LayoutItem { diff --git a/examples/declarative/listview/dynamic.qml b/examples/declarative/listview/dynamic.qml index efd0e10..236a9c5 100644 --- a/examples/declarative/listview/dynamic.qml +++ b/examples/declarative/listview/dynamic.qml @@ -3,6 +3,7 @@ import "content" import "../scrollbar" Rectangle { + id: container width: 640; height: 480 color: "#343434" @@ -54,7 +55,7 @@ Rectangle { id: fruitDelegate Item { - width: parent.width; height: 55 + width: container.width; height: 55 Column { id: moveButtons @@ -174,9 +175,9 @@ Rectangle { anchors.fill: parent onClicked: { fruitModel.append({ - "name":"Pizza Margarita", - "cost":5.95, - "attributes":[{"description": "Cheese"},{"description": "Tomato"}] + "name": "Pizza Margarita", + "cost": 5.95, + "attributes": [{"description": "Cheese"},{"description": "Tomato"}] }) } } @@ -189,9 +190,9 @@ Rectangle { anchors.fill: parent; onClicked: { fruitModel.insert(0, { - "name":"Pizza Supreme", - "cost":9.95, - "attributes":[{"description": "Cheese"},{"description": "Tomato"},{"description": "The Works"}] + "name": "Pizza Supreme", + "cost": 9.95, + "attributes": [{"description": "Cheese"},{"description": "Tomato"},{"description": "The Works"}] }) } } diff --git a/examples/declarative/listview/highlight.qml b/examples/declarative/listview/highlight.qml index 2f7f2ca..50ba2f7 100644 --- a/examples/declarative/listview/highlight.qml +++ b/examples/declarative/listview/highlight.qml @@ -43,6 +43,7 @@ Rectangle { SpringFollow on y { to: list1.currentItem.y; spring: 3; damping: 0.1 } } } + ListView { id: list1 width: 200; height: parent.height diff --git a/examples/declarative/listview/listview-example.qml b/examples/declarative/listview/listview-example.qml index 9409356..6feedf6 100644 --- a/examples/declarative/listview/listview-example.qml +++ b/examples/declarative/listview/listview-example.qml @@ -58,25 +58,33 @@ Rectangle { ListView { id: list1 width: 200; height: parent.height - model: MyPetsModel; delegate: petDelegate + model: MyPetsModel + delegate: petDelegate + highlight: petHighlight currentIndex: list3.currentIndex focus: true } + ListView { id: list2 x: 200; width: 200; height: parent.height - model: MyPetsModel; delegate: petDelegate + model: MyPetsModel + delegate: petDelegate + highlight: petHighlight currentIndex: list1.currentIndex preferredHighlightBegin: 80; preferredHighlightEnd: 220 highlightRangeMode: "ApplyRange" } + ListView { id: list3 x: 400; width: 200; height: parent.height - model: MyPetsModel; delegate: petDelegate - highlight: petHighlight + model: MyPetsModel + delegate: petDelegate + + highlight: Rectangle { color: "lightsteelblue" } currentIndex: list1.currentIndex preferredHighlightBegin: 125; preferredHighlightEnd: 125 highlightRangeMode: "StrictlyEnforceRange" diff --git a/examples/declarative/progressbar/content/ProgressBar.qml b/examples/declarative/progressbar/content/ProgressBar.qml index 6f13335..bc36df5 100644 --- a/examples/declarative/progressbar/content/ProgressBar.qml +++ b/examples/declarative/progressbar/content/ProgressBar.qml @@ -6,8 +6,8 @@ Item { property int minimum: 0 property int maximum: 100 property int value: 0 - property alias color: g1.color - property alias secondColor: g2.color + property alias color: gradient1.color + property alias secondColor: gradient2.color width: 250; height: 23 clip: true @@ -29,8 +29,8 @@ Item { anchors { left: parent.left; top: parent.top; bottom: parent.bottom; leftMargin: 3; topMargin: 3; bottomMargin: 3 } radius: 1 gradient: Gradient { - GradientStop { id: g1; position: 0.0 } - GradientStop { id: g2; position: 1.0 } + GradientStop { id: gradient1; position: 0.0 } + GradientStop { id: gradient2; position: 1.0 } } } diff --git a/examples/declarative/searchbox/SearchBox.qml b/examples/declarative/searchbox/SearchBox.qml index adeddd1..aae7ee9 100644 --- a/examples/declarative/searchbox/SearchBox.qml +++ b/examples/declarative/searchbox/SearchBox.qml @@ -21,7 +21,9 @@ FocusScope { id: typeSomething anchors.fill: parent; anchors.leftMargin: 8 verticalAlignment: Text.AlignVCenter - text: "Type something..."; color: "gray"; font.italic: true + text: "Type something..." + color: "gray" + font.italic: true } MouseArea { anchors.fill: parent; onClicked: focusScope.focus = true } @@ -29,7 +31,7 @@ FocusScope { TextInput { id: textInput anchors { left: parent.left; leftMargin: 8; verticalCenter: parent.verticalCenter } - focus: if (1) true + focus: true } Image { diff --git a/examples/declarative/states/states.qml b/examples/declarative/states/states.qml index f8c1dd5..4429e78 100644 --- a/examples/declarative/states/states.qml +++ b/examples/declarative/states/states.qml @@ -5,53 +5,57 @@ Rectangle { width: 640; height: 480 color: "#343434" - // A target region. Clicking in here sets the state to the default state + Image { + id: userIcon + x: topLeftRect.x; y: topLeftRect.y + source: "user.png" + } + Rectangle { - id: initialPosition + id: topLeftRect + anchors { left: parent.left; top: parent.top; leftMargin: 10; topMargin: 20 } width: 64; height: 64 - radius: 6 - color: "Transparent"; border.color: "Gray" + color: "Transparent"; border.color: "Gray"; radius: 6 + // Clicking in here sets the state to the default state, returning the image to + // its initial position MouseArea { anchors.fill: parent; onClicked: page.state = '' } } - // Another target region. Clicking in here sets the state to 'Position1' Rectangle { - id: position1 + id: middleRightRect + anchors { right: parent.right; verticalCenter: parent.verticalCenter; rightMargin: 20 } width: 64; height: 64 - radius: 6 - color: "Transparent"; border.color: "Gray" + color: "Transparent"; border.color: "Gray"; radius: 6 - MouseArea { anchors.fill: parent; onClicked: page.state = 'Position1' } + // Clicking in here sets the state to 'middleRight' + MouseArea { anchors.fill: parent; onClicked: page.state = 'middleRight' } } - // Another target region. Clicking in here sets the state to 'Position2' Rectangle { - id: position2 + id: bottomLeftRect + anchors { left: parent.left; bottom: parent.bottom; leftMargin: 10; bottomMargin: 20 } width: 64; height: 64 - radius: 6 - color: "Transparent"; border.color: "Gray" + color: "Transparent"; border.color: "Gray"; radius: 6 - MouseArea { anchors.fill: parent; onClicked: page.state = 'Position2' } + // Clicking in here sets the state to 'bottomLeft' + MouseArea { anchors.fill: parent; onClicked: page.state = 'bottomLeft' } } - // The image which will be moved when my state changes - Image { id: user; source: "user.png"; x: initialPosition.x; y: initialPosition.y } - states: [ - // In state 'Position1', change the 'user' item position to rect2's position. + // In state 'middleRight', move the image to middleRightRect State { - name: "Position1" - PropertyChanges { target: user; x: position1.x; y: position1.y } + name: "middleRight" + PropertyChanges { target: userIcon; x: middleRightRect.x; y: middleRightRect.y } }, - // In state 'Position2', change the 'user' item position to rect3's position. + // In state 'bottomLeft', move the image to bottomLeftRect State { - name: "Position2" - PropertyChanges { target: user; x: position2.x; y: position2.y } + name: "bottomLeft" + PropertyChanges { target: userIcon; x: bottomLeftRect.x; y: bottomLeftRect.y } } ] } diff --git a/examples/declarative/states/transitions.qml b/examples/declarative/states/transitions.qml index b475333..d1b1dd6 100644 --- a/examples/declarative/states/transitions.qml +++ b/examples/declarative/states/transitions.qml @@ -1,74 +1,87 @@ import Qt 4.7 +/* + This is exactly the same as states.qml, except that we have appended + a set of transitions to apply animations when the item changes + between each state. +*/ + Rectangle { id: page width: 640; height: 480 color: "#343434" - // A target region. Clicking in here sets the state to the default state + Image { + id: userIcon + x: topLeftRect.x; y: topLeftRect.y + source: "user.png" + } + Rectangle { - id: initialPosition + id: topLeftRect + anchors { left: parent.left; top: parent.top; leftMargin: 10; topMargin: 20 } width: 64; height: 64 - radius: 6 - color: "Transparent"; border.color: "Gray" + color: "Transparent"; border.color: "Gray"; radius: 6 + // Clicking in here sets the state to the default state, returning the image to + // its initial position MouseArea { anchors.fill: parent; onClicked: page.state = '' } } - // Another target region. Clicking in here sets the state to 'Position1' Rectangle { - id: position1 + id: middleRightRect + anchors { right: parent.right; verticalCenter: parent.verticalCenter; rightMargin: 20 } width: 64; height: 64 - radius: 6 - color: "Transparent"; border.color: "Gray" + color: "Transparent"; border.color: "Gray"; radius: 6 - MouseArea { anchors.fill: parent; onClicked: page.state = 'Position1' } + // Clicking in here sets the state to 'middleRight' + MouseArea { anchors.fill: parent; onClicked: page.state = 'middleRight' } } - // Another target region. Clicking in here sets the state to 'Position2' Rectangle { - id: position2 + id: bottomLeftRect + anchors { left: parent.left; bottom: parent.bottom; leftMargin: 10; bottomMargin: 20 } width: 64; height: 64 - radius: 6 - color: "Transparent"; border.color: "Gray" + color: "Transparent"; border.color: "Gray"; radius: 6 - MouseArea { anchors.fill: parent; onClicked: page.state = 'Position2' } + // Clicking in here sets the state to 'bottomLeft' + MouseArea { anchors.fill: parent; onClicked: page.state = 'bottomLeft' } } - // The image which will be moved when my state changes - Image { id: user; source: "user.png"; x: initialPosition.x; y: initialPosition.y } - states: [ - // In state 'Position1', change the 'user' item position to rect2's position. + // In state 'middleRight', move the image to middleRightRect State { - name: "Position1" - PropertyChanges { target: user; x: position1.x; y: position1.y } + name: "middleRight" + PropertyChanges { target: userIcon; x: middleRightRect.x; y: middleRightRect.y } }, - // In state 'Position2', change the 'user' item position to rect3's position. + // In state 'bottomLeft', move the image to bottomLeftRect State { - name: "Position2" - PropertyChanges { target: user; x: position2.x; y: position2.y } + name: "bottomLeft" + PropertyChanges { target: userIcon; x: bottomLeftRect.x; y: bottomLeftRect.y } } ] - // transitions define how the properties change. + // Transitions define how the properties change when the item moves between each state transitions: [ - // When transitioning to 'Position1' move x,y over a duration of 1 second, + + // When transitioning to 'middleRight' move x,y over a duration of 1 second, // with OutBounce easing function. Transition { - from: "*"; to: "Position1" + from: "*"; to: "middleRight" NumberAnimation { properties: "x,y"; easing.type: "OutBounce"; duration: 1000 } }, - // When transitioning to 'Position2' move x,y over a duration of 2 seconds, + + // When transitioning to 'bottomLeft' move x,y over a duration of 2 seconds, // with InOutQuad easing function. Transition { - from: "*"; to: "Position2" + from: "*"; to: "bottomLeft" NumberAnimation { properties: "x,y"; easing.type: "InOutQuad"; duration: 2000 } }, + // For any other state changes move x,y linearly over duration of 200ms. Transition { NumberAnimation { properties: "x,y"; duration: 200 } diff --git a/examples/declarative/tic-tac-toe/content/Button.qml b/examples/declarative/tic-tac-toe/content/Button.qml index 56e5ecd..ecf18cd 100644 --- a/examples/declarative/tic-tac-toe/content/Button.qml +++ b/examples/declarative/tic-tac-toe/content/Button.qml @@ -9,7 +9,7 @@ Rectangle { property string darkCol: "darkgray" property string lightCol: "white" - width: txtItem.width + 20; height: txtItem.height + 6 + width: buttonLabel.width + 20; height: buttonLabel.height + 6 border { width: 1; color: Qt.darker(mainCol) } radius: 8; color: mainCol @@ -28,12 +28,10 @@ Rectangle { MouseArea { id: mr; anchors.fill: parent; onClicked: container.clicked() } Text { - id: txtItem + id: buttonLabel anchors.centerIn: container text: container.text; - color: "blue" - style: Text.Outline; styleColor: "white" - font.pixelSize: 14; font.bold: true + font.pixelSize: 14 } } diff --git a/examples/declarative/tic-tac-toe/tic-tac-toe.qml b/examples/declarative/tic-tac-toe/tic-tac-toe.qml index 62bb56f..dd13052 100644 --- a/examples/declarative/tic-tac-toe/tic-tac-toe.qml +++ b/examples/declarative/tic-tac-toe/tic-tac-toe.qml @@ -5,8 +5,8 @@ import "content/tic-tac-toe.js" as Logic Item { id: game - property bool show: false; - property real difficulty: 1.0; //chance it will actually think + property bool show: false + property real difficulty: 1.0 //chance it will actually think width: 440 height: 480 @@ -50,17 +50,17 @@ Item { Button { text: "Hard" - onClicked: game.difficulty=1.0; + onClicked: game.difficulty = 1.0; down: game.difficulty == 1.0 } Button { text: "Moderate" - onClicked: game.difficulty=0.8; + onClicked: game.difficulty = 0.8; down: game.difficulty == 0.8 } Button { text: "Easy" - onClicked: game.difficulty=0.2; + onClicked: game.difficulty = 0.2; down: game.difficulty == 0.2 } } |