[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
            }
        }
    }


}

 

[GüntherFelgo 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

[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

[AlexFelgo 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