Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business

Forums

OverviewFelgo 2 Support (Qt 5) › Show FloatingActionButton when selecting NavigationItem

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #24299

    Edward

    Hello!

    I’m working on an application which uses the tab mode navigation on all platforms, as there could be several navigation items and I do not wish to add too many options, i’m looking at adding the Ellipsis at the end – which when clicked instead of pushing a new page, instead just adjusts the visibility of a column of FloatingActionButtons.

     

    E.g:

        Navigation {
            id: navigationRoot
            navigationMode: navigationModeTabs
    
            NavigationItem {
                icon: IconType.group
    
                NavigationStack {
                    Collaborate {
                    }
                }
            }
            NavigationItem {
                icon: IconType.paintbrush
    
                NavigationStack {
                    Create {
                    }
                }
            }
    
            NavigationItem {
                icon: IconType.ellipsisv
                onSelected: floatingColumn.visible === true ? visible = false : visible = true
            }
        }
    
    
    
            Column {
                id: floatingColumn
                z: 5
                width: settingsButton.width
                height: settingsButton.height * 3
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                visible: false
                FloatingActionButton {
                    id: settingsButton
                    icon: IconType.cog
                    visible: true
                    anchors.right: undefined
                    anchors.bottom: undefined
                }
                FloatingActionButton {
                    icon: IconType.user
                    visible: true
                    anchors.right: undefined
                    anchors.bottom: undefined
                }
                FloatingActionButton {
                    icon: IconType.envelope
                    visible: true
                    anchors.right: undefined
                    anchors.bottom: undefined
                }
            }

     

    However when clicking the NavigationItem it instead tried to push a non-existent page, even though there is none defined and all I call for is the selected handler to adjust the visibility?

     

    I have tried disabling the button and placing an iconButton in it’s place however this causes chaos with the anchoring and does not work as intended regardless!

     

    Any suggestions on this? Thanks.

    #24301

    Alex
    Felgo Team

    Hi Edward,

    an actual NavigationItem will indeed always try to push its child, and if there is none, an empty item will be pushed as you described. The easist way would be to, as you also mentioned, just overlay the empty NavigationItem (you still want to add the empty one to have a placeholder that takes care of the navigation layout) with a custom control.

    Minimal example:

    import QtQuick 2.5
    import Felgo 3.0
    
    App {
      Navigation {
        id: navigation
        navigationMode: navigationModeTabs
    
        NavigationItem {
          icon: IconType.heart
    
          NavigationStack {
            Page {
              title: "Page1"
            }
          }
        }
        NavigationItem {
          icon: IconType.heart
    
          NavigationStack {
            Page {
              title: "Page2"
            }
          }
        }
        NavigationItem {
          icon: IconType.ellipsisv
    
          // empty one
        }
      }
    
      MouseArea {
        width: navigation.width/3 // since there are 3 nav items
        height: dp(Theme.navigationTabBar.height)
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.bottomMargin: nativeUtils.safeAreaInsets.bottom // take care of potential safearea (e.g. iPhone 10 and up)
        onClicked: {
          console.debug("Clicked, open/close the floating action buttons here")
        }
    
        // You could also add a fully custom UI here
        Rectangle {
          anchors.fill: parent
          color: "#20ff0000"
        }
      }
    }
    

    Best,
    Alex

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

RSS feed for this thread

You must be logged in to reply to this topic.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded