Forums

OverviewFelgo 2 Support (Qt 5) › Graphical Error when using AppButton to push new QML

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #19112

    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

    #19137

    Alex
    Felgo 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

    #19164

    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"))}
               }

     

    #19169

    Alex
    Felgo Team

    Hi Edward,

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

    Cheers,
    Alex

    #19209

    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

    #19220

    Günther
    Felgo 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

    #19225

    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

    #19226

    Günther
    Felgo 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.

     

Viewing 8 posts - 1 through 8 (of 8 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support