From 85c2ddeb539c10454ecd17bfdd051ea149f15ec1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=A6=8C=EA=A6=AB=EA=A6=B6=EA=A6=8F=EA=A7=80=EA=A6=A6?= =?UTF-8?q?=EA=A6=BF=EA=A6=A7=EA=A6=AE=EA=A6=91=EA=A6=A9=EA=A6=AD=EA=A7=80?= Date: Wed, 1 Mar 2023 21:00:24 +0800 Subject: Popular courses stack layout uses a repeater --- HomeDefault.ui.qml | 147 ++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 118 insertions(+), 29 deletions(-) diff --git a/HomeDefault.ui.qml b/HomeDefault.ui.qml index bd143ba..489c204 100644 --- a/HomeDefault.ui.qml +++ b/HomeDefault.ui.qml @@ -6,7 +6,7 @@ import QtGraphicalEffects 1.15 Flickable { property alias counter: counter property alias tabs: tabs - property alias tabPane: tabPane + property alias tabsContent: tabsContent property alias getStarted: getStarted property bool doesntEmbed: Qt.platform.os === "android" || Qt.platform.os === "linux" @@ -252,6 +252,7 @@ Flickable { GridView { id: tabs + property int currentCount: 8 interactive: false anchors { left: parent.left @@ -263,58 +264,146 @@ Flickable { cellWidth: 142 cellHeight: 46 implicitHeight: width < 284 ? cellHeight * 5 : width < 426 ? cellHeight * 3 : width < 710 ? cellHeight * 2 : cellHeight - model: ListModel { ListElement { label: "Web Design" - index: 0 + count: 8 } ListElement { label: "Development" - index: 1 + count: 6 } ListElement { label: "Graphic Design" - index: 2 + count: 4 } ListElement { label: "Marketing" - index: 3 + count: 2 } ListElement { label: "Finance" - index: 4 + count: 2 } } - delegate: TabItem {} } } StackLayout { - id: tabsContent currentIndex: tabs.currentIndex - Layout.preferredHeight: tabPane.height + Layout.preferredHeight: width < 576 ? width * 1.3 + * tabs.currentCount + : width < 768 ? width / 2 * 1.3 + * (tabs.currentCount + tabs.currentCount % 2) / 2 + : width < 992 ? width / 3 * 1.3 + * (tabs.currentCount + (tabs.currentCount + 1) % 3) / 3 + : width / 4 * 1.3 + * (tabs.currentCount + (tabs.currentCount + 2) % 4) / 4 - GridView { - id: tabPane - interactive: false - Layout.fillWidth: true - cellWidth: width < 576 ? width - : width < 768 ? width / 2 - : width < 992 ? width / 3 - : width / 4 - cellHeight: cellWidth * 1.3 - height: width < 576 - ? cellHeight * count - : width < 768 - ? cellHeight - * (count + count % 2) / 2 - : width < 992 - ? cellHeight - * (count + (count + 1) % 3) / 3 - : cellHeight - * (count + (count + 2) % 4) / 4 + Repeater { + id: tabsContent + model: ListModel { + ListElement { + content: [ + ListElement { + image: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg" + level: "All level" + levelColor: "#ff6f42c1" + levelBackgroundColor: "#1a6f42c1" + title: "Sketch from A to Z: for app designer" + truncated: "Proposal indulged no do sociable he throwing settling." + }, + ListElement { + image: "https://eduport.webestica.com/assets/images/courses/4by3/02.jpg" + level: "Beginner" + levelColor: "#ff0cbc87" + levelBackgroundColor: "#1a0cbc87" + title: "Graphic Design Masterclass" + truncated: "Rooms oh fully taken by worse do Points afraid but may end Rooms" + }, + ListElement { + image: "https://eduport.webestica.com/assets/images/courses/4by3/03.jpg" + level: "Beginner" + levelColor: "#ff0cbc87" + levelBackgroundColor: "#1a0cbc87" + title: "Create a Design System in Figma" + truncated: "Rooms oh fully taken by worse do. Points afraid but may end afraid but may end." + }, + ListElement { + image: "https://eduport.webestica.com/assets/images/courses/4by3/07.jpg" + level: "Beginner" + levelColor: "#ff0cbc87" + levelBackgroundColor: "#1a0cbc87" + title: "Deep Learning with React-Native" + truncated: "Far advanced settling say finished raillery. Offered chiefly farther" + }, + ListElement { + image: "https://eduport.webestica.com/assets/images/courses/4by3/11.jpg" + level: "All level" + levelColor: "#ff6f42c1" + levelBackgroundColor: "#1a6f42c1" + title: "Build Responsive Websites with HTML" + truncated: "Far advanced settling say finished raillery. Offered chiefly farther" + }, + ListElement { + image: "https://eduport.webestica.com/assets/images/courses/4by3/12.jpg" + level: "Beginner" + levelColor: "#ff0cbc87" + levelBackgroundColor: "#1a0cbc87" + title: "Build Websites with CSS" + truncated: "Far advanced settling say finished raillery. Offered chiefly farther" + }, + ListElement { + image: "https://eduport.webestica.com/assets/images/courses/4by3/04.jpg" + level: "All level" + levelColor: "#ff6f42c1" + levelBackgroundColor: "#1a6f42c1" + title: "Learn Invision" + truncated: "Arrived off she elderly beloved him Course regard to up he hardly." + }, + ListElement { + image: "https://eduport.webestica.com/assets/images/courses/4by3/09.jpg" + level: "All level" + levelColor: "#ff6f42c1" + levelBackgroundColor: "#1a6f42c1" + title: "JavaScript: Full Understanding" + truncated: "Far advanced settling say finished raillery. Offered chiefly farther" + } + ] + } + } + + GridView { + id: tabPane + interactive: false + cellWidth: width < 576 ? width + : width < 768 ? width / 2 + : width < 992 ? width / 3 + : width / 4 + cellHeight: cellWidth * 1.3 + height: width < 576 + ? cellHeight * count + : width < 768 + ? cellHeight + * (count + count % 2) / 2 + : width < 992 + ? cellHeight + * (count + (count + 1) % 3) / 3 + : cellHeight + * (count + (count + 2) % 4) / 4 + model: content + delegate: CardGrid { + width: tabPane.cellWidth + height: tabPane.cellHeight + imageSource: image + badgeText: level + badgeColor: levelColor + badgeBackgroundColor: levelBackgroundColor + titleText: title + textTruncateText: truncated + } + } } } } -- cgit v1.2.3