ImagePicker

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

Import Statement:	import Felgo 3.0
Since:	Felgo 3.2.0

List of all members, including inherited members

Properties

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

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

Property Documentation

columns : int

By default, the view calculates the number of required columns based on the targetCellSize. You can modify the targetCellSize to adapt the responsive column count. Overwrite this property to use a custom column count.

See also targetCellSize.

maximumNumberOfSelection : int

The maximum number of selected photos. By default, up to 10 photos can be selected.

See also selection.

scrollIndicatorVisible : bool

Whether a ScrollIndicator should be visible when the user scrolls through the grid.

[read-only] selectedCount : int

Holds the number of selected photos.

See also selection.

[read-only] selection : var

Holds the list of the file paths to the currently selected photos.

See also selectedCount.

selectionColor : color

Allows to change the highlight color for the pre-configured selectionDelegate. Uses the Theme::backgroundColor by default.

See also selectionTintColor and selectionDelegate.

selectionDelegate : Component

Specifies an overlay item, which is shown for each selected photo in the view. Defaults to a transparent overlay with a small checked icon in the bottom right corner.

Set a custom delegate item to specify your own highlight effect:

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

See also selectionColor and selectionTintColor.

selectionTintColor : color

Allows to change the tint color for the pre-configured selectionDelegate. Uses the Theme::tintColor by default.

See also selectionColor and selectionDelegate.

targetCellSize : real

The approximate target size of each photo in the grid. Based on the available width, the view calculates the number of columns required to fill the grid.

The default value is dp(100).

See also columns.

Find the Best Demos and Examples

Contents