Problem changing the states when switching the current screen to next screen



  • Hi,I want to implement this function,when the application start up ,the screen named mainscreen show a horizontal ListView showing some menu,below the ListView,there is a GridView showing many picture one bye one ,when I click on Picture ,the current screen should be replaced with a new screen named detailscreen with the some descriptions about the picture ,the descriptions is Column,below the Column ,there are tow buttons,one is back button ,when I click it ,the screen should be back to be the previous screen with ListView and GridView,after I am in the previous screen,I click on picture ,a problem shows.The problem is that mainscreen and detailscreen are showing at the same time in the screen.
    Here I will show some code in my qml file,some are framework only.

    main.qml
    @
    import QtQuick 1.0

    Rectangle{
    id:mainwindow
    FocusScope{
    id:mainView
    ListMenu{
    id:listMenu
    y: 0
    width: parent.width; height: 50; visible: true; anchors.bottom: gridmenu.top; anchors.bottomMargin: 11; smooth: true; scale: 1
    }

         GridMenu{
            id:gridmenu
            y:listMenu.height
            width: parent.width;height: parent.height
         }
    
    }
    
    BookDetails{id:bookdetails;width: parent.width;anchors.left: mainView.right;height: parent.height; state: "detailBook"}
    
    states:[
    State{
            name: "showBookGrid"
        },
    

    State{
    name: "detailBook"
    }
    ]

    transitions: [
        Transition {
            from: "*"; to: "showBookGrid"
           NumberAnimation { properties: "x,y"; duration: 500; easing.type: Easing.Linear }
       },
        Transition {
            from: "showBookGrid"; to: "detailBook"
            ParentAnimation {
                NumberAnimation { properties: "x,y"; duration: 500; easing.type: Easing.InOutQuad }
            }
        }
    ]
    

    }
    @

    GridMenu.qml
    @
    FocusScope{
    id:gridpicture
    Rectangle {
    anchors.fill: parent
    clip: true
    GridView{
    id:gridView
    model:RssModel{}
    delegate: DelegateGrid{}
    }
    }

    }
    @

    DelegteGrid.qml
    @
    Item{
    id:delegate
    function bookClicked() {
    delegate.state="Details"
    }
    Column{
    id:columnpicture
    Text {}
    Image {
    id:picture
    }
    }
    states: [
    State {
    name: "active";when: delegate.activeFocus
    PropertyChanges {
    target: columnpicture
    scale:1.1
    }
    },
    State {
    name: "Details"
    PropertyChanges { target: mainwindow; state: "detailBook" }
    PropertyChanges {target: mainView;x:-mainView.width}
    PropertyChanges { target: bookdetails; anchors.left: mainwindow.left }
    // ParentChange{target: picture;x:10;y:20;parent: bookdetails.frontContaner}
    // PropertyChanges { target: picture; anchors.left: mainwindow.left;x:10;y:20; }
    }
    ]

        MouseArea {
        id: mouseArea
        hoverEnabled: true
        width: picture.width;height: picture.height
        onClicked:{ bookClicked()}
    }
    

    }

    @

    ListMenu.qml
    @
    FocusScope{
    ListView{

    }

    }

    @

    DelegateList.qml
    @
    Item{
    id: containerlist
    Text{}
    MouseArea {
    anchors.fill: parent
    hoverEnabled: true
    onClicked: {
    ListView.view.currentIndex = index
    containerlist.forceActiveFocus()
    // mainwindow.currentFeed=feed
    gridmenu.currentFeed=feed

        }
    }
    states: State {
        name: "active"; when: containerlist.activeFocus
        PropertyChanges { target: label; color: "#FCFFF5"; scale: 1.1 }
        PropertyChanges { target: label; font.pixelSize: 20 }
    }
    
    transitions: Transition {
        NumberAnimation { properties: "scale"; duration: 100 }
    }
    

    }

    @

    BookDetails.qml

    @
    Item{
    id:contaner
    Item{
    id: contanerFront
    Column{
    Text {}
    Text {}
    Text {}
    }
    }
    Row{
    id:rowbottun
    Button {
    id: backtohome
    text: "Back "
    width: contaner.width/10;height: contaner.height/10
    focus: true
    MouseArea {
    id:backarea
    anchors.fill: parent
    onClicked: {
    console.log("mouse clicked")
    console.log(bookdetails.state)
    bookdetails.state="backtodetails"
    console.log(bookdetails.state)
    }
    }
    }
    }
    }

    @

    Button.qml

    @
    import QtQuick 1.0

    Item {
    id: container

    signal clicked
    
    property string text
    
    BorderImage {
        id: buttonImage
    }
    BorderImage {
        id: pressed
    }
    MouseArea {
        id: mouseRegion
        anchors.fill: buttonImage
        onClicked: { container.clicked(); }
    }
    Text {
        color: "white"
    }
    states: [
        State {
            name: "Pressed"
            when: mouseRegion.pressed == true
            PropertyChanges { target: pressed; opacity: 1 }
        }
    ]
    

    }

    @

    I have worked it for two more days to research the problem ,But I can't resolve it,
    Thank you for reply!
    My best regards!



  • i dont know that much, but hav u deleted or close the mainscreen after showing the detail screen.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.