Make views example more in line with our guidelines
The views example is an old example, which shows off many different
features related to ListView, GridView and the QML models.
Unfortunately, there are currently a few things that are broken in it.
One of those things is the FlickrRssModel, which no longer works,
because flickr changed their web API.
This patch makes some improvements, but it's unfortunately not fixing
everything.
The list of fixes are the following:
- Fix a good number of qmllint warnings. Unfortunately, there seems to
be a good number of false positives that remain unfixed.
- Use qsTr() in some places. But I've not adopted it everywhere.
- sections.qml now uses Qt Quick Controls CheckBox'es instead of a
custom component.
- Property bindings are now declared on separate lines.
Change-Id: Idfb563f4bd658dc70c1b9975549e872e7c25449e
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
(cherry picked from commit c4d520c200)
Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>
This commit is contained in:
Oliver Eftevaag
Qt Cherry-pick Bot
parent
546eb1ac99
commit
f6e1e53c0b
|
|
@ -19,14 +19,11 @@ qt_standard_project_setup(REQUIRES 6.5)
|
|||
add_subdirectory("../shared" "shared")
|
||||
|
||||
qt_add_executable(viewsexample
|
||||
WIN32
|
||||
MACOSX_BUNDLE
|
||||
main.cpp
|
||||
)
|
||||
|
||||
set_target_properties(viewsexample PROPERTIES
|
||||
WIN32_EXECUTABLE TRUE
|
||||
MACOSX_BUNDLE TRUE
|
||||
)
|
||||
|
||||
target_link_libraries(viewsexample PRIVATE
|
||||
Qt6::Core
|
||||
Qt6::Gui
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ import QtQml
|
|||
import QtQuick
|
||||
import QtQml.Models
|
||||
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
|
|
@ -38,14 +40,33 @@ Item {
|
|||
|
||||
Drag.active: visibleContainer.drag.active
|
||||
|
||||
anchors { horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter }
|
||||
anchors {
|
||||
horizontalCenter: parent.horizontalCenter
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
states: State {
|
||||
when: visibleContainer.drag.active
|
||||
AnchorChanges { target: draggable; anchors { horizontalCenter: undefined; verticalCenter: undefined} }
|
||||
ParentChange { target: selectionView; parent: draggable; x: 0; y: 0 }
|
||||
PropertyChanges { root.dragging: true }
|
||||
ParentChange { target: draggable; parent: root }
|
||||
AnchorChanges {
|
||||
target: draggable
|
||||
anchors {
|
||||
horizontalCenter: undefined
|
||||
verticalCenter: undefined
|
||||
}
|
||||
}
|
||||
ParentChange {
|
||||
target: selectionView
|
||||
parent: draggable
|
||||
x: 0
|
||||
y: 0
|
||||
}
|
||||
PropertyChanges {
|
||||
root.dragging: true
|
||||
}
|
||||
ParentChange {
|
||||
target: draggable
|
||||
parent: root
|
||||
}
|
||||
}
|
||||
}
|
||||
DropArea {
|
||||
|
|
@ -72,8 +93,16 @@ Item {
|
|||
radius: 8
|
||||
|
||||
gradient: Gradient {
|
||||
GradientStop { id: gradientStart; position: 0.0; color: "#8AC953" }
|
||||
GradientStop { id: gradientEnd; position: 1.0; color: "#8BC953" }
|
||||
GradientStop {
|
||||
id: gradientStart
|
||||
position: 0.0
|
||||
color: "#8AC953"
|
||||
}
|
||||
GradientStop {
|
||||
id: gradientEnd
|
||||
position: 1.0
|
||||
color: "#8BC953"
|
||||
}
|
||||
}
|
||||
|
||||
border.width: 2
|
||||
|
|
@ -91,8 +120,13 @@ Item {
|
|||
}
|
||||
|
||||
Rectangle {
|
||||
anchors { right: parent.right; top: parent.top; margins: 3 }
|
||||
width: 12; height: 12
|
||||
anchors {
|
||||
right: parent.right
|
||||
top: parent.top
|
||||
margins: 3
|
||||
}
|
||||
width: 12
|
||||
height: 12
|
||||
color: packageRoot.DelegateModel.inSelected ? "black" : "white"
|
||||
radius: 6
|
||||
|
||||
|
|
@ -108,27 +142,55 @@ Item {
|
|||
states: [
|
||||
State {
|
||||
name: "selected"
|
||||
ParentChange { target: content; parent: selectionContainer; x: 3; y: 3 }
|
||||
ParentChange {
|
||||
target: content
|
||||
parent: selectionContainer
|
||||
x: 3
|
||||
y: 3
|
||||
}
|
||||
PropertyChanges {
|
||||
packageRoot.DelegateModel.inItems: visibleContainer.drag.active
|
||||
gradientStart.color: "#017423"
|
||||
}
|
||||
PropertyChanges { gradientStart.color: "#007423" }
|
||||
PropertyChanges {
|
||||
gradientStart.color: "#007423"
|
||||
}
|
||||
}, State {
|
||||
name: "visible"
|
||||
PropertyChanges { packageRoot.DelegateModel.inItems: true }
|
||||
ParentChange { target: content; parent: visibleContainer; x: 3; y: 3 }
|
||||
PropertyChanges { gradientStart.color: "#8AC953" }
|
||||
PropertyChanges { gradientStart.color: "#8BC953" }
|
||||
PropertyChanges {
|
||||
packageRoot.DelegateModel.inItems: true
|
||||
}
|
||||
ParentChange {
|
||||
target: content
|
||||
parent: visibleContainer
|
||||
x: 3
|
||||
y: 3
|
||||
}
|
||||
PropertyChanges {
|
||||
gradientStart.color: "#8AC953"
|
||||
}
|
||||
PropertyChanges {
|
||||
gradientStart.color: "#8BC953"
|
||||
}
|
||||
}
|
||||
]
|
||||
transitions: Transition {
|
||||
PropertyAction { target: packageRoot; properties: "DelegateModel.inItems" }
|
||||
PropertyAction {
|
||||
target: packageRoot
|
||||
properties: "DelegateModel.inItems"
|
||||
}
|
||||
ParentAnimation {
|
||||
target: content
|
||||
NumberAnimation { target: content; properties: "x,y"; duration: 500 }
|
||||
NumberAnimation {
|
||||
target: content
|
||||
properties: "x,y"
|
||||
duration: 500
|
||||
}
|
||||
}
|
||||
ColorAnimation {
|
||||
targets: [gradientStart, gradientEnd]
|
||||
duration: 500
|
||||
}
|
||||
ColorAnimation { targets: [gradientStart, gradientEnd]; duration: 500 }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -139,7 +201,10 @@ Item {
|
|||
model: 35
|
||||
delegate: packageDelegate
|
||||
|
||||
groups: DelegateModelGroup { id: selectedItems; name: "selected" }
|
||||
groups: DelegateModelGroup {
|
||||
id: selectedItems
|
||||
name: "selected"
|
||||
}
|
||||
|
||||
Component.onCompleted: parts.selection.filterOnGroup = "selected"
|
||||
}
|
||||
|
|
@ -155,13 +220,16 @@ Item {
|
|||
path: Path {
|
||||
startX: 0
|
||||
startY: 0
|
||||
PathLine { x: 64; y: 64 }
|
||||
PathLine {
|
||||
x: 64
|
||||
y: 64
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
GridView {
|
||||
id: itemsView
|
||||
anchors { fill: parent }
|
||||
anchors.fill: parent
|
||||
cellWidth: 64
|
||||
cellHeight: 64
|
||||
model: visualModel.parts.visible
|
||||
|
|
|
|||
|
|
@ -5,12 +5,15 @@ import QtQuick
|
|||
import QtQml.Models
|
||||
import shared as Shared
|
||||
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
Rectangle {
|
||||
id: root
|
||||
|
||||
property Item displayItem: null
|
||||
|
||||
width: 300; height: 400
|
||||
width: 300
|
||||
height: 400
|
||||
|
||||
color: "black"
|
||||
|
||||
|
|
@ -25,13 +28,17 @@ Rectangle {
|
|||
delegate: Item {
|
||||
id: delegateItem
|
||||
|
||||
width: 76; height: 76
|
||||
width: 76
|
||||
height: 76
|
||||
|
||||
required property string thumbnail
|
||||
|
||||
Rectangle {
|
||||
id: image
|
||||
x: 0; y: 0; width: 76; height: 76
|
||||
x: 0
|
||||
y: 0
|
||||
width: 76
|
||||
height: 76
|
||||
border.width: 1
|
||||
border.color: "white"
|
||||
color: "black"
|
||||
|
|
@ -56,7 +63,14 @@ Rectangle {
|
|||
State {
|
||||
when: root.displayItem === delegateItem
|
||||
name: "inDisplay";
|
||||
ParentChange { target: image; parent: imageContainer; x: 75; y: 75; width: 150; height: 150 }
|
||||
ParentChange {
|
||||
target: image
|
||||
parent: imageContainer
|
||||
x: 75
|
||||
y: 75
|
||||
width: 150
|
||||
height: 150
|
||||
}
|
||||
PropertyChanges {
|
||||
image.z: 2
|
||||
delegateItem.DelegateModel.inItems: false
|
||||
|
|
@ -65,7 +79,14 @@ Rectangle {
|
|||
State {
|
||||
when: root.displayItem !== delegateItem
|
||||
name: "inList";
|
||||
ParentChange { target: image; parent: delegateItem; x: 2; y: 2; width: 75; height: 75 }
|
||||
ParentChange {
|
||||
target: image
|
||||
parent: delegateItem
|
||||
x: 2
|
||||
y: 2
|
||||
width: 75
|
||||
height: 75
|
||||
}
|
||||
PropertyChanges {
|
||||
image.z: 1
|
||||
delegateItem.DelegateModel.inItems: true
|
||||
|
|
@ -77,11 +98,19 @@ Rectangle {
|
|||
Transition {
|
||||
from: "inList"
|
||||
SequentialAnimation {
|
||||
PropertyAction { target: delegateItem; property: "DelegateModel.inPersistedItems"; value: true }
|
||||
PropertyAction {
|
||||
target: delegateItem
|
||||
property: "DelegateModel.inPersistedItems"
|
||||
value: true
|
||||
}
|
||||
ParentAnimation {
|
||||
target: image;
|
||||
via: root
|
||||
NumberAnimation { target: image; properties: "x,y,width,height"; duration: 1000 }
|
||||
NumberAnimation {
|
||||
target: image
|
||||
properties: "x,y,width,height"
|
||||
duration: 1000
|
||||
}
|
||||
}
|
||||
}
|
||||
}, Transition {
|
||||
|
|
@ -89,9 +118,17 @@ Rectangle {
|
|||
SequentialAnimation {
|
||||
ParentAnimation {
|
||||
target: image
|
||||
NumberAnimation { target: image; properties: "x,y,width,height"; duration: 1000 }
|
||||
NumberAnimation {
|
||||
target: image
|
||||
properties: "x,y,width,height"
|
||||
duration: 1000
|
||||
}
|
||||
}
|
||||
PropertyAction {
|
||||
target: delegateItem
|
||||
property: "DelegateModel.inPersistedItems"
|
||||
value: false
|
||||
}
|
||||
PropertyAction { target: delegateItem; property: "DelegateModel.inPersistedItems"; value: false }
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
import QtQuick
|
||||
|
||||
Rectangle {
|
||||
width: 300; height: 400
|
||||
width: 300
|
||||
height: 400
|
||||
color: "white"
|
||||
|
||||
ListModel {
|
||||
|
|
@ -20,26 +21,36 @@ Rectangle {
|
|||
//! [0]
|
||||
GridView {
|
||||
anchors.fill: parent
|
||||
cellWidth: 100; cellHeight: 100
|
||||
cellWidth: 100
|
||||
cellHeight: 100
|
||||
focus: true
|
||||
model: appModel
|
||||
|
||||
highlight: Rectangle { width: 80; height: 80; color: "lightsteelblue" }
|
||||
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
|
||||
width: 100
|
||||
height: 100
|
||||
|
||||
Image {
|
||||
id: myIcon
|
||||
y: 20; anchors.horizontalCenter: parent.horizontalCenter
|
||||
y: 20
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
source: parent.icon
|
||||
}
|
||||
Text {
|
||||
anchors { top: myIcon.bottom; horizontalCenter: parent.horizontalCenter }
|
||||
anchors {
|
||||
top: myIcon.bottom
|
||||
horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
text: parent.name
|
||||
}
|
||||
MouseArea {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ Image {
|
|||
|
||||
property int repeatDelay: 300
|
||||
property int repeatDuration: 75
|
||||
property bool pressed: false
|
||||
property bool pressed
|
||||
|
||||
signal clicked
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@
|
|||
import QtQuick
|
||||
|
||||
Text {
|
||||
font.pixelSize: 12
|
||||
font.pointSize: 9
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,8 @@ Item {
|
|||
|
||||
Rectangle {
|
||||
id: header
|
||||
width: parent.width; height: 40
|
||||
width: parent.width
|
||||
height: 40
|
||||
color: "#AAFF0000"
|
||||
|
||||
Text {
|
||||
|
|
@ -47,7 +48,8 @@ Item {
|
|||
Rectangle {
|
||||
id: footer
|
||||
anchors.bottom: parent.bottom
|
||||
width: parent.width; height: 40
|
||||
width: parent.width
|
||||
height: 40
|
||||
color: "#AAFF0000"
|
||||
|
||||
Text {
|
||||
|
|
|
|||
|
|
@ -6,9 +6,12 @@ import "content"
|
|||
// This example shows how items can be dynamically added to and removed from
|
||||
// a ListModel, and how these list modifications can be animated.
|
||||
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
Rectangle {
|
||||
id: container
|
||||
width: 500; height: 400
|
||||
width: 500
|
||||
height: 400
|
||||
color: "#343434"
|
||||
|
||||
// The model:
|
||||
|
|
@ -16,30 +19,48 @@ Rectangle {
|
|||
id: fruitModel
|
||||
|
||||
ListElement {
|
||||
name: "Apple"; cost: 2.45
|
||||
name: "Apple"
|
||||
cost: 2.45
|
||||
attributes: [
|
||||
ListElement { description: "Core" },
|
||||
ListElement { description: "Deciduous" }
|
||||
ListElement {
|
||||
description: "Core"
|
||||
},
|
||||
ListElement {
|
||||
description: "Deciduous"
|
||||
}
|
||||
]
|
||||
}
|
||||
ListElement {
|
||||
name: "Banana"; cost: 1.95
|
||||
name: "Banana"
|
||||
cost: 1.95
|
||||
attributes: [
|
||||
ListElement { description: "Tropical" },
|
||||
ListElement { description: "Seedless" }
|
||||
ListElement {
|
||||
description: "Tropical"
|
||||
},
|
||||
ListElement {
|
||||
description: "Seedless"
|
||||
}
|
||||
]
|
||||
}
|
||||
ListElement {
|
||||
name: "Cumquat"; cost: 3.25
|
||||
name: "Cumquat"
|
||||
cost: 3.25
|
||||
attributes: [
|
||||
ListElement { description: "Citrus" }
|
||||
ListElement {
|
||||
description: "Citrus"
|
||||
}
|
||||
]
|
||||
}
|
||||
ListElement {
|
||||
name: "Durian"; cost: 9.95
|
||||
name: "Durian"
|
||||
cost: 9.95
|
||||
attributes: [
|
||||
ListElement { description: "Tropical" },
|
||||
ListElement { description: "Smelly" }
|
||||
ListElement {
|
||||
description: "Tropical"
|
||||
},
|
||||
ListElement {
|
||||
description: "Smelly"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -51,7 +72,8 @@ Rectangle {
|
|||
Item {
|
||||
//! [0]
|
||||
id: delegateItem
|
||||
width: listView.width; height: 80
|
||||
width: listView.width
|
||||
height: 80
|
||||
clip: true
|
||||
|
||||
required property int index
|
||||
|
|
@ -83,7 +105,7 @@ Rectangle {
|
|||
Column {
|
||||
anchors {
|
||||
left: arrows.right
|
||||
horizontalCenter: parent.horizontalCenter;
|
||||
horizontalCenter: parent.horizontalCenter
|
||||
bottom: parent.verticalCenter
|
||||
}
|
||||
|
||||
|
|
@ -155,18 +177,42 @@ Rectangle {
|
|||
//! [1]
|
||||
SequentialAnimation {
|
||||
id: addAnimation
|
||||
PropertyAction { target: delegateItem; property: "height"; value: 0 }
|
||||
NumberAnimation { target: delegateItem; property: "height"; to: 80; duration: 250; easing.type: Easing.InOutQuad }
|
||||
PropertyAction {
|
||||
target: delegateItem
|
||||
property: "height"
|
||||
value: 0
|
||||
}
|
||||
NumberAnimation {
|
||||
target: delegateItem
|
||||
property: "height"
|
||||
to: 80
|
||||
duration: 250
|
||||
easing.type: Easing.InOutQuad
|
||||
}
|
||||
}
|
||||
ListView.onAdd: addAnimation.start()
|
||||
|
||||
SequentialAnimation {
|
||||
id: removeAnimation
|
||||
PropertyAction { target: delegateItem; property: "ListView.delayRemove"; value: true }
|
||||
NumberAnimation { target: delegateItem; property: "height"; to: 0; duration: 250; easing.type: Easing.InOutQuad }
|
||||
PropertyAction {
|
||||
target: delegateItem
|
||||
property: "ListView.delayRemove"
|
||||
value: true
|
||||
}
|
||||
NumberAnimation {
|
||||
target: delegateItem
|
||||
property: "height"
|
||||
to: 0
|
||||
duration: 250
|
||||
easing.type: Easing.InOutQuad
|
||||
}
|
||||
|
||||
// Make sure delayRemove is set back to false so that the item can be destroyed
|
||||
PropertyAction { target: delegateItem; property: "ListView.delayRemove"; value: false }
|
||||
PropertyAction {
|
||||
target: delegateItem
|
||||
property: "ListView.delayRemove"
|
||||
value: false
|
||||
}
|
||||
}
|
||||
ListView.onRemove: removeAnimation.start()
|
||||
}
|
||||
|
|
@ -177,8 +223,10 @@ Rectangle {
|
|||
ListView {
|
||||
id: listView
|
||||
anchors {
|
||||
left: parent.left; top: parent.top;
|
||||
right: parent.right; bottom: buttons.top;
|
||||
left: parent.left
|
||||
top: parent.top
|
||||
right: parent.right
|
||||
bottom: buttons.top
|
||||
margins: 20
|
||||
}
|
||||
model: fruitModel
|
||||
|
|
@ -187,11 +235,15 @@ Rectangle {
|
|||
|
||||
Row {
|
||||
id: buttons
|
||||
anchors { left: parent.left; bottom: parent.bottom; margins: 20 }
|
||||
anchors {
|
||||
left: parent.left
|
||||
bottom: parent.bottom
|
||||
margins: 20
|
||||
}
|
||||
spacing: 10
|
||||
|
||||
TextButton {
|
||||
text: "Add an item"
|
||||
text: qsTr("Add an item")
|
||||
onClicked: {
|
||||
fruitModel.append({
|
||||
"name": "Pizza Margarita",
|
||||
|
|
@ -202,7 +254,7 @@ Rectangle {
|
|||
}
|
||||
|
||||
TextButton {
|
||||
text: "Remove all items"
|
||||
text: qsTr("Remove all items")
|
||||
onClicked: fruitModel.clear()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@ import "content"
|
|||
|
||||
Rectangle {
|
||||
id: page
|
||||
width: 400; height: 240
|
||||
width: 400
|
||||
height: 240
|
||||
color: "black"
|
||||
|
||||
// Delegate for the recipes. This delegate has two modes:
|
||||
|
|
@ -31,13 +32,16 @@ Rectangle {
|
|||
// want to fade.
|
||||
property real detailsOpacity : 0
|
||||
//! [0]
|
||||
width: listView.width
|
||||
width: ListView.view.width
|
||||
height: 70
|
||||
|
||||
// A simple rounded rectangle for the background
|
||||
Rectangle {
|
||||
id: background
|
||||
x: 2; y: 2; width: parent.width - x*2; height: parent.height - y*2
|
||||
x: 2
|
||||
y: 2
|
||||
width: parent.width - x * 2
|
||||
height: parent.height - y * 2
|
||||
color: "ivory"
|
||||
border.color: "orange"
|
||||
radius: 5
|
||||
|
|
@ -58,26 +62,32 @@ Rectangle {
|
|||
|
||||
Row {
|
||||
id: topLayout
|
||||
x: 10; y: 10; height: recipeImage.height; width: parent.width
|
||||
x: 10
|
||||
y: 10
|
||||
height: recipeImage.height
|
||||
width: parent.width
|
||||
spacing: 10
|
||||
|
||||
Image {
|
||||
id: recipeImage
|
||||
width: 50; height: 50
|
||||
width: 50
|
||||
height: 50
|
||||
source: recipe.picture
|
||||
}
|
||||
//! [1]
|
||||
Column {
|
||||
width: background.width - recipeImage.width - 20; height: recipeImage.height
|
||||
width: background.width - recipeImage.width - 20
|
||||
height: recipeImage.height
|
||||
spacing: 5
|
||||
|
||||
Text {
|
||||
text: recipe.title
|
||||
font.bold: true; font.pointSize: 16
|
||||
font.bold: true
|
||||
font.pointSize: 16
|
||||
}
|
||||
|
||||
SmallText {
|
||||
text: "Ingredients"
|
||||
text: qsTr("Ingredients")
|
||||
font.bold: true
|
||||
opacity: recipe.detailsOpacity
|
||||
}
|
||||
|
|
@ -94,22 +104,32 @@ Rectangle {
|
|||
//! [2]
|
||||
Item {
|
||||
id: details
|
||||
x: 10; width: parent.width - 20
|
||||
x: 10
|
||||
width: parent.width - 20
|
||||
|
||||
anchors { top: topLayout.bottom; topMargin: 10; bottom: parent.bottom; bottomMargin: 10 }
|
||||
anchors {
|
||||
top: topLayout.bottom
|
||||
topMargin: 10
|
||||
bottom: parent.bottom
|
||||
bottomMargin: 10
|
||||
}
|
||||
opacity: recipe.detailsOpacity
|
||||
//! [2]
|
||||
SmallText {
|
||||
id: methodTitle
|
||||
anchors.top: parent.top
|
||||
text: "Method"
|
||||
font.pointSize: 12; font.bold: true
|
||||
text: qsTr("Method")
|
||||
font.pointSize: 12
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
Flickable {
|
||||
id: flick
|
||||
width: parent.width
|
||||
anchors { top: methodTitle.bottom; bottom: parent.bottom }
|
||||
anchors {
|
||||
top: methodTitle.bottom
|
||||
bottom: parent.bottom
|
||||
}
|
||||
contentHeight: methodText.height
|
||||
clip: true
|
||||
|
||||
|
|
@ -122,13 +142,19 @@ Rectangle {
|
|||
}
|
||||
|
||||
Image {
|
||||
anchors { right: flick.right; top: flick.top }
|
||||
anchors {
|
||||
right: flick.right
|
||||
top: flick.top
|
||||
}
|
||||
source: "content/pics/moreUp.png"
|
||||
opacity: flick.atYBeginning ? 0 : 1
|
||||
}
|
||||
|
||||
Image {
|
||||
anchors { right: flick.right; bottom: flick.bottom }
|
||||
anchors {
|
||||
right: flick.right
|
||||
bottom: flick.bottom
|
||||
}
|
||||
source: "content/pics/moreDown.png"
|
||||
opacity: flick.atYEnd ? 0 : 1
|
||||
}
|
||||
|
|
@ -138,9 +164,12 @@ Rectangle {
|
|||
// A button to close the detailed view, i.e. set the state back to default ('').
|
||||
TextButton {
|
||||
y: 10
|
||||
anchors { right: background.right; rightMargin: 10 }
|
||||
anchors {
|
||||
right: background.right
|
||||
rightMargin: 10
|
||||
}
|
||||
opacity: recipe.detailsOpacity
|
||||
text: "Close"
|
||||
text: qsTr("Close")
|
||||
|
||||
onClicked: recipe.state = '';
|
||||
}
|
||||
|
|
@ -180,8 +209,14 @@ Rectangle {
|
|||
transitions: Transition {
|
||||
// Make the state changes smooth
|
||||
ParallelAnimation {
|
||||
ColorAnimation { property: "color"; duration: 500 }
|
||||
NumberAnimation { duration: 300; properties: "detailsOpacity,x,contentY,height,width" }
|
||||
ColorAnimation {
|
||||
property: "color"
|
||||
duration: 500
|
||||
}
|
||||
NumberAnimation {
|
||||
duration: 300
|
||||
properties: "detailsOpacity,x,contentY,height,width"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -192,7 +227,7 @@ Rectangle {
|
|||
ListView {
|
||||
id: listView
|
||||
anchors.fill: parent
|
||||
model: RecipesModel {}
|
||||
model: RecipesModel { }
|
||||
delegate: recipeDelegate
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,13 +9,15 @@ import QtQuick
|
|||
import "content"
|
||||
|
||||
Rectangle {
|
||||
width: 200; height: 300
|
||||
width: 200
|
||||
height: 300
|
||||
|
||||
// Define a delegate component. The component will be
|
||||
// instantiated for each visible item in the list.
|
||||
component PetDelegate: Item {
|
||||
id: pet
|
||||
width: 200; height: 55
|
||||
width: 200
|
||||
height: 55
|
||||
|
||||
required property int index
|
||||
required property string name
|
||||
|
|
@ -23,9 +25,15 @@ Rectangle {
|
|||
required property int age
|
||||
|
||||
Column {
|
||||
SmallText { text: 'Name: ' + pet.name }
|
||||
SmallText { text: 'Type: ' + pet.type }
|
||||
SmallText { text: 'Age: ' + pet.age }
|
||||
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 {
|
||||
|
|
@ -34,7 +42,10 @@ Rectangle {
|
|||
PropertyChanges { pet.x: 20 }
|
||||
}
|
||||
transitions: Transition {
|
||||
NumberAnimation { properties: "x"; duration: 200 }
|
||||
NumberAnimation {
|
||||
properties: "x"
|
||||
duration: 200
|
||||
}
|
||||
}
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
|
|
@ -45,24 +56,31 @@ Rectangle {
|
|||
//! [0]
|
||||
// Define a highlight with customized movement between items.
|
||||
component HighlightBar : Rectangle {
|
||||
width: 200; height: 50
|
||||
width: 200
|
||||
height: 50
|
||||
color: "#FFFF88"
|
||||
y: listView.currentItem.y
|
||||
Behavior on y { SpringAnimation { spring: 2; damping: 0.1 } }
|
||||
y: ListView.view.currentItem.y
|
||||
Behavior on y {
|
||||
SpringAnimation {
|
||||
spring: 2
|
||||
damping: 0.1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ListView {
|
||||
id: listView
|
||||
width: 200; height: parent.height
|
||||
width: 200
|
||||
height: parent.height
|
||||
x: 30
|
||||
|
||||
model: PetsModel {}
|
||||
delegate: PetDelegate {}
|
||||
model: PetsModel { }
|
||||
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]
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@
|
|||
import QtQuick
|
||||
import "content"
|
||||
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
//! [0]
|
||||
Rectangle {
|
||||
id: root
|
||||
|
|
@ -30,17 +32,26 @@ Rectangle {
|
|||
}
|
||||
}
|
||||
|
||||
PauseAnimation { duration: 500 }
|
||||
PauseAnimation {
|
||||
duration: 500
|
||||
}
|
||||
}
|
||||
//! [0]
|
||||
MouseArea{
|
||||
MouseArea {
|
||||
id: ma
|
||||
z: 1
|
||||
anchors.fill: parent
|
||||
onClicked: { z = 1 - z; if (anim.running) anim.stop(); else anim.restart();}
|
||||
onClicked: function () {
|
||||
z = 1 - z;
|
||||
if (anim.running)
|
||||
anim.stop();
|
||||
else
|
||||
anim.restart();
|
||||
}
|
||||
}
|
||||
|
||||
width: 320; height: 480
|
||||
width: 320
|
||||
height: 480
|
||||
|
||||
// This example shows the same model in three different ListView items,
|
||||
// with different highlight ranges. The highlight ranges are set by the
|
||||
|
|
@ -68,12 +79,16 @@ Rectangle {
|
|||
//! [1]
|
||||
ListView {
|
||||
id: list1
|
||||
height: 50; width: parent.width
|
||||
model: PetsModel {id: aModel}
|
||||
height: 50
|
||||
width: parent.width
|
||||
model: PetsModel {
|
||||
id: aModel
|
||||
}
|
||||
delegate: petDelegate
|
||||
orientation: ListView.Horizontal
|
||||
|
||||
highlight: Rectangle { color: "lightsteelblue" }
|
||||
highlight: Rectangle {
|
||||
color: "lightsteelblue"
|
||||
}
|
||||
currentIndex: root.current
|
||||
onCurrentIndexChanged: root.current = currentIndex
|
||||
focus: true
|
||||
|
|
@ -82,29 +97,33 @@ Rectangle {
|
|||
ListView {
|
||||
id: list2
|
||||
y: 160
|
||||
height: 50; width: parent.width
|
||||
model: PetsModel {}
|
||||
height: 50
|
||||
width: parent.width
|
||||
model: PetsModel { }
|
||||
delegate: petDelegate
|
||||
orientation: ListView.Horizontal
|
||||
|
||||
highlight: Rectangle { color: "yellow" }
|
||||
highlight: Rectangle {
|
||||
color: "yellow"
|
||||
}
|
||||
currentIndex: root.current
|
||||
preferredHighlightBegin: 80; preferredHighlightEnd: 220
|
||||
preferredHighlightBegin: 80
|
||||
preferredHighlightEnd: 220
|
||||
highlightRangeMode: ListView.ApplyRange
|
||||
}
|
||||
|
||||
ListView {
|
||||
id: list3
|
||||
y: 320
|
||||
height: 50; width: parent.width
|
||||
height: 50
|
||||
width: parent.width
|
||||
model: PetsModel {}
|
||||
delegate: petDelegate
|
||||
orientation: ListView.Horizontal
|
||||
|
||||
highlight: Rectangle { color: "yellow" }
|
||||
currentIndex: root.current
|
||||
onCurrentIndexChanged: root.current = currentIndex
|
||||
preferredHighlightBegin: 125; preferredHighlightEnd: 125
|
||||
preferredHighlightBegin: 125
|
||||
preferredHighlightEnd: 125
|
||||
highlightRangeMode: ListView.StrictlyEnforceRange
|
||||
}
|
||||
//! [1]
|
||||
|
|
@ -123,9 +142,15 @@ Rectangle {
|
|||
|
||||
Column {
|
||||
id: column
|
||||
Text { text: 'Name: ' + petDelegateItem.name }
|
||||
Text { text: 'Type: ' + petDelegateItem.type }
|
||||
Text { text: 'Age: ' + petDelegateItem.age }
|
||||
Text {
|
||||
text: 'Name: ' + petDelegateItem.name
|
||||
}
|
||||
Text {
|
||||
text: 'Type: ' + petDelegateItem.type
|
||||
}
|
||||
Text {
|
||||
text: 'Age: ' + petDelegateItem.age
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
// the ListView.section attached property.
|
||||
|
||||
import QtQuick
|
||||
import "content"
|
||||
import QtQuick.Controls
|
||||
|
||||
Rectangle {
|
||||
id: container
|
||||
|
|
@ -14,21 +14,67 @@ Rectangle {
|
|||
|
||||
ListModel {
|
||||
id: animalsModel
|
||||
ListElement { name: "Ant"; size: "Tiny" }
|
||||
ListElement { name: "Flea"; size: "Tiny" }
|
||||
ListElement { name: "Parrot"; size: "Small" }
|
||||
ListElement { name: "Guinea pig"; size: "Small" }
|
||||
ListElement { name: "Rat"; size: "Small" }
|
||||
ListElement { name: "Butterfly"; size: "Small" }
|
||||
ListElement { name: "Dog"; size: "Medium" }
|
||||
ListElement { name: "Cat"; size: "Medium" }
|
||||
ListElement { name: "Pony"; size: "Medium" }
|
||||
ListElement { name: "Koala"; size: "Medium" }
|
||||
ListElement { name: "Horse"; size: "Large" }
|
||||
ListElement { name: "Tiger"; size: "Large" }
|
||||
ListElement { name: "Giraffe"; size: "Large" }
|
||||
ListElement { name: "Elephant"; size: "Huge" }
|
||||
ListElement { name: "Whale"; size: "Huge" }
|
||||
|
||||
ListElement {
|
||||
name: "Ant"
|
||||
size: "Tiny"
|
||||
}
|
||||
ListElement {
|
||||
name: "Flea"
|
||||
size: "Tiny"
|
||||
}
|
||||
ListElement {
|
||||
name: "Parrot"
|
||||
size: "Small"
|
||||
}
|
||||
ListElement {
|
||||
name: "Guinea pig"
|
||||
size: "Small"
|
||||
}
|
||||
ListElement {
|
||||
name: "Rat"
|
||||
size: "Small"
|
||||
}
|
||||
ListElement {
|
||||
name: "Butterfly"
|
||||
size: "Small"
|
||||
}
|
||||
ListElement {
|
||||
name: "Dog"
|
||||
size: "Medium"
|
||||
}
|
||||
ListElement {
|
||||
name: "Cat"
|
||||
size: "Medium"
|
||||
}
|
||||
ListElement {
|
||||
name: "Pony"
|
||||
size: "Medium"
|
||||
}
|
||||
ListElement {
|
||||
name: "Koala"
|
||||
size: "Medium"
|
||||
}
|
||||
ListElement {
|
||||
name: "Horse"
|
||||
size: "Large"
|
||||
}
|
||||
ListElement {
|
||||
name: "Tiger"
|
||||
size: "Large"
|
||||
}
|
||||
ListElement {
|
||||
name: "Giraffe"
|
||||
size: "Large"
|
||||
}
|
||||
ListElement {
|
||||
name: "Elephant"
|
||||
size: "Huge"
|
||||
}
|
||||
ListElement {
|
||||
name: "Whale"
|
||||
size: "Huge"
|
||||
}
|
||||
}
|
||||
|
||||
//! [0]
|
||||
|
|
@ -36,7 +82,7 @@ Rectangle {
|
|||
Component {
|
||||
id: sectionHeading
|
||||
Rectangle {
|
||||
width: container.width
|
||||
width: ListView.view.width
|
||||
height: childrenRect.height
|
||||
color: "lightsteelblue"
|
||||
|
||||
|
|
@ -58,6 +104,7 @@ Rectangle {
|
|||
model: animalsModel
|
||||
delegate: Text {
|
||||
required property string name
|
||||
|
||||
text: name
|
||||
font.pixelSize: 18
|
||||
}
|
||||
|
|
@ -73,19 +120,23 @@ Rectangle {
|
|||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 1
|
||||
spacing: 1
|
||||
ToggleButton {
|
||||
label: "CurrentLabelAtStart"
|
||||
onToggled: {
|
||||
if (active)
|
||||
|
||||
CheckBox {
|
||||
id: labelAtStartCheckBox
|
||||
text: qsTr("CurrentLabelAtStart")
|
||||
onClicked: {
|
||||
if (checked)
|
||||
view.section.labelPositioning |= ViewSection.CurrentLabelAtStart
|
||||
else
|
||||
view.section.labelPositioning &= ~ViewSection.CurrentLabelAtStart
|
||||
}
|
||||
}
|
||||
ToggleButton {
|
||||
label: "NextLabelAtEnd"
|
||||
onToggled: {
|
||||
if (active)
|
||||
|
||||
CheckBox {
|
||||
id: labelAtEndCheckBox
|
||||
text: qsTr("NextLabelAtEnd")
|
||||
onClicked: {
|
||||
if (checked)
|
||||
view.section.labelPositioning |= ViewSection.NextLabelAtEnd
|
||||
else
|
||||
view.section.labelPositioning &= ~ViewSection.NextLabelAtEnd
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@
|
|||
import QtQuick
|
||||
import QtQml.Models
|
||||
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
Rectangle {
|
||||
id: root
|
||||
color: "lightgray"
|
||||
|
|
@ -19,23 +21,41 @@ Rectangle {
|
|||
id: itemModel
|
||||
|
||||
Rectangle {
|
||||
width: view.width; height: view.height
|
||||
width: view.width
|
||||
height: view.height
|
||||
color: "#FFFEF0"
|
||||
Text { text: "Page 1"; font.bold: true; anchors.centerIn: parent }
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: qsTr("Page 1")
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
Component.onDestruction: if (root.printDestruction) print("destroyed 1")
|
||||
}
|
||||
Rectangle {
|
||||
width: view.width; height: view.height
|
||||
width: view.width
|
||||
height: view.height
|
||||
color: "#F0FFF7"
|
||||
Text { text: "Page 2"; font.bold: true; anchors.centerIn: parent }
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: qsTr("Page 2")
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
Component.onDestruction: if (root.printDestruction) print("destroyed 2")
|
||||
}
|
||||
Rectangle {
|
||||
width: view.width; height: view.height
|
||||
width: view.width
|
||||
height: view.height
|
||||
color: "#F4F0FF"
|
||||
Text { text: "Page 3"; font.bold: true; anchors.centerIn: parent }
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: qsTr("Page 3")
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
Component.onDestruction: if (root.printDestruction) print("destroyed 3")
|
||||
}
|
||||
|
|
@ -43,18 +63,27 @@ Rectangle {
|
|||
|
||||
ListView {
|
||||
id: view
|
||||
anchors { fill: parent; bottomMargin: 30 }
|
||||
anchors {
|
||||
fill: parent
|
||||
bottomMargin: 30
|
||||
}
|
||||
model: itemModel
|
||||
preferredHighlightBegin: 0; preferredHighlightEnd: 0
|
||||
preferredHighlightBegin: 0
|
||||
preferredHighlightEnd: 0
|
||||
highlightRangeMode: ListView.StrictlyEnforceRange
|
||||
orientation: ListView.Horizontal
|
||||
snapMode: ListView.SnapOneItem; flickDeceleration: 2000
|
||||
snapMode: ListView.SnapOneItem
|
||||
flickDeceleration: 2000
|
||||
cacheBuffer: 200
|
||||
}
|
||||
//! [0]
|
||||
Rectangle {
|
||||
width: root.width; height: 30
|
||||
anchors { top: view.bottom; bottom: parent.bottom }
|
||||
width: root.width
|
||||
height: 30
|
||||
anchors {
|
||||
top: view.bottom
|
||||
bottom: parent.bottom
|
||||
}
|
||||
color: "gray"
|
||||
|
||||
Row {
|
||||
|
|
@ -63,17 +92,18 @@ Rectangle {
|
|||
|
||||
Repeater {
|
||||
model: itemModel.count
|
||||
|
||||
Rectangle {
|
||||
delegate: Rectangle {
|
||||
required property int index
|
||||
|
||||
width: 5; height: 5
|
||||
width: 5
|
||||
height: 5
|
||||
radius: 3
|
||||
color: view.currentIndex == index ? "blue" : "white"
|
||||
color: view.currentIndex === index ? "blue" : "white"
|
||||
|
||||
MouseArea {
|
||||
width: 20; height: 20
|
||||
anchors.centerIn: parent
|
||||
width: 20
|
||||
height: 20
|
||||
onClicked: view.currentIndex = parent.index
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,26 +11,50 @@ Package {
|
|||
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' }
|
||||
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'
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: wrapper
|
||||
width: parent.width; height: 25
|
||||
width: parent?.width ?? 0
|
||||
height: 25
|
||||
color: 'lightsteelblue'
|
||||
|
||||
Text { text: delegate.display; anchors.centerIn: parent }
|
||||
Text {
|
||||
text: delegate.display
|
||||
anchors.centerIn: parent
|
||||
}
|
||||
state: delegate.upTo > delegate.index ? 'inGrid' : 'inList'
|
||||
states: [
|
||||
State {
|
||||
name: 'inList'
|
||||
ParentChange { target: wrapper; parent: listDelegate }
|
||||
ParentChange {
|
||||
target: wrapper
|
||||
parent: listDelegate
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: 'inGrid'
|
||||
ParentChange {
|
||||
target: wrapper; parent: gridDelegate
|
||||
x: 0; y: 0; width: gridDelegate.width; height: gridDelegate.height
|
||||
target: wrapper
|
||||
parent: gridDelegate
|
||||
x: 0
|
||||
y: 0
|
||||
width: gridDelegate.width
|
||||
height: gridDelegate.height
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
@ -38,7 +62,10 @@ Package {
|
|||
transitions: [
|
||||
Transition {
|
||||
ParentAnimation {
|
||||
NumberAnimation { properties: 'x,y,width,height'; duration: 300 }
|
||||
NumberAnimation {
|
||||
properties: 'x,y,width,height'
|
||||
duration: 300
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -4,16 +4,24 @@
|
|||
import QtQuick
|
||||
import QtQml.Models
|
||||
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
Rectangle {
|
||||
id: root
|
||||
color: "white"
|
||||
width: 320
|
||||
height: 480
|
||||
property int upTo: 0
|
||||
property int upTo
|
||||
SequentialAnimation on upTo {
|
||||
loops: -1
|
||||
NumberAnimation { to: 8; duration: 3500 }
|
||||
NumberAnimation { to: 0; duration: 3500 }
|
||||
NumberAnimation {
|
||||
to: 8
|
||||
duration: 3500
|
||||
}
|
||||
NumberAnimation {
|
||||
to: 0
|
||||
duration: 3500
|
||||
}
|
||||
}
|
||||
|
||||
ListModel {
|
||||
|
|
@ -38,14 +46,14 @@ Rectangle {
|
|||
|
||||
ListView {
|
||||
id: lv
|
||||
height: parent.height/2
|
||||
height: parent.height / 2
|
||||
width: parent.width
|
||||
|
||||
model: visualModel.parts.list
|
||||
}
|
||||
GridView {
|
||||
y: parent.height/2
|
||||
height: parent.height/2
|
||||
y: parent.height / 2
|
||||
height: parent.height / 2
|
||||
width: parent.width
|
||||
cellWidth: width / 2
|
||||
cellHeight: 50
|
||||
|
|
|
|||
|
|
@ -4,24 +4,47 @@
|
|||
import QtQuick
|
||||
|
||||
Rectangle {
|
||||
width: 400; height: 240
|
||||
width: 400
|
||||
height: 240
|
||||
color: "white"
|
||||
|
||||
ListModel {
|
||||
id: appModel
|
||||
ListElement { name: "Music"; icon: "pics/AudioPlayer_48.png" }
|
||||
ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" }
|
||||
ListElement { name: "Camera"; icon: "pics/Camera_48.png" }
|
||||
ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" }
|
||||
ListElement { name: "Messaging"; icon: "pics/EMail_48.png" }
|
||||
ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" }
|
||||
ListElement { name: "Contacts"; icon: "pics/AddressBook_48.png" }
|
||||
ListElement {
|
||||
name: "Music"
|
||||
icon: "pics/AudioPlayer_48.png"
|
||||
}
|
||||
ListElement {
|
||||
name: "Movies"
|
||||
icon: "pics/VideoPlayer_48.png"
|
||||
}
|
||||
ListElement {
|
||||
name: "Camera"
|
||||
icon: "pics/Camera_48.png"
|
||||
}
|
||||
ListElement {
|
||||
name: "Calendar"
|
||||
icon: "pics/DateBook_48.png"
|
||||
}
|
||||
ListElement {
|
||||
name: "Messaging"
|
||||
icon: "pics/EMail_48.png"
|
||||
}
|
||||
ListElement {
|
||||
name: "Todo List"
|
||||
icon: "pics/TodoList_48.png"
|
||||
}
|
||||
ListElement {
|
||||
name: "Contacts"
|
||||
icon: "pics/AddressBook_48.png"
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: appDelegate
|
||||
Item {
|
||||
width: 100; height: 100
|
||||
width: 100
|
||||
height: 100
|
||||
scale: PathView.iconScale
|
||||
|
||||
required property string name
|
||||
|
|
@ -30,11 +53,15 @@ Rectangle {
|
|||
|
||||
Image {
|
||||
id: myIcon
|
||||
y: 20; anchors.horizontalCenter: parent.horizontalCenter
|
||||
y: 20
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
source: parent.icon
|
||||
}
|
||||
Text {
|
||||
anchors { top: myIcon.bottom; horizontalCenter: parent.horizontalCenter }
|
||||
anchors {
|
||||
top: myIcon.bottom
|
||||
horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
text: parent.name
|
||||
}
|
||||
|
||||
|
|
@ -47,7 +74,11 @@ Rectangle {
|
|||
|
||||
Component {
|
||||
id: appHighlight
|
||||
Rectangle { width: 80; height: 80; color: "lightsteelblue" }
|
||||
Rectangle {
|
||||
width: 80
|
||||
height: 80
|
||||
color: "lightsteelblue"
|
||||
}
|
||||
}
|
||||
|
||||
PathView {
|
||||
|
|
@ -62,11 +93,30 @@ Rectangle {
|
|||
path: Path {
|
||||
startX: 10
|
||||
startY: 50
|
||||
PathAttribute { name: "iconScale"; value: 0.5 }
|
||||
PathQuad { x: 200; y: 150; controlX: 50; controlY: 200 }
|
||||
PathAttribute { name: "iconScale"; value: 1.0 }
|
||||
PathQuad { x: 390; y: 50; controlX: 350; controlY: 200 }
|
||||
PathAttribute { name: "iconScale"; value: 0.5 }
|
||||
PathAttribute {
|
||||
name: "iconScale"
|
||||
value: 0.5
|
||||
}
|
||||
PathQuad {
|
||||
x: 200
|
||||
y: 150
|
||||
controlX: 50
|
||||
controlY: 200
|
||||
}
|
||||
PathAttribute {
|
||||
name: "iconScale"
|
||||
value: 1.0
|
||||
}
|
||||
PathQuad {
|
||||
x: 390
|
||||
y: 50
|
||||
controlX: 350
|
||||
controlY: 200
|
||||
}
|
||||
PathAttribute {
|
||||
name: "iconScale"
|
||||
value: 0.5
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue