代码之家  ›  专栏  ›  技术社区  ›  bhupinder

与stackview一起使用时,Swipeview不显示屏幕

  •  0
  • bhupinder  · 技术社区  · 7 年前

    我正在应用程序中实现stackview。

       ApplicationWindow {
        id: window
        width: 360
        height: 520
        visible: true
        title: "City Explorer"
        color:"#FAF7F7"
    
        Loader {
            id: splashLoader
            anchors.fill: parent
            source: "../AppFooter.qml"
            visible: true
        }
    
    
        footer: TabBar {
            id: appfooter
            currentIndex: 0
            background: Rectangle {
                color: "#d6d6d6"
            }
    
            TabButton {
                id: control1
                background: Rectangle {
                    width: 44
                    height: 40
                    border.color: "#000000"
                    color: "#d6d6d6"
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.Bottom
                    Image {
                        id: contentImage
    
                        fillMode: Image.PreserveAspectFit
                    }
                }
                onClicked: {
                    contentImage.source = "../images/dashboard_active.png"
                    contentImage1.source = "../images/settings_inactive.png"
                }
            }
            TabButton {
                id: control2
                   background: Rectangle {
                        width: 44
                        height: 40
                        color: "#d6d6d6"
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenter: parent.verticalCenter
                        Image {
                            id: contentImage1
                            fillMode: Image.PreserveAspectFit
                        }
                   }
                   onClicked: {
                       contentImage.source = "../images/dashboard_inactive.png"
                       contentImage1.source = "../images/settings_active.png"
                       contentImage2.source = "../images/bookings_inactive.png"
                   }
            }
        }
    
        header: ToolBar {
            id:appheader
            visible: false
            RowLayout {
                spacing: 20
                anchors.fill: parent
    
                ToolButton {
                    id:backButton
                    visible: false
                    contentItem: Image {
                        fillMode: Image.Pad
                        horizontalAlignment: Image.AlignHCenter
                        verticalAlignment: Image.AlignVCenter
                        source: stackView.depth > 1 ? "../images/back.png" : ""
                    }
                    onClicked: {
                        if (stackView.depth > 1) {
                            stackView.pop()   
                        } else {
                        }
                    }
                }
    
                Label {
                    id: titleLabel
                    text: "City Explorer"
    
                    font.pixelSize: 20
                    elide: Label.ElideRight
                    horizontalAlignment: Qt.AlignHCenter
                    verticalAlignment: Qt.AlignVCenter
                    Layout.fillWidth: true
                }
            }
        }
    
        StackView {
           id: stackView
           initialItem: Pane {
              id: pane
           }
        }
    }
    

    SightListViewForm。用户界面。qml公司

    Item {
        width: 360
        height: 520
        property alias mouseArea: mouseArea
    
        MouseArea {
            id: mouseArea
            anchors.rightMargin: 0
            anchors.bottomMargin: 0
            anchors.fill: parent
    
            Rectangle {
                id: rectangle
                x: 38
                y: 21
                width: 200
                height: 200
                color: "#e03636"
    
                Label {
                    id: label
                    x: 61
                    y: 150
                    width: 154
                    height: 28
                    text: qsTr("Overlapping view")
                    z: 2
                }
            }
        }
    }
    

    设置窗体。用户界面。qml公司

    Item {
        width: 400
        height: 400
    
        Image {
            id: image
            x: 101
            y: 85
            width: 150
            height: 162
            source: "images/singapore.png"
    
            Label {
                id: label
                x: 8
                y: 100
                width: 142
                height: 23
                text: qsTr("Label")
            }
        }
    }
    

    SwipeView {
        id: swipeView
        anchors.fill: parent
        currentIndex: showfooter.currentIndex
    
            DashboardListView{
            id:dashboard
            }
    
            Settings{
            id:setting
            }
    }
    

    仪表板ListViewForm。用户界面。qml公司

    Item {
        id: item1
        width: 360
        height: 520
        property alias button: button
        visible: true
    
        Button {
            id: button
            x: 130
            y: 287
            text: qsTr("Button")
            onClicked: {
                    console.log("SightListView.qml")
                    stackview.push("SightListView.qml")
                }
        }
    }
    

    When Initally Window loaded and on pressing button stachview.push will load new window

    SightListViewForm is loaded

    Now when i select Settings icon from footer Setting view loaded but comes behind SightListViewForm. I want settings view to come on top same for other tabs in fotter

    当视图最初加载时按下按钮,它调用stackview。按下加载SightListViewForm的按钮,然后当我按下页脚的设置图标时,我的设置视图位于SightListViewForm后面。 我该如何改变Stackview或Swipeview的这种行为,或者我缺少一些应该添加的内容。我对此不清楚。

    1 回复  |  直到 7 年前
        1
  •  0
  •   bhupinder    7 年前

    事实证明,我必须将stackview保留在页脚而不是主视图中。qml公司

    DashboardListView{
        id:dashboard
            StackView {
               id: stackView
    
               initialItem: Pane {
                  id: pane
               }
            }
        }
    

    在main中创建AppFooter。qml公司

    AppFooter{
        id:appfooterglobal
        visible: false
    }
    
    推荐文章