Skip to content

Commit f1e62c1

Browse files
zhuzichu520zhuzichu520
authored
Merge pull request zhuzichu520#608 from Polaris-Night/main
feat: 新增FluCountTimer、FluParallaxView，优化FluCheckBox、FluPinyin、FluCarousel
2 parents 909186c + 73a9083 commit f1e62c1

30 files changed

+1549
-514
lines changed

‎example/example.qrc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -215,6 +215,8 @@
215215
<file>qml/page/T_FluentPro.qml</file>
216216
<file>qml/page/T_BubbleBox.qml</file>
217217
<file>qml/page/T_Pinyin.qml</file>
218+
<file>qml/page/T_CountTimer.qml</file>
219+
<file>qml/page/T_ParallaxView.qml</file>
218220
</qresource>
219221
<qresource prefix="/"/>
220222
</RCC>

‎example/example_en_US.ts‎

Lines changed: 170 additions & 49 deletions
Large diffs are not rendered by default.

‎example/example_zh_CN.ts‎

Lines changed: 170 additions & 49 deletions
Large diffs are not rendered by default.

‎example/qml/component/CodeExpander.qml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,8 @@ FluExpander{
141141
"FluGroupBox",
142142
"FluSheet",
143143
"FluBubbleBox",
144+
"FluCountTimer",
145+
"FluParallaxView"
144146
];
145147
code = code.replace(/\n/g, "<br>");
146148
code = code.replace(/ /g, "&nbsp;");

‎example/qml/global/ItemsOriginal.qml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -346,6 +346,12 @@ FluObject{
346346
url: "qrc:/example/qml/page/T_FlipView.qml"
347347
onTap: { navigationView.push(url) }
348348
}
349+
FluPaneItem{
350+
title: qsTr("ParallaxView")
351+
menuDelegate: paneItemMenu
352+
url: "qrc:/example/qml/page/T_ParallaxView.qml"
353+
onTap: { navigationView.push(url) }
354+
}
349355
}
350356

351357
FluPaneItemExpander{
@@ -468,6 +474,12 @@ FluObject{
468474
url: "qrc:/example/qml/page/T_Pinyin.qml"
469475
onTap: { navigationView.push(url) }
470476
}
477+
FluPaneItem{
478+
title: qsTr("CountTimer")
479+
menuDelegate: paneItemMenu
480+
url: "qrc:/example/qml/page/T_CountTimer.qml"
481+
onTap: { navigationView.push(url) }
482+
}
471483
FluPaneItem{
472484
title: qsTr("Captcha")
473485
menuDelegate: paneItemMenu

‎example/qml/page/T_Carousel.qml‎

Lines changed: 54 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -24,144 +24,78 @@ FluScrollablePage{
2424

2525
FluFrame{
2626
Layout.fillWidth: true
27-
height: 370
2827
padding: 10
29-
Column{
30-
spacing: 15
31-
anchors{
32-
verticalCenter: parent.verticalCenter
33-
left:parent.left
28+
ColumnLayout {
29+
anchors {
30+
left: parent.left
31+
right: parent.right
3432
}
35-
FluText{
33+
FluText {
3634
text: qsTr("Carousel map, support infinite carousel, infinite swipe, and components implemented with ListView")
3735
}
38-
Item{
39-
width: 400
40-
height: 300
41-
FluShadow{
42-
radius: 8
36+
RowLayout {
37+
FluText {
38+
text: qsTr("Play orientation:")
4339
}
44-
FluCarousel{
45-
anchors.fill: parent
46-
delegate: Component{
47-
Image {
48-
anchors.fill: parent
49-
source: model.url
50-
asynchronous: true
51-
fillMode:Image.PreserveAspectCrop
40+
FluComboBox {
41+
id: orientation_box
42+
textRole: "key"
43+
valueRole: "value"
44+
model: ListModel {
45+
ListElement {
46+
key: qsTr("Horizontal")
47+
value: Qt.Horizontal
48+
}
49+
ListElement {
50+
key: qsTr("Vertical")
51+
value: Qt.Vertical
5252
}
53-
}
54-
Layout.topMargin: 20
55-
Layout.leftMargin: 5
56-
Component.onCompleted: {
57-
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"}]
5853
}
5954
}
60-
}
61-
}
62-
}
63-
64-
FluFrame{
65-
Layout.fillWidth: true
66-
height: 340
67-
padding: 10
68-
Layout.topMargin: 10
69-
Column{
70-
spacing: 15
71-
anchors{
72-
verticalCenter: parent.verticalCenter
73-
left:parent.left
74-
}
75-
Item{
76-
width: 400
77-
height: 300
78-
FluShadow{
79-
radius: 8
55+
FluText {
56+
text: qsTr("Indicator position:")
8057
}
81-
FluCarousel{
82-
anchors.fill: parent
83-
loopTime:1500
84-
indicatorGravity: Qt.AlignHCenter | Qt.AlignTop
85-
indicatorMarginTop:15
86-
delegate: Component{
87-
Item{
88-
anchors.fill: parent
89-
Image {
90-
anchors.fill: parent
91-
source: model.url
92-
asynchronous: true
93-
fillMode:Image.PreserveAspectCrop
94-
}
95-
Rectangle{
96-
height: 40
97-
width: parent.width
98-
anchors.bottom: parent.bottom
99-
color: "#33000000"
100-
FluText{
101-
anchors.fill: parent
102-
verticalAlignment: Qt.AlignVCenter
103-
horizontalAlignment: Qt.AlignHCenter
104-
text:model.title
105-
color: FluColors.Grey10
106-
}
107-
}
108-
}
109-
}
110-
Layout.topMargin: 20
111-
Layout.leftMargin: 5
112-
Component.onCompleted: {
113-
var arr = []
114-
arr.push({url:"qrc:/example/res/image/banner_1.jpg",title:"共同应对全球性问题"})
115-
arr.push({url:"qrc:/example/res/image/banner_2.jpg",title:"三小只全程没互动"})
116-
arr.push({url:"qrc:/example/res/image/banner_3.jpg",title:"有效投资扩大 激发增长动能"})
117-
model = arr
118-
}
58+
FluComboBox {
59+
id: position_box
60+
textRole: "key"
61+
valueRole: "value"
62+
model: orientation_box.currentValue === Qt.Horizontal ? [{
63+
"key": qsTr("top"),
64+
"value": Qt.AlignHCenter | Qt.AlignTop
65+
}, {
66+
"key": qsTr("bottom"),
67+
"value": Qt.AlignHCenter | Qt.AlignBottom
68+
}] : [{
69+
"key": qsTr("right"),
70+
"value": Qt.AlignVCenter | Qt.AlignRight
71+
}, {
72+
"key": qsTr("left"),
73+
"value": Qt.AlignVCenter | Qt.AlignLeft
74+
}]
11975
}
12076
}
121-
122-
}
123-
}
124-
CodeExpander{
125-
Layout.fillWidth: true
126-
Layout.topMargin: -6
127-
code:'FluCarousel{
128-
id:carousel
129-
width: 400
130-
height: 300
131-
delegate: Component{
132-
Image {
133-
anchors.fill: parent
134-
source: model.url
135-
asynchronous: true
136-
fillMode:Image.PreserveAspectCrop
137-
}
138-
}
139-
Component.onCompleted: {
140-
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"}]
141-
}
142-
}'
143-
}
144-
145-
FluFrame{
146-
Layout.fillWidth: true
147-
Layout.preferredHeight: 300 + topPadding + bottomPadding
148-
padding: 10
149-
Layout.topMargin: 10
150-
RowLayout{
151-
anchors.fill: parent
77+
FluToggleSwitch{
78+
id: auto_play_switch
79+
text: qsTr("Auto play")
80+
checked: true
81+
textRight: false
82+
}
15283
Item{
15384
Layout.preferredWidth: 400
154-
Layout.fillHeight: true
85+
Layout.preferredHeight: 300
15586
FluShadow{
15687
radius: 8
15788
}
15889
FluCarousel{
15990
anchors.fill: parent
160-
orientation: Qt.Vertical
91+
orientation: orientation_box.currentValue
16192
autoPlay: auto_play_switch.checked
16293
loopTime:1500
163-
indicatorGravity: Qt.AlignVCenter | Qt.AlignRight
164-
indicatorMarginTop:15
94+
indicatorGravity: position_box.currentValue
95+
indicatorMarginTop: 15
96+
indicatorMarginBottom: 15
97+
indicatorMarginLeft: 15
98+
indicatorMarginRight: 15
16599
delegate: Component{
166100
Item{
167101
anchors.fill: parent
@@ -197,11 +131,6 @@ FluScrollablePage{
197131
}
198132
}
199133
}
200-
FluToggleSwitch{
201-
id: auto_play_switch
202-
Layout.alignment: Qt.AlignRight
203-
text: qsTr("Auto play")
204-
}
205134
}
206135
}
207136
CodeExpander{
@@ -212,6 +141,8 @@ FluScrollablePage{
212141
width: 400
213142
height: 300
214143
orientation: Qt.Vertical
144+
indicatorGravity: Qt.AlignTop | Qt.AlignHCenter
145+
autoPlay: true
215146
delegate: Component{
216147
Image {
217148
anchors.fill: parent

‎example/qml/page/T_CheckBox.qml‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,40 @@ FluScrollablePage{
99

1010
title: qsTr("CheckBox")
1111

12+
QtObject {
13+
id: controller
14+
readonly property bool checked: allChecked()
15+
readonly property bool indeterminate: !allChecked() && anyChecked()
16+
property var items: []
17+
function addItem(id, item) {
18+
const ref = items
19+
ref.push({
20+
"id": id,
21+
"item": item
22+
})
23+
items = ref
24+
}
25+
function setItemChecked(id, checked) {
26+
const ref = items
27+
const index = ref.findIndex(obj => obj.id === id)
28+
if (index !== -1) {
29+
ref[index].item.checked = checked
30+
}
31+
items = ref
32+
}
33+
function setAllChecked(checked) {
34+
const ref = items
35+
ref.forEach(obj => obj.item.checked = checked)
36+
items = ref
37+
}
38+
function allChecked() {
39+
return items.every(obj => obj.item.checked)
40+
}
41+
function anyChecked() {
42+
return items.some(obj => obj.item.checked)
43+
}
44+
}
45+
1246
FluFrame{
1347
Layout.fillWidth: true
1448
Layout.preferredHeight: 72
@@ -110,4 +144,39 @@ FluScrollablePage{
110144
}'
111145
}
112146

147+
FluFrame{
148+
Layout.fillWidth: true
149+
padding: 10
150+
Layout.topMargin: 20
151+
152+
ColumnLayout {
153+
FluText{
154+
text: qsTr("Using a 3-state CheckBox")
155+
}
156+
FluCheckBox {
157+
text: qsTr("Select all")
158+
checked: controller.checked
159+
indeterminate: controller.indeterminate
160+
clickListener: function () {
161+
controller.setAllChecked(!checked)
162+
}
163+
}
164+
Repeater {
165+
model: 3
166+
FluCheckBox {
167+
Layout.leftMargin: 24
168+
text: qsTr("Option %1").arg(index)
169+
clickListener: function () {
170+
controller.setItemChecked(this.toString(), !checked)
171+
}
172+
}
173+
onItemAdded: (index, item) => {
174+
controller.addItem(item.toString(), item)
175+
if (index === count - 1) {
176+
controller.setItemChecked(item.toString(), true)
177+
}
178+
}
179+
}
180+
}
181+
}
113182
}

0 commit comments

Comments
 (0)