Find the Best Demos and Examples

Check out this quick tour to find the best demos and examples for you, and to see how the Felgo SDK can help you to develop your next app or game!

Forums

OverviewFelgo 2 Support (Qt 5) › Mouse Area Issue with leftBarItem: IconButtonBarItem { }

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #19963

    Jonathan

    I’m setting up a Felgo App that has both TabControl and a Side Drawer Navigation for all platforms (each with a different mix of navigation items).

    To open the Side Drawer, I’m using IconButtonBarItem on the first page of each major section, but the clickable area seems to not include the icon itself and consists of an invisible sliver of the navigation bar just to the right of the icon. This is true for all platform themes. Below is a simplified reconstruction of my app.

    Main.qml

    import Felgo 3.0
    import QtQuick 2.0
    
    App {    
        id: app
        onInitTheme: { // Custom theme settings }
        MainPage { }
    }

     

    MainPage.qml

    import Felgo 3.0
    import QtQuick 2.0
    import "pages"
    
    Page {
        id: mainPage
        SideNav { id: sideNav }
        TabControl {
            tabPosition: Qt.BottomEdge
            showIcon: true
            NavigationItem {
                icon: IconType.briefcase
                AccountsPage { }
            }
            NavigationItem {
                icon: IconType.arrowdown
                ReceivePage { }
            }
            NavigationItem {
                icon: IconType.arrowup
                SendPage { }
            }
            NavigationItem {
                icon: IconType.thlist
                ActivityPage { }
            }
        }
    }

     

    pages/AccountsPage.qml

    import Felgo 3.0
    import QtQuick 2.0
    
    NavigationStack {
        id: stack
        Page {
            title: qsTr("Accounts")
    
            leftBarItem: IconButtonBarItem {  // <-- ICON NOT CLICKABLE
                icon: IconType.bars
                onClicked: sideNav.open()
            }
            // Page contents
        }
    }

     

    pages/SideNav.qml

    import Felgo 3.0
    import QtQuick 2.0
    
    AppDrawer {
        id: sideNav
        z: 1
        // SideNav content
        }
    }
    

     

    #19964

    Jonathan

    UPDATE:

    I figured out the issue. The width of the AppDrawer.slideInDist property was obscuring the left navigation button. When I adjusted the width down to dp(16), it was no longer in the way.

    #19975

    Günther
    Felgo Team

    Hi Jonathan,

    your solution is correct. When dealing with multiple items that receive touch input by e.g. using a MouseArea, overlapping touch areas can prevents touch input from going through to underlying components.

    For the drawer, the slideInDist property sets the size of the touch-area for the drawer slide-in gesture.

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

RSS feed for this thread

You must be logged in to reply to this topic.