ImagePicker

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

Import Statement: import .
Since: V-Play 2.18.4
Inherits:

GridView

Properties

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 VPlayApps 1.0
 import QtQuick 2.5

 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 VPlayApps 1.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
       }
     }
   }
 }

More Frequently Asked Development Questions

Find more examples for frequently asked development questions and important concepts in the following guides:

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 VPlayApps 1.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.


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