[Edward]

Hi,

I currently have set up AppButtons to function as home page buttons to launch new pages, it works visually with my App.

Overall these work as intended but there are two instances where I get visual errors/glitches.

1. When moving to a page which contains an AppTabBar holding with 3 separate QML containing GridView the page opens fine, when swiping between the pages the grid goes from 4 columns to 1. If I change the resolution in my environment it corrects this – I receive no log errors when this happens, using the usual means of navigation does not cause this error.
2. When clicking on my ‘help’ page, which contains a navigation stack of help areas it pushes the page, but then crashes the app, with no error in logs.

is this something you have come across before, or what would you suggest to do differently?

 

Thanks

Edward

[AlexFelgo Team]

Hi Edward,

hm, this is very hard to investigate without any code. Is it possible that you can create a minimum example of the issue and post the code here?

Cheers,
Alex

[Edward]

Hi Alex, below is the code for my button, when leading to a swipeview page it causes graphically chaos!

           AppButton {
               id: resources
               text: "Resources"
               width: grid.width / grid.columns
               height: width
               minimumWidth: width
               minimumHeight: height
               icon: IconType.connectdevelop
               onClicked: {
               navigationStack.push(Qt.resolvedUrl("Resources.qml"))}
           }

 

[AlexFelgo Team]

Hi Edward,

thanks for the code. Could you also post a full running code example so we can investigate this faster?

Cheers,
Alex

[Edward]

of course, see below,

App Button in column on MainPage Qml:

        Rectangle {
            id: bookPageBar
            width: parent.width
            height: mainPage.height / 10
            scale: 0.96
            color: "#00000000"
            AppButton {
                anchors.fill: parent
                minimumHeight: parent.height
                minimumWidth: parent.width
                radius: dp(12)
                text: "Book/Edit my leave."
                backgroundColorPressed: "#1ae1fe"
                textColor: "#000000"
                backgroundColor: "#a4a4a4"
                onClicked: {
                    navigationStack.push(Qt.resolvedUrl("CalendarPage.qml"))
                }

            }
        }

 

 

CalendarPage.qml:

 

import Felgo 3.0
import QtQuick 2.0
import QtQuick.Controls 2.0 as QuickControls2
import "Years"

ListPage {
    id: listPage
    title: "Calendar"

    AppTabBar {
        id: appTabBar
        anchors.topMargin: 0
        contentContainer: swipeView

        AppTabButton {
            text: "2017"
        }
        AppTabButton {
            text: "2018"
        }
        AppTabButton {
            text: "2019"
        }
    }

    QuickControls2.SwipeView {
        id: swipeView
        anchors.top: appTabBar.bottom
        anchors.bottom: parent.bottom
        width: parent.width
        clip: true

        Rectangle {
            Seventeen {}
        }
        Rectangle {
            Eighteen {}
        }
        Rectangle {
            Nineteen {}
        }
    }

}

 

 

 

Pages seventeen/eighteen/nineteen are all as follows:

 

import Felgo 3.0
import QtQuick 2.0

Page {

    title: "2018"

    Grid {
        columns: 3
        width: parent.width
        anchors.horizontalCenter: parent.horizontalCenter

        Rectangle {
            border.color: "#000000"
            border.width: dp(3)
            radius: dp(12)
            width: parent.width / 3
            height: width
            scale: 0.9
            Text {
            text : "January"
            anchors.centerIn: parent
            }
        }
        Rectangle {
            border.color: "#000000"
            border.width: dp(3)
            radius: dp(12)
            width: parent.width / 3
            height: width
            scale: 0.9
            Text {
            text : "February"
            anchors.centerIn: parent
            }
        }
        Rectangle {
            border.color: "#000000"
            border.width: dp(3)
            radius: dp(12)
            width: parent.width / 3
            height: width
            scale: 0.9
            Text {
            text : "March"
            anchors.centerIn: parent
            }
        }
        Rectangle {
            border.color: "#000000"
            border.width: dp(3)
            radius: dp(12)
            width: parent.width / 3
            height: width
            scale: 0.9
            Text {
            text : "April"
            anchors.centerIn: parent
            }
        }
        Rectangle {
            border.color: "#000000"
            border.width: dp(3)
            radius: dp(12)
            width: parent.width / 3
            height: width
            scale: 0.9
            Text {
            text : "May"
            anchors.centerIn: parent
            }
        }
        Rectangle {
            border.color: "#000000"
            border.width: dp(3)
            radius: dp(12)
            width: parent.width / 3
            height: width
            scale: 0.9
            Text {
            text : "June"
            anchors.centerIn: parent
            }
        }
        Rectangle {
            border.color: "#000000"
            border.width: dp(3)
            radius: dp(12)
            width: parent.width / 3
            height: width
            scale: 0.9
            Text {
            text : "July"
            anchors.centerIn: parent
            }
        }
        Rectangle {
            border.color: "#000000"
            border.width: dp(3)
            radius: dp(12)
            width: parent.width / 3
            height: width
            scale: 0.9
            Text {
            text : "August"
            anchors.centerIn: parent
            }
        }
        Rectangle {
            border.color: "#000000"
            border.width: dp(3)
            radius: dp(12)
            width: parent.width / 3
            height: width
            scale: 0.9
            Text {
            text : "September"
            anchors.centerIn: parent
            }
        }
        Rectangle {
            border.color: "#000000"
            border.width: dp(3)
            radius: dp(12)
            width: parent.width / 3
            height: width
            scale: 0.9
            Text {
            text : "October"
            anchors.centerIn: parent
            }
        }
        Rectangle {
            border.color: "#000000"
            border.width: dp(3)
            radius: dp(12)
            width: parent.width / 3
            height: width
            scale: 0.9
            Text {
            text : "November"
            anchors.centerIn: parent
            }
        }
        Rectangle {
            border.color: "#000000"
            border.width: dp(3)
            radius: dp(12)
            width: parent.width / 3
            height: width
            scale: 0.9
            Text {
            text : "December"
            anchors.centerIn: parent
            }
        }
    }


}

 

 

 

 

when navigating to the swipeview through the navigation stack I can swipe between pages without issue, when using the app button it causes errors, I am happy to screen record this if you want me to?

 

Thanks

Edward

[GüntherFelgo Team]

Hi!

The Page Component is a special type, which integrates tightly with Navigation and NavigationStack components. This means you should try to avoid nesting Pages (having other Sub-Pages within a page). Your navigation structure only requires single Pages that live within NavigationItem or NavigationStack.

You should not have any layout issues after changing the Years/Pages in your SwipeView to a simple Item:

import Felgo 3.0
import QtQuick 2.0

Item {
  anchors.fill: parent

    Grid {
        columns: 3
        width: parent.width
        anchors.horizontalCenter: parent.horizontalCenter
    
   // ...
   }
}

Best,
Günther

[Edward]

Hey!

So the using the AppButton to push new pages is fine, it’s the pages nested in the SwipeView that are the cause of the issue?

Effectively replace the “Rectangle {Page}}” in my SwipeView with the item and full page contents there? removing the need for the other pages?

 

Thanks

[GüntherFelgo Team]

Yes, exactly.

For example if you have a Navigation > NavigationItem > NavigationStack > Page structure of QML items.
If the Page (e.g. CalenarPage), which lives on the NavigationStack, uses e.g. a SwipeView, you should not put Pages within the SwipeView. You can have e.g. a NavigationStack > Page > SwipeView > Rectangle > Item setup instead of NavigationStack > Page > SwipeView > Rectangle > Page.