Forums

OverviewFelgo 2 Support (Qt 5) › Popup Window

Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #19080

    Edward

    I have been playing with a popup type window but struggling to get anything to work how I want it too.

    I currently have a blank ‘News’ Page, which consists of a column, holding multiple rectangles, which would be headlines for news, with a background image.

    I want each of these to be clickable items which instead of pushing to a new QML page they bring up a popup which darkens the background  screen and displays a partial screen coverage of text/image which can potentially be scrolled through, my page is currently empty barring the below;

     

    How would I go about this? Thanks.

    import Felgo 3.0
    import QtQuick 2.0
    import QtMultimedia 5.9
    
    Page {
    
        titleItem: Item {
            width: dp(150)
            height: dp(Theme.navigationBar.height)
    
            Image {
                source: "../../assets/logo png.png"
                width: parent.width
                height: parent.height
                fillMode: Image.PreserveAspectFit
                y: Theme.isAndroid ? dp(Theme.navigationBar.titleBottomMargin) : 0
            }
        }
        AppFlickable {
            id: appFlickable; anchors.fill: parent; contentWidth: width; contentHeight: contentCol.height; topMargin: dp(10)
            Column {
                id: contentCol
                width: parent.width
                spacing: dp(Theme.navigationBar.defaultBarItemPadding)
    
                Rectangle {
                    width: parent.width
                    height: dp(150)
                    radius:  dp(8)
                    scale:  0.96
    
                }
    
    
                Rectangle {
                    width: parent.width
                    height: dp(150)
                    radius:  dp(8)
                    scale:  0.96
                }
    
                Rectangle {
                    width: parent.width
                    height: dp(150)
                    radius:  dp(8)
                    scale:  0.96
                }
    
                Rectangle {
                    width: parent.width
                    height: dp(150)
                    radius:  dp(8)
                    scale:  0.96
                }
    
                Rectangle {
                    width: parent.width
                    height: dp(150)
                    radius:  dp(8)
                    scale:  0.96
                }
    
                Rectangle {
                    width: parent.width
                    height: dp(150)
                    radius:  dp(8)
                    scale:  0.96
                }
    
                Rectangle {
                    width: parent.width
                    height: dp(150)
                    radius:  dp(8)
                    scale:  0.96
                }
            }
        }
    
    
    }
    

     

    #19084

    Günther
    Felgo Team

    Hi,

    you can add your PopUp item / container that shows the data to your main app, and simply show it as needed:

    import Felgo 3.0
    
    App {
      id: app
    
      // other code
    
      // popup overlay
      Item {
        id: popupOverlay
        visible: false // hidden by default
        enabled: visible 
        anchors.fill: parent
    
        // dark/transparent background
        Rectangle {
          anchors.fill: parent // fill whole screen
          color: "black"
          opacity: 0.25
        }
    
        Item {
          id: popUpContent
          anchors.centerIn: parent
    
          // your content area for the popup
          // set it up however you want
        }
      }
    
    
      function showPopup(parameters) {
        // you can pass some parameters and modify
        // the popup then in case you require different variations, e.g. pass your data with text/image here
        
        popupOverlay.visible = true
      } 
    
    }

    You can also add e.g. a MouseArea for closing the popup again (set invisible). To show the popup, you can use app.showPopup(…) from anywhere in your app, as the app identifier and it’s functions are globally available.
    You can also create an own QML type MyCustomPopup.qml and use this then instead of directly putting the UI into the Main.qml. This way you can keep your code more separated and cleaner.

    Best,
    Günther

    #19110

    Edward

    Hey! I have added this in!

     

    Sorry to be a bother, what are the parameters I would specify to make this pop when linked to a mouse area on click event? Thanks!

     

    Edward

    #19117

    Alex
    Felgo Team

    Hi Edward,

    the parameters was just an example how you could modify the popup with e.g. different text depending on the button.

    Here is a full example that you can try right away:

    import Felgo 3.0
    import QtQuick 2.9
    
    App {
      id: app
      
      NavigationStack {
      
        Page {
          title: "Overlay"
          
          Column {
            AppButton {
              text: "Button"
              onClicked: {
                app.showPopup("From Button")
              }
            }
            
            MouseArea {
              width: 300
              height: 200
              onClicked: {
                app.showPopup("From MouseArea")
              }
              
              Rectangle {
                anchors.fill: parent
                color: "grey"
              }
            }
          }
        }
      }
      
      // popup overlay
      // this is placed on top of the NavigationStack here, so it will cover the whole screen, not only the page content
      Item {
        id: popupOverlay
        anchors.fill: parent
        visible: false // hidden by default
        enabled: visible // disables all input elements (like MouseArea) of the popup if not visible
        
        // an alias to the text property, so popupOverlay.text can be used from outside to modify the text
        property alias text: popupText.text
        
        MouseArea {
          anchors.fill: parent
          onClicked: {
            popupOverlay.visible = false
          }
        }
    
        // dark/transparent background
        Rectangle {
          anchors.fill: parent // fill whole screen
          color: "black"
          opacity: 0.7
        }
    
        Rectangle {
          id: popUpContent
          anchors.centerIn: parent
          width: 300
          height: 300
          color: "white"
          
          AppText {
            id: popupText
            anchors.centerIn: parent
          }
    
          // your content area for the popup
          // set it up however you want
        }
      }
    
      function showPopup(textParameter) {
        popupOverlay.text = textParameter
        popupOverlay.visible = true
      } 
    }

    Cheers,
    Alex

Viewing 4 posts - 1 through 4 (of 4 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