FluentUI/example/qml/page/T_Carousel.qml

148 lines
4.7 KiB
QML
Raw Normal View History

2023-08-24 15:50:37 +08:00
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
2023-08-26 17:20:30 +08:00
import "../component"
2023-03-23 18:05:42 +08:00
FluScrollablePage{
title:"Carousel"
2023-08-07 18:18:04 +08:00
ListModel{
id:data_model
ListElement{
url:"qrc:/example/res/image/banner_1.jpg"
}
ListElement{
url:"qrc:/example/res/image/banner_2.jpg"
}
ListElement{
url:"qrc:/example/res/image/banner_3.jpg"
}
}
2023-03-23 18:05:42 +08:00
FluArea{
2023-04-03 09:32:06 +08:00
Layout.fillWidth: true
2023-03-23 18:05:42 +08:00
height: 370
paddings: 10
Layout.topMargin: 20
Column{
spacing: 15
anchors{
verticalCenter: parent.verticalCenter
left:parent.left
}
FluText{
text:"轮播图支持无限轮播无限滑动用ListView实现的组件"
}
2023-09-08 22:33:23 +08:00
Item{
width: 400
height: 300
FluShadow{
radius: 8
2023-08-07 18:18:04 +08:00
}
2023-09-08 22:33:23 +08:00
FluCarousel{
anchors.fill: parent
delegate: Component{
Image {
anchors.fill: parent
source: model.url
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
}
Layout.topMargin: 20
Layout.leftMargin: 5
Component.onCompleted: {
model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}]
}
2023-08-07 18:18:04 +08:00
}
}
}
}
FluArea{
Layout.fillWidth: true
height: 340
paddings: 10
Layout.topMargin: 10
Column{
spacing: 15
anchors{
verticalCenter: parent.verticalCenter
left:parent.left
}
2023-09-08 22:33:23 +08:00
Item{
width: 400
height: 300
FluShadow{
radius: 8
}
FluCarousel{
anchors.fill: parent
loopTime:1500
indicatorGravity: Qt.AlignHCenter | Qt.AlignTop
indicatorMarginTop:15
delegate: Component{
Item{
2023-08-07 18:18:04 +08:00
anchors.fill: parent
2023-09-08 22:33:23 +08:00
Image {
2023-08-07 18:18:04 +08:00
anchors.fill: parent
2023-09-08 22:33:23 +08:00
source: model.url
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
Rectangle{
height: 40
width: parent.width
anchors.bottom: parent.bottom
color: "#33000000"
FluText{
anchors.fill: parent
verticalAlignment: Qt.AlignVCenter
horizontalAlignment: Qt.AlignHCenter
text:model.title
color: FluColors.Grey10
font.pixelSize: 15
}
2023-08-07 18:18:04 +08:00
}
}
}
2023-09-08 22:33:23 +08:00
Layout.topMargin: 20
Layout.leftMargin: 5
Component.onCompleted: {
var arr = []
arr.push({url:"qrc:/example/res/image/banner_1.jpg",title:"共同应对全球性问题"})
arr.push({url:"qrc:/example/res/image/banner_2.jpg",title:"三小只全程没互动"})
arr.push({url:"qrc:/example/res/image/banner_3.jpg",title:"有效投资扩大 激发增长动能"})
model = arr
}
2023-03-23 18:05:42 +08:00
}
}
2023-09-08 22:33:23 +08:00
2023-03-23 18:05:42 +08:00
}
}
2023-08-07 18:18:04 +08:00
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:'FluCarousel{
2023-08-07 18:18:04 +08:00
id:carousel
2023-04-06 17:32:21 +08:00
width: 400
height: 300
2023-08-07 18:18:04 +08:00
delegate: Component{
Image {
anchors.fill: parent
source: model.url
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
}
2023-04-06 17:32:21 +08:00
Component.onCompleted: {
2023-08-07 18:18:04 +08:00
carousel.model = [{url:"qrc:/example/res/image/banner_1.jpg"},{url:"qrc:/example/res/image/banner_2.jpg"},{url:"qrc:/example/res/image/banner_3.jpg"}]
2023-04-06 17:32:21 +08:00
}
}'
}
2023-03-23 18:05:42 +08:00
}