amass/FluentUI
1
0
Fork 0
mirror of https://github.com/zhuzichu520/FluentUI.git synced 2025-07-04 17:15:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: FluCarousel支持纵向轮播

Browse Source
This commit is contained in:
Polaris-Night
2025-03-12 23:38:26 +08:00
parent 9ac58a8ca7
commit 8377fb5227
6 changed files with 355 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
example/example_en_US.ts
View File

@ -1123,6 +1123,11 @@ Updated content:
<source>Carousel map, support infinite carousel, infinite swipe, and components implemented with ListView</source>
<translation type="unfinished"></translation>
</message>
<message>
<location filename="qml/page/T_Carousel.qml" line="203"/>
<source>Auto play</source>
<translation type="unfinished"></translation>
</message>
</context>
<context>
<name>T_CheckBox</name>

9
example/example_zh_CN.ts
View File

@ -1142,12 +1142,17 @@ Updated content:
<message>
<location filename="qml/page/T_Carousel.qml" line="10"/>
<source>Carousel</source>
<translation type="unfinished">轮播图</translation>
<translation>轮播图</translation>
</message>
<message>
<location filename="qml/page/T_Carousel.qml" line="36"/>
<source>Carousel map, support infinite carousel, infinite swipe, and components implemented with ListView</source>
<translation type="unfinished">轮播图，支持无限轮播，无限滑动，用ListView实现的组件</translation>
<translation>轮播图，支持无限轮播，无限滑动，用ListView实现的组件</translation>
</message>
<message>
<location filename="qml/page/T_Carousel.qml" line="203"/>
<source>Auto play</source>
<translation>自动轮播</translation>
</message>
</context>
<context>

85
example/qml/page/T_Carousel.qml
View File

@ -121,7 +121,6 @@ FluScrollablePage{
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -6
@ -140,6 +139,90 @@ FluScrollablePage{
Component.onCompleted: {
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"}]
}
}'
}
FluFrame{
Layout.fillWidth: true
Layout.preferredHeight: 300 + topPadding + bottomPadding
padding: 10
Layout.topMargin: 10
RowLayout{
anchors.fill: parent
Item{
Layout.preferredWidth: 400
Layout.fillHeight: true
FluShadow{
radius: 8
}
FluCarousel{
anchors.fill: parent
orientation: Qt.Vertical
autoPlay: auto_play_switch.checked
loopTime:1500
indicatorGravity: Qt.AlignVCenter | Qt.AlignRight
indicatorMarginTop:15
delegate: Component{
Item{
anchors.fill: parent
Image {
anchors.fill: parent
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
}
}
}
}
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
}
}
}
FluToggleSwitch{
id: auto_play_switch
Layout.alignment: Qt.AlignRight
text: qsTr("Auto play")
}
}
}
CodeExpander{
Layout.fillWidth: true
Layout.topMargin: -6
code:'FluCarousel{
id:carousel
width: 400
height: 300
orientation: Qt.Vertical
delegate: Component{
Image {
anchors.fill: parent
source: model.url
asynchronous: true
fillMode:Image.PreserveAspectCrop
}
}
Component.onCompleted: {
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"}]
}
}'
}
}