使用stackView完成界面跳转

AicsKnowledgeBase/qml/MainWindow.qml

@@ -4,6 +4,7 @@ import QtQuick.Window
 import QtQuick.Controls
 import QtQuick.Controls.Basic
 import FluentUI
+import SignalFileOperation 1.0
 import org.wangwenx190.FramelessHelper
 import "qrc:///AicsKnowledgeBase/qml/global"
 import "qrc:///AicsKnowledgeBase/qml/page"
@@ -54,16 +55,77 @@ FluWindow {
             }
         }
 
-
+        StackView {
-        ContentPage {
+            id: stack_view
             Layout.fillHeight: true
             Layout.fillWidth: true
             Layout.topMargin: 45
             Layout.bottomMargin: 4
             Layout.rightMargin: 4
-            type: "md"
+            replaceEnter: Transition {
+                    PropertyAnimation {
+                        target: stack_view
+                        property: "opacity"
+                        from: 0
+                        to: 1
+                        duration:700
+                        easing.type: Easing.InOutElastic;
+                        easing.amplitude: 2.0;
+                        easing.period: 1.5
+                    }
+                }
+            replaceExit: Transition {
+                PropertyAnimation {
+                    target: stack_view
+                    property: "opacity"
+                    from: 1
+                    to: 0
+                    duration:500
+                    easing.type: Easing.InOutElastic;
+                    easing.amplitude: 2.0;
+                    easing.period: 1.5
+                }
+            }
         }
 
+        Connections {
+            target: SignalFileOperation
+            function onOpen(file) {
+                stack_view.push(file_view, {knowledgeFileId: file})
+            }
+            function onOpenNote(note) {
+                stack_view.push(note_view, {noteFileId: note})
+            }
+            function onBack() {
+                if(stack_view.depth > 0)
+                    stack_view.pop()
+            }
+        }
+
+        Component {
+            id: file_view
+            ContentPage {
+
+            }
+        }
+
+        Component {
+            id: note_view
+            NotePage {
+
+            }
+        }
+
+
+//        ContentPage {
+//            Layout.fillHeight: true
+//            Layout.fillWidth: true
+//            Layout.topMargin: 45
+//            Layout.bottomMargin: 4
+//            Layout.rightMargin: 4
+//            type: "md"
+//        }
+
 
         /*
         FluArea {

AicsKnowledgeBase/qml/global/SignalFileOperation.qml

@@ -5,4 +5,5 @@ import QtQuick
 QtObject {
     signal open(string file)
     signal openNote(string note)
+    signal back()
 }

AicsKnowledgeBase/qml/page/ContentPage.qml

@@ -40,9 +40,10 @@ FluArea {
     id: content_area
     paddings: 0
     backgroundColor: "#f9f9f9"
-    visible: false
+//    visible: false
     property string type: ""
     property string knowledgeFileId
+    signal back()
     signal download(string knowledgeFileId)
     signal clickTags(string tagName)
 
@@ -52,13 +53,6 @@ FluArea {
     //        bottom: 10
     //        left: 10
     //    }
-    Connections {
-        target: SignalFileOperation
-        function onOpen(file) {
-            content_area.visible = true
-            content_page.loadFile(file)
-        }
-    }
 
     FluScrollablePage {
         id: content_page
@@ -69,6 +63,7 @@ FluArea {
         bottomPadding: 0
 
         property string fileId
+        property int noteCount: 0
         property int favoriteCount: 0
         property int shareCount: 0
         property int browsCount: 555
@@ -77,7 +72,7 @@ FluArea {
         property double fileSize: 455
         property string title: "文章标题"
         property list<string> tags: ["tag 1", "tag 2", "tag 3"]
-        property string publishTime: "2020-01-01"
+        property var publishTime
         property string brief: "这是一个简介"
 
         function getType(suffix) {
@@ -117,12 +112,24 @@ FluArea {
                 }
                 content_page.favoriteCount = starers.length
             })
+
         }
 
         Component.onCompleted: {
-
+            loadFile(knowledgeFileId)
+            console.log(content_area.type)
         }
 
+        FluIconButton {
+            iconSize: 12
+            iconSource: FluentIcons.Back
+            onClicked: {
+                emit: SignalFileOperation.back()
+            }
+            Layout.margins: -5
+        }
+
+
         Item {
             Layout.fillWidth: true
             implicitHeight: 50
@@ -148,7 +155,7 @@ FluArea {
                     }
                 }
                 FluText {
-                    text: ""
+                    text: content_page.noteCount
                     font.pointSize: 8
                     Layout.alignment: button_note.Center
                     Layout.topMargin: -5
@@ -260,38 +267,47 @@ FluArea {
             }
         }
 
-        Loader {
+        WebEngineView {
-            id: content_view
             Layout.fillWidth: true
-            sourceComponent: video_view
+            backgroundColor: "transparent"
+            implicitHeight: 200
+            settings.javascriptEnabled: true
+            settings.pluginsEnabled: true
+            url: "https://www.baidu.com"
         }
 
-        Component {
+//        StackView {
-            id: video_view
+//            id: content_view
-            FluMediaPlayer {
+//            Layout.fillWidth: true
-                Layout.fillWidth: true
+//            implicitHeight: 400
-                implicitHeight: width * 9 / 16.
+//            initialItem: other_view
-            }
+//        }
-        }
+
-        Component {
+//        Component {
-            id: text_view
+//            id: video_view
-            NoteEditPage {
+//            FluMediaPlayer {
-                noteId: "255454"
+//                width: parent.width
-                Layout.fillWidth: true
+//                implicitHeight: width * 9 / 16.
-                implicitHeight: 400
+//            }
-            }
+//        }
-        }
+//        Component {
-        Component {
+//            id: text_view
-            id: other_view
+//            NoteEditPage {
-            WebEngineView {
+//                noteId: "255454"
-                Layout.fillWidth: true
+//                width: parent.width
-                id: sitemonitory_view
+//                implicitHeight: 400
-                backgroundColor: "transparent"
+//            }
-                implicitHeight: 200
+//        }
-                settings.javascriptEnabled: true
+//        Component {
-                settings.pluginsEnabled: true
+//            id: other_view
-                url: "https://www.baidu.com"
+//            WebEngineView {
-            }
+//                width: parent.width
-        }
+//                backgroundColor: "transparent"
+//                implicitHeight: 200
+//                settings.javascriptEnabled: true
+//                settings.pluginsEnabled: true
+//                url: "https://www.baidu.com"
+//            }
+//        }
     }
 }

AicsKnowledgeBase/qml/page/NotePage.qml

@@ -8,16 +8,16 @@ import FluentUI
 import AicsKB.FileTransferManager
 import SignalFileOperation 1.0
 import "qrc:///AicsKnowledgeBase/qml/page"
+import "qrc:///AicsKnowledgeBase/qml/component"
+import "qrc:///AicsKnowledgeBase/qml/global"
 
 FluArea {
     id: note_area
     paddings: 0
     backgroundColor: "#f9f9f9"
-    visible: false
+//    visible: false
     property string type: ""
-    property string noteId
+    property string noteFileId
-    property string isFile: false
-    property string knowledgeUrl : "aics/main/knowledge/"
     signal clickTags(string tagName)
 
     //    paddings: {
@@ -26,12 +26,6 @@ FluArea {
     //        bottom: 10
     //        left: 10
     //    }
-    Connections {
-        target: SignalFileOperation
-        function onOpen(file) {
-
-        }
-    }
 
     FluScrollablePage {
         id: note_page
@@ -41,44 +35,45 @@ FluArea {
         rightPadding: 10
         bottomPadding: 0
 
+        property string fileId
         property int likeCount: 0
         property int favoriteCount: 0
         property int shareCount: 0
         property int browsCount: 555
         property bool isLike: false
         property bool isFavorite: false
-        property bool isDownload: false
         property double fileSize: 455
-        property list<string> tags: ["tag1", "tag2", "tag3"]
+        property string title: "文章标题"
-        property string publishTime: "2002-01-01"
+        property list<string> tags: ["tag 1", "tag 2", "tag 3"]
+        property string publishTime: "2020-01-01"
         property string brief: "这是一个简介"
 
         function getType(suffix) {
             if(suffix === "md")
-                return "md"
+                return "MD"
-            else if(suffix === "mp4" || suffix === "avi" || suffix === "rmvb" || suffix === "mkv")
+            else if(suffix === "mp4" || suffix === "avi"
-                return "video"
+                    || suffix === "rmvb" || suffix === "rm"
-            else return "other"
+                    || suffix === "wmv" || suffix === "mkv")
+                return "VIDEO"
+            else return "OTHER"
         }
 
-        function loadFile(noteId) {
+        function loadFile(noteFileId) {
-            var fileUrl = knowledgeUrl+noteId
+            note_area.noteFileId = noteFileId
-            Request.get(fileUrl, function (response) {
+
-                var data = JSON.parse(response)
+        }
-                console.log(data.knowledgeFileAttribute)
+
-                publishTime = data.createTime
+        Component.onCompleted: {
-                type = getType(data.knowledgeFileAttribute.suffix)
+
-                brief = data.knowledgeFileAttribute.brief
+        }
-                fileSize = data.knowledgeFileAttribute.size
+
-                browsCount = data.knowledgeFileAttribute.pageView
+        FluIconButton {
-                var tagString = ""
+            iconSize: 12
-                for (var j = 0; j < file.knowledgeFileAttribute.tags.length; j++) {
+            iconSource: FluentIcons.Back
-                    if (j != 0)
+            onClicked: {
-                        tagString = tagString + ","
+                emit: SignalFileOperation.back()
-                    tagString = tagString + file.knowledgeFileAttribute.tags[j].name
+            }
-                }
+            Layout.margins: -5
-                tags = tagString.split(",")
-            })
         }
 
         Item {
@@ -88,7 +83,7 @@ FluArea {
             FluText {
                 id: text_title
                 padding: 10
-                text: "文章标题"
+                text: note_page.title
                 font {
                     pointSize: 15
                     bold: true
@@ -100,7 +95,7 @@ FluArea {
                     id: button_share
                     iconSize: 15
                     iconSource: FluentIcons.Share
-                    text: content_page.shareCount.toString()
+                    text: note_page.shareCount.toString()
                 }
                 FluText {
                     id: text_share
@@ -118,12 +113,8 @@ FluArea {
                 id: layout_favorite
                 FluIconButton {
                     id: button_favorite
-
                     iconSize: 15
                     iconSource: note_page.isFavorite ? FluentIcons.FavoriteStarFill : FluentIcons.FavoriteStar
-                    onClicked: {
-                        Request.put()
-                    }
                 }
                 FluText {
                     id: text_favorite
@@ -146,7 +137,7 @@ FluArea {
                 }
                 FluText {
                     id: text_like
-                    text: note_page.favoriteCount
+                    text: note_page.likeCount
                     font.pointSize: 8
                     Layout.alignment: button_like.Center
                     Layout.topMargin: -5
@@ -156,20 +147,6 @@ FluArea {
                     right: layout_favorite.left
                 }
             }
-            FluIconButton {
-                id: button_download
-                iconSize: 25
-                iconSource: note_page.isDownload ? FluentIcons.OEM : FluentIcons.Download
-                anchors {
-                    verticalCenter: text_title.verticalCenter
-                    right: layout_like.left
-                    rightMargin: 20
-                }
-                onClicked: {
-                    emit: content_area.download(content_area.knowledgeFileId)
-                    FileTransferManager.download(content_area.knowledgeFileId)
-                }
-            }
         }
 
         FluArea {
@@ -177,32 +154,33 @@ FluArea {
             implicitHeight: 100
             ColumnLayout {
                 RowLayout {
+                    width: parent.width
                     FluText {
                         padding: 10
-                        text: content_page.publishTime
+                        text: note_page.publishTime
                     }
                     FluText {
                         padding: 10
-                        text: content_page.fileSize.toString() + "MB"
+                        text: note_page.fileSize.toString() + "MB"
                     }
                     FluText {
                         padding: 10
-                        text: content_page.browsCount.toString() + "浏览量"
+                        text: note_page.browsCount.toString() + "浏览量"
                     }
                 }
                 FluText {
                     Layout.topMargin: -2
                     Layout.leftMargin: 10
-                    text: content_page.brief
+                    text: note_page.brief
                 }
                 RowLayout {
                     Layout.topMargin: 2
                     Layout.leftMargin: 5
                     Repeater {
-                        model: content_page.tags
+                        model: note_page.tags
                         delegate: Button {
                             Layout.margins: 2
-                            text: "#" + content_page.tags[index]
+                            text: "#" + note_page.tags[index]
                             background: Rectangle {
                                 implicitHeight: 10
                                 implicitWidth: 10
@@ -210,20 +188,18 @@ FluArea {
                                 radius: 10
                             }
                             onClicked: {
-                                emit: content_area.clickTags(text)
+                                emit: note_area.clickTags(text)
                             }
                         }
                     }
                 }
             }
         }
-
         NoteEditPage {
-            id: md_edit_page
+            id: text_view
             noteId: "255454"
-            Layout.fillWidth: true
+            width: parent.width
             implicitHeight: 400
         }
-
     }
 }

AicsKnowledgeBase/src/main.cpp

@@ -62,7 +62,7 @@ int main(int argc, char *argv[])
 					 &app, [url](QObject *obj, const QUrl &objUrl) {
 				if (!obj && url == objUrl)
 					QCoreApplication::exit(-1);
-			}, Qt::QueuedConnection);
+            }, Qt::QueuedConnection);
 	engine.load(url);
 	auto result = QGuiApplication::exec();
 	httpClient->deleteLater();