FluentUI/example/qml/page/T_FlipView.qml

119 lines
3.1 KiB
QML
Raw Normal View History

2023-08-24 15:50:37 +08:00
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import FluentUI 1.0
2023-06-12 16:46:02 +08:00
import "qrc:///example/qml/component"
2023-08-26 17:20:30 +08:00
import "../component"
2023-04-02 14:05:54 +08:00
FluScrollablePage{
title:"FlipView"
FluArea{
2023-04-03 09:32:06 +08:00
Layout.fillWidth: true
2023-04-02 14:05:54 +08:00
height: 340
paddings: 10
Layout.topMargin: 20
ColumnLayout{
anchors.verticalCenter: parent.verticalCenter
FluText{
text:"水平方向的FlipView"
}
FluFlipView{
Image{
2023-04-27 09:38:57 +08:00
source: "qrc:/example/res/image/banner_1.jpg"
2023-04-02 14:05:54 +08:00
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Image{
2023-04-27 09:38:57 +08:00
source: "qrc:/example/res/image/banner_2.jpg"
2023-04-02 14:05:54 +08:00
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Image{
2023-04-27 09:38:57 +08:00
source: "qrc:/example/res/image/banner_3.jpg"
2023-04-02 14:05:54 +08:00
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
}
}
}
2023-04-06 17:32:21 +08:00
CodeExpander{
Layout.fillWidth: true
2023-04-19 17:25:46 +08:00
Layout.topMargin: -1
2023-04-06 17:32:21 +08:00
code:'FluFlipView{
Image{
2023-04-27 09:38:57 +08:00
source: "qrc:/example/res/image/banner_1.jpg"
2023-04-06 17:32:21 +08:00
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Image{
2023-04-27 09:38:57 +08:00
source: "qrc:/example/res/image/banner_1.jpg"
2023-04-06 17:32:21 +08:00
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Image{
2023-04-27 09:38:57 +08:00
source: "qrc:/example/res/image/banner_1.jpg"
2023-04-06 17:32:21 +08:00
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
}
'
}
2023-04-02 14:05:54 +08:00
FluArea{
2023-04-03 09:32:06 +08:00
Layout.fillWidth: true
2023-04-02 14:05:54 +08:00
height: 340
paddings: 10
Layout.topMargin: 20
ColumnLayout{
anchors.verticalCenter: parent.verticalCenter
FluText{
text:"垂直方向的FlipView"
}
FluFlipView{
vertical:true
Image{
2023-04-27 09:38:57 +08:00
source: "qrc:/example/res/image/banner_1.jpg"
2023-04-02 14:05:54 +08:00
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Image{
2023-04-27 09:38:57 +08:00
source: "qrc:/example/res/image/banner_2.jpg"
2023-04-02 14:05:54 +08:00
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Image{
2023-04-27 09:38:57 +08:00
source: "qrc:/example/res/image/banner_3.jpg"
2023-04-02 14:05:54 +08:00
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
}
}
}
2023-04-06 17:32:21 +08:00
CodeExpander{
Layout.fillWidth: true
2023-04-19 17:25:46 +08:00
Layout.topMargin: -1
2023-04-06 17:32:21 +08:00
code:'FluFlipView{
vertical:true
Image{
2023-04-27 09:38:57 +08:00
source: "qrc:/example/res/image/banner_1.jpg"
2023-04-06 17:32:21 +08:00
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Image{
2023-04-27 09:38:57 +08:00
source: "qrc:/example/res/image/banner_1.jpg"
2023-04-06 17:32:21 +08:00
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Image{
2023-04-27 09:38:57 +08:00
source: "qrc:/example/res/image/banner_1.jpg"
2023-04-06 17:32:21 +08:00
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
}
'
}
2023-04-02 14:05:54 +08:00
}