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.

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