• Home

ImagePicker

A GridView to show and select multiple photos from the device. More...

• List of all members, including inherited members

Properties

• autoSelectClickedPhotos : bool
• columns : int
• maximumNumberOfSelection : int
• scrollIndicatorVisible : bool
• selectedCount : int
• selection : var
• selectionColor : color
• selectionDelegate : Component
• selectionIndices : var
• selectionTintColor : color
• targetCellSize : real

Signals

• photoClicked(int photoIndex)

Methods

• void clearSelection()
• void deselect(int photoIndex)
• void select(int photoIndex)

Detailed Description

ImagePicker is a custom QML GridView, which accesses photos from the device gallery or camera roll. It supports selecting multiple images. The selection is available with the selection property.

Note: For selecting a single image, you can also use the NativeUtils::displayImagePicker() function. It uses the image picker dialog of the native platform instead of the custom QML view of ImagePicker.

Usage Examples

Image Picker Page

The following example shows how you can use the ImagePicker in one of your app pages.

 import Felgo 3.0
 import QtQuick 2.0

 App {
   NavigationStack {
     Page {
       id: page
       title: qsTr("Choose Photos")

       // right bar item to accept selection
       rightBarItem: TextButtonBarItem {
         text: "Next"
         enabled: imagePicker.selectedCount > 0

         // your app will probably pop the photo selection page from the stack to move on
         // this example only logs the selected photos
         onClicked: console.debug("SELECTED:", JSON.stringify(imagePicker.selection))
       }

       // image picker view for photo selection
       ImagePicker {
         id: imagePicker
         anchors.fill: parent
       }
     }
   }
 }

By default, the ImagePicker layouts the items from left to right and allows to scroll vertically if there's not enough space. You can also use horizontal scrolling instead and layout items from top to bottom with the GridView::flow setting:

 import Felgo 3.0
 import QtQuick 2.5

 App {
   NavigationStack {
     Page {
       title: qsTr("Choose Photos")

       // image picker view for photo selection
       ImagePicker {
         id: imagePicker
         anchors.fill: parent

         // use top-to-bottom flow with horizontal scrolling
         flow: ImagePicker.FlowTopToBottom
       }
     }
   }
 }

Custom ImagePicker Selection Handling

When clicking a photo, the ImagePicker automatically selects or deselects the image. When the maximumNumberOfSelection is reached, no image can be selected. To change the default selection behavior, disable the autoSelectClickedPhotos property and use the photoClicked() signal handler to add a custom solution.

This example does not block the image selection when the maximum number is reached and instead deselects the first photo to make space for the new one:

 import Felgo 3.0
 import QtQuick 2.0

 App {
   NavigationStack {
     Page {
       id: page
       title: qsTr("Choose Photos")

       ImagePicker {
         anchors.fill: parent
         maximumNumberOfSelection: 2
         autoSelectClickedPhotos: false
         onPhotoClicked: {
           // clicking a selected photo deselects it
           if(selectionIndices.indexOf(photoIndex) > -1) {
             deselect(photoIndex)
           }
           else {
             // if the maximum selection count is reached, deselect the first photo
             if(selectedCount == maximumNumberOfSelection) {
               let firstPhotoIdx = selectionIndices[0]
               deselect(firstPhotoIdx)
             }

             // select the clicked photo
             select(photoIndex)
           }
         }
       }
     }
   }
 }

Property Documentation

 import Felgo 3.0
 import QtQuick 2.5

 App {
   Page {
     // image picker view for photo selection
     ImagePicker {
       id: imagePicker
       anchors.fill: parent

       // customization of selection, remove to use default style
       selectionColor: "white"
       selectionDelegate: Component {
         Rectangle {
           color: Qt.rgba(0, 0, 0, 0.5)
           anchors.fill: parent

           // use parent.selectionIndex to get the current index
           property int index: parent.selectionIndex

           // use parent.isSelected to check whether the image is selected
           // the delegate overlay is already visible when the user presses the mouse-area
           // this allows to also add a custom pressed effect
           property bool selected: parent.isSelected

           AppText {
             visible: selected
             text: index + 1
             font.pixelSize: sp(36)
             anchors.centerIn: parent
             color: imagePicker.selectionColor
           }
         }
       }
     }
   }
 }

Signal Documentation

Method Documentation