122 lines
4.1 KiB
QML
122 lines
4.1 KiB
QML
import QtQuick
|
|
import QtQuick.Layouts
|
|
import QtQuick.Controls
|
|
import FluentUI.Controls
|
|
import Gallery
|
|
|
|
ScrollablePage {
|
|
|
|
title: qsTr("Marquee")
|
|
columnSpacing: 24
|
|
|
|
CardHighlight{
|
|
Layout.fillWidth: true
|
|
showDisabled: false
|
|
codeSnippet:
|
|
`import QtQuick
|
|
import QtQuick.Controls
|
|
import QtQuick.Layouts
|
|
import FluentUI.Controls
|
|
|
|
ColumnLayout{
|
|
Marquee {
|
|
implicitWidth: 450
|
|
implicitHeight: 40
|
|
model: [qsTr("Tell me a fun fact about the Roman Empire"),qsTr("Improve my essay writing ask me to outline my thoughts"),qsTr("Create a morning routine to boost my productivity")]
|
|
speedFactor: 10
|
|
}
|
|
Marquee {
|
|
implicitWidth: 450
|
|
implicitHeight: 40
|
|
layoutDirection: Qt.RightToLeft
|
|
model: [qsTr("Tell me a fun fact about the Roman Empire"),qsTr("Improve my essay writing ask me to outline my thoughts"),qsTr("Create a morning routine to boost my productivity")]
|
|
speedFactor: 10
|
|
}
|
|
Marquee {
|
|
implicitWidth: 450
|
|
implicitHeight: 40
|
|
layoutDirection: Qt.RightToLeft
|
|
model: [{title:qsTr("Give me ideas about how to plan my New Years resolutions"),color:Colors.blue.normal},{title:qsTr("Help me pick an outfit that will look good on camera"),color:Colors.teal.normal},{title:qsTr("Design a programming game teach basics in a fun way"),color:Colors.red.normal}]
|
|
speedFactor: 15
|
|
delegate: Label {
|
|
font: Typography.title
|
|
text: modelData.title
|
|
color: modelData.color
|
|
}
|
|
}
|
|
Marquee {
|
|
implicitWidth: 450
|
|
implicitHeight: 40
|
|
model: [{title:qsTr("Give me ideas about how to plan my New Years resolutions"),color:Colors.blue.normal},{title:qsTr("Help me pick an outfit that will look good on camera"),color:Colors.teal.normal},{title:qsTr("Design a programming game teach basics in a fun way"),color:Colors.red.normal}]
|
|
speedFactor: 15
|
|
delegate: Label {
|
|
font: Typography.title
|
|
text: modelData.title
|
|
color: modelData.color
|
|
}
|
|
}
|
|
Marquee {
|
|
implicitWidth: 240
|
|
implicitHeight: 120
|
|
Layout.leftMargin: 105
|
|
model: [{avatar:"qrc:/qt/qml/Gallery/res/image/avatar_1.svg"},{avatar:"qrc:/qt/qml/Gallery/res/image/avatar_2.svg"},{avatar:"qrc:/qt/qml/Gallery/res/image/avatar_3.svg"}]
|
|
speedFactor: 20
|
|
delegate: Image{
|
|
id: iamge_avatar_1
|
|
width: 120
|
|
height: 120
|
|
source: modelData.avatar
|
|
SequentialAnimation{
|
|
running: true
|
|
loops: Animation.Infinite
|
|
PropertyAnimation {
|
|
target: iamge_avatar_1
|
|
from: 0.9
|
|
to: 1.1
|
|
property: "scale"
|
|
duration: Theme.fastAnimationDuration
|
|
}
|
|
PropertyAnimation {
|
|
target: iamge_avatar_1
|
|
from: 1.1
|
|
to: 0.9
|
|
property: "scale"
|
|
duration: Theme.fastAnimationDuration
|
|
}
|
|
}
|
|
}
|
|
}
|
|
Marquee {
|
|
implicitWidth: 240
|
|
implicitHeight: 120
|
|
Layout.leftMargin: 105
|
|
layoutDirection: Qt.RightToLeft
|
|
model: [{avatar:"qrc:/qt/qml/Gallery/res/image/avatar_4.svg"},{avatar:"qrc:/qt/qml/Gallery/res/image/avatar_5.svg"},{avatar:"qrc:/qt/qml/Gallery/res/image/avatar_6.svg"}]
|
|
speedFactor: 20
|
|
delegate: Image{
|
|
id: iamge_avatar_2
|
|
width: 120
|
|
height: 120
|
|
source: modelData.avatar
|
|
SequentialAnimation{
|
|
running: true
|
|
loops: Animation.Infinite
|
|
ScaleAnimator {
|
|
target: iamge_avatar_2
|
|
from: 0.9
|
|
to: 1.1
|
|
duration: Theme.fastAnimationDuration
|
|
}
|
|
ScaleAnimator {
|
|
target: iamge_avatar_2
|
|
from: 1.1
|
|
to: 0.9
|
|
duration: Theme.fastAnimationDuration
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`}
|
|
}
|