FlowListLayout

Since: BlackBerry 10.0.0

#include <bb/cascades/FlowListLayout>

A layout used to fill rows and columns based on available space.

A FlowListLayout with two headers and ten entries

A FlowListLayout is used with a ListView to fill rows or columns with as many items as there's room for, based on the dimensions of the ListView.

You can set the layout of a ListView to a FlowListLayout by using the ListView::layout property.

The orientation property determines the direction in which list items are added to the list (for example, when using TopToBottom, items are added row-by-row starting from the top). Header items always occupy a full row (in vertical lists) or column (in horizontal lists) by themselves, but other items are placed so that rows/columns contain as many items as possible, given the preferred size of those items.

If headerMode is set to ListHeaderMode::None, FlowListLayout only uses the items that are direct children of ListView::rootIndexPath. In that case, all items are placed in one large section without any headers. Other values of headerMode cause the first level of items to be used as headers, and children of header items are then placed in flow layout sections after each header. If headerMode is set to ListHeaderMode::Overlay or ListHeaderMode::StickyOverlay, headers are placed on top of their children, at the beginning of each section.

Margin properties on root nodes of item visuals affect the spacing between items in a FlowListLayout. The distance between two items will be that of the largest of the two adjacent margins.

A preferred size can be specified on item visuals, but these are limited by the width or height (minus padding) of the ListView (width is limited in vertical lists, height is limited in horizontal lists).

Instead of specifying a preferred size on item visuals, a FlowListLayoutProperties object can be assigned to the root node of item visuals. In this way, the size of the items can be linked to the size of the ListView, with padding and margins taken into consideration.

This QML example demonstrates how to implement a list containing both stack sections and grid sections by using FlowListLayout. The DataModel is expected to contain a single type of item in each section; this example won't look good if item types are mixed inside a section.

ListView {
    topPadding: 6
    rightPadding: 6
    bottomPadding: 6
    leftPadding: 6

    layout: FlowListLayout { }
    dataModel: XmlDataModel {
        source: "model.xml"
    }

    listItemComponents: [
        ListItemComponent {
            type: "header"

            Header {
                topMargin: 8
                title: ListItemData.title
                subtitle: (ListItem.initialized ?
                    ListItem.view.dataModel.childCount(
                    ListItem.indexPath) : 0) + " results"
            }
        },
        ListItemComponent {
            type: "stack"

            StandardListItem {
                imageSource: ListItemData.icon
                title: ListItemData.title
            }
        },
        ListItemComponent {
            type: "grid"

            ImageView {
                rightMargin: 6
                bottomMargin: 6
                imageSource: ListItemData.imagePath
                layoutProperties: FlowListLayoutProperties {
                    aspectRatio: 4/3
                    fillRatio: 0.5
                }
            }
        }
    ]
}

This QML example demonstrates a flow layout in a list without headers. In this case, the headerMode property must be set to ListHeaderMode::None, otherwise the top level items are treated as headers. Headers always occupy a full row or column by themselves, no matter how small they are. Note that this particular example could have been implemented more easily by using GridListLayout, since all items are the same size.

ListView {
    dataModel: XmlDataModel { source: "model.xml" }
    layout: FlowListLayout { headerMode: ListHeaderMode.None }
    listItemComponents: [
        ListItemComponent {
            type: "item"

            ImageView {
                rightMargin: 6
                bottomMargin: 6
                imageSource: ListItemData.imagePath
                layoutProperties: FlowListLayoutProperties {
                    aspectRatio: 1
                    fillRatio: 1/3
                }
            }
        }
    ]
}


Overview

QML properties

headerMode: bb::cascades::ListHeaderMode::Type
orientation: bb::cascades::LayoutOrientation::Type
attachedObjects: QDeclarativeListProperty< QObject > [read-only]Inherited
objectName: QStringInherited
parent: QObject [read-only]Inherited
ui: bb::cascades::UIConfig [read-only]Inherited

QML signals

Public Functions Index

FlowListLayout ()
virtual ~FlowListLayout ()
bb::cascades::ListHeaderMode::TypeheaderMode () const
bb::cascades::LayoutOrientation::Typeorientation () const
Q_SLOT voidresetHeaderMode ()
Q_SLOT voidresetOrientation ()
Q_SLOT voidsetHeaderMode (bb::cascades::ListHeaderMode::Type newHeaderMode)
Q_SLOT voidsetOrientation (bb::cascades::LayoutOrientation::Type orientation)
virtual boolevent (QEvent *event)Inherited
voidsetObjectName (const QString &name)Inherited
virtual Q_INVOKABLE QStringtoDebugString () const Inherited
Q_INVOKABLE bb::cascades::UIConfig *ui () const Inherited

Static Public Functions Index

Buildercreate ()

Protected Functions Index

Only has inherited protected functions

BaseObject (QObject *parent=0)Inherited
virtual voidconnectNotify (const char *signal)Inherited
virtual voiddisconnectNotify (const char *signal)Inherited

Signals Index

voidheaderModeChanged (bb::cascades::ListHeaderMode::Type newHeaderMode)
voidorientationChanged (bb::cascades::LayoutOrientation::Type newOrientation)
voidcreationCompleted ()Inherited
voidobjectNameChanged (const QString &objectName)Inherited

Properties

bb::cascades::ListHeaderMode::Type headerMode

Determines if and how headers are shown by the FlowListLayout.

Since:

BlackBerry 10.0.0

bb::cascades::LayoutOrientation::Type orientation

The orientation for the flow layout.

The orientation determines the direction in which list items are added to the list (for example, when using TopToBottom, items are added row-by-row starting from the top). If items exist outside of the visible area, it is possible to scroll the list to view them.

Item sizes have no limitation in the orientation direction, but are limited in the opposite direction. For example, in a ListView that uses a FlowListLayout with an orientation of TopToBottom or BottomToTop, the height of the items is only limited by the items themselves. But, the width of items is limited by the width of the ListView, minus any leftPadding and rightPadding that might be applied on the ListView.

The default orientation is TopToBottom, but LeftToRight, RightToLeft, and BottomToTop can also be used.

Since:

BlackBerry 10.0.0

QDeclarativeListProperty< QObject > attachedObjectsInherited[read-only]

A hierarchical list of the UIObject's attached objects.

Since:

BlackBerry 10.0.0

QString objectNameInherited

This property is overridden from QObject.

See also:

QObject::objectName().

Since:

BlackBerry 10.0.0

QObject parentInherited[read-only]

A read-only property that represents this object's parent.

The parent of an object is specified using QObject::setParent(QObject*). The purpose of the property is to expose the object's parent to QML.

This property is read-only to prevent modifications from QML, where typically the parent is declaratively set. In C++ code, the parent can be explicitly set using QObject::setParent(QObject*), or implicitly set by adding it to a visual container.

The default value of this property is 0.

Since:

BlackBerry 10.0.0

bb::cascades::UIConfig uiInherited[read-only]

An object that gives access to unit conversion routines.

QML use:
        // Size using design units
        Container {
            preferredWidth: ui.du(12)
            preferredHeight: ui.du(5)
        }

        // Size using design units, snap to whole pixels
        Container {
            preferredWidth: ui.sdu(13.5)
            preferredHeight: ui.sdu(7.5)
        }

        // Size using absolute pixel values
        Container {
            preferredWidth: ui.px(150)
            preferredHeight: ui.px(50)
        }
C++ use:
Container *container1 = Container::create().background(Color::Red);
UIConfig *ui = container1->ui();
container1->setPreferredWidth(ui->du(12));
container1->setPreferredHeight(ui->du(5));

Container *container2 = Container::create().background(Color::Green);
container2->setPreferredWidth(ui->sdu(13.5));
container2->setPreferredHeight(ui->sdu(7.5));

Container *container3 = Container::create().background(Color::Blue);
container3->setPreferredWidth(ui->px(150));
container3->setPreferredHeight(ui->sdu(50));
Since:

Blackberry 10.3.0

Public Functions

FlowListLayout ()

Constructs a FlowListLayout instance.

Since:

BlackBerry 10.0.0

virtual~FlowListLayout ()

Destructor.

bb::cascades::ListHeaderMode::Type headerMode ()

Returns the value of the headerMode property.

Return:

The value of the headerMode property.

Since:

BlackBerry 10.0.0

bb::cascades::LayoutOrientation::Type orientation ()

Returns the orientation of this FlowListLayout.

Return:

The orientation.

Since:

BlackBerry 10.0.0

Q_SLOT void resetHeaderMode ()

Resets the headerMode property to its default value.

The default value is ListHeaderMode::Standard.

If the property value is changed, the headerModeChanged() signal is emitted.

Since:

BlackBerry 10.0.0

Q_SLOT void resetOrientation ()

Resets the orientation to its default value.

The default orientation is LayoutOrientation::TopToBottom.

If the orientation is changed, the orientationChanged() signal is emitted.

Since:

BlackBerry 10.0.0

Q_SLOT void setHeaderMode (

Sets the value of the headerMode property.

If the property value is changed, the headerModeChanged() signal is emitted.

Parameters
newHeaderMode

The value to set for the headerMode property.

Since:

BlackBerry 10.0.0

Q_SLOT void setOrientation (

Sets the orientation of this FlowListLayout.

If the orientation is changed, the orientationChanged() signal is emitted.

Parameters
orientation

The new orientation.

Since:

BlackBerry 10.0.0

virtual bool event (Inherited

Overloaded to implement the event mechanism in Cascades.

Warning!

If this function is overridden, it must be called by the derived class for events to work properly in Cascades.

Parameters
event

The received event.

Return:

True if the received event was recognized and processed, false otherwise.

Since:

BlackBerry 10.0.0

void setObjectName (Inherited

Sets the objectName property.

Parameters
name

The new name for the object.

Since:

BlackBerry 10.0.0

virtual Q_INVOKABLE QString toDebugString ()Inherited

Returns a debug string representing this object.

Return:

A debug string for the object.

Since:

BlackBerry 10.0.0

Q_INVOKABLE bb::cascades::UIConfig * ui ()Inherited

Returns the UIConfig for this ui object.

The UIConfig can be used to perform unit conversions from design units (du) and snapped design units (sdu) to pixels.

Ownership remains with Cascades.

C++ use:
Container *container1 = Container::create().background(Color::Red);
UIConfig *ui = container1->ui();
container1->setPreferredWidth(ui->du(12));
container1->setPreferredHeight(ui->du(5));

Container *container2 = Container::create().background(Color::Green);
container2->setPreferredWidth(ui->sdu(13.5));
container2->setPreferredHeight(ui->sdu(7.5));

Container *container3 = Container::create().background(Color::Blue);
container3->setPreferredWidth(ui->px(150));
container3->setPreferredHeight(ui->sdu(50));
Return:

The UIConfig for this ui object.

Since:

BlackBerry 10.3.0

Static Public Functions

Builder create ()

Creates and returns a builder for constructing a flow list layout.

Using the builder to create a flow list layout:
FlowListLayout* flowListLayout = FlowListLayout::create()
        .orientation(LayoutOrientation::LeftToRight);
Return:

A builder used for constructing a flow list layout.

Since:

BlackBerry 10.0.0

Protected Functions

(Only has inherited protected functions)

BaseObject (Inherited

Constructs an instance of BaseObject's subclass.

Parameters
parent

An optional parent, defaults to 0.

Since:

BlackBerry 10.0.0

virtual void connectNotify (
  • const char *signal)
Inherited

Overloaded to implement the event mechanism in Cascades.

If this function is overridden, it must be called by the derived class for events to work properly in Cascades.

Parameters
signal

The connected signal.

Since:

BlackBerry 10.0.0

virtual void disconnectNotify (
  • const char *signal)
Inherited

Overloaded to implement the event mechanism in Cascades.

If this function is overridden, it must be called by the derived class for events to work properly in Cascades.

Parameters
signal

The disconnected signal.

Since:

BlackBerry 10.0.0

Signals

void headerModeChanged (

Emitted when the headerMode property has changed.

Note:

Due to a workaround for a Qt Core issue with accessing enums from QML, the argument of this signal doesn't follow the naming convention for signals, in which the signal arguments are typically named to match the associated property's name. Use the object's property, instead of the signal argument, to access the current property value and avoid runtime errors ( use headerMode instead of newHeaderMode).

Parameters
newHeaderMode

The new value for the headerMode property.

Since:

BlackBerry 10.0.0

void orientationChanged (

Emitted when the orientation property has changed.

Note:

Due to a workaround for a Qt Core issue with accessing enums from QML, the argument of this signal doesn't follow the naming convention for signals, in which the signal arguments are typically named to match the associated property's name. Use the object's property, instead of the signal argument, to access the current property value and avoid runtime errors (use orientation instead of newOrientation).

Parameters
newOrientation

The new orientation.

Since:

BlackBerry 10.0.0

void creationCompleted ()Inherited

Emitted when this object is instantiated as a result of loading a QML document and creating the root node (only after the root component that caused this instantiation has completed construction), or when the object is being constructed from its builder class.

This signal indicates that the construction and initialization of the object has been completed, the properties are initialized, and any QML binding values have been assigned to the object.

This signal is not emitted when the object is constructed from C++ using the constructor. If the object is constructed using its builder class, the signal is emitted when the the builder class returns the fully constructed object.

This signal can be used when there is an activity that needs to be performed, such as a property state integrity verification after the object is instantiated from a QML document or a builder, but before control is returned to the application.

See also:

QmlDocument

Since:

BlackBerry 10.0.0

void objectNameChanged (Inherited

This signal is emitted when the objectName property is changed.

Since:

BlackBerry 10.0.0

Last modified: 2014-09-29



Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus