GridLayout

Since: BlackBerry 10.3.0

#include <bb/cascades/GridLayout>

A layout that arranges a container's children in a grid.

A grid layout uses cells to arrange components in the order they are added in your code. You specify the number of vertical columns in the grid using the columnCount property, and the OS determines the number of rows automatically based on the total number of components in your grid layout. For example, if you add five components and specify a columnCount of 2, your grid layout will have three rows total, with two components in the first row, two in the second, and one in the third.

Each cell of a GridLayout behaves in a similar fashion as a Container with a single child control regarding padding and alignment properties.

You can use the Control::horizontalAlignment and Control::verticalAlignment properties to specify how controls are aligned horizontally (left, center, or right) and vertically (top, center, bottom) within the control's grid cell. Controls can also expand or contract to fill the cell in a specified direction.

For instance, setting the horizontalAlignment property to HorizontalAlignment.Fill and setting a leftPadding of 10 causes a child control to fill the cell area, but leave 10 units of spacing to the left of the child within the cell's area. Additionally, setting a leftPadding of 5 on the parent container causes all the cells in the grid layout to be inset by 5 units from the left edge of the parent container.

The following examples demonstrate how to use GridLayout to positigon buttons within a Container.

No caption available

QML:

Container {
    layout: GridLayout {
        columnCount: 2
    }

    Button {
        text: "Button1"
        horizontalAlignment: HorizontalAlignment.Center
        verticalAlignment: VerticalAlignment.Top
    }

    Button {
        text: "Button2"
        horizontalAlignment: HorizontalAlignment.Right
        verticalAlignment: VerticalAlignment.Center
    }

    Button {
        text: "Button3"
        horizontalAlignment: HorizontalAlignment.Fill
        verticalAlignment: VerticalAlignment.Center
    }
}

C++:

Container* pContainer = new Container();
GridLayout *pGridLayout = new GridLayout();
pGridLayout->setColumnCount(2);
pContainer->setLayout(pGridLayout);

Button* pButton1 = Button::create().text("Button1");

pButton1->setHorizontalAlignment(HorizontalAlignment::Center);
pButton1->setVerticalAlignment(VerticalAlignment::Top);

Button* pButton2 = Button::create().text("Button2");

pButton2->setHorizontalAlignment(HorizontalAlignment::Right);
pButton2->setVerticalAlignment(VerticalAlignment::Center);

Button* pButton3 = Button::create().text("Button3");

pButton3->setHorizontalAlignment(HorizontalAlignment::Fill);
pButton3->setVerticalAlignment(VerticalAlignment::Center);

pContainer->add( pButton1 );
pContainer->add( pButton2 );
pContainer->add( pButton3 );


Overview

QML properties

columnCount: int
attachedObjects: QDeclarativeListProperty< QObject > [read-only]Inherited
objectName: QStringInherited
parent: QObject [read-only]Inherited
ui: bb::cascades::UIConfig [read-only]Inherited

QML signals

Properties Index

intcolumnCount
QDeclarativeListProperty< QObject >attachedObjects [read-only]Inherited
QStringobjectNameInherited
QObjectparent [read-only]Inherited
bb::cascades::UIConfigui [read-only]Inherited

Public Functions Index

GridLayout ()
virtual ~GridLayout ()
intcolumnCount () const
Q_SLOT voidresetColumnCount ()
Q_SLOT voidsetColumnCount (int columnCount)
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

voidcolumnCountChanged (int columnCount)
voidcreationCompleted ()Inherited
voidobjectNameChanged (const QString &objectName)Inherited

Properties

int columnCount

The number of columns for the grid layout.

Since:

BlackBerry 10.3.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

GridLayout ()

Constructs a GridLayout object.

When you set a layout on a container using Container::setLayout(), the container assumes ownership of the layout.

Since:

BlackBerry 10.3.0

virtual~GridLayout ()

Destructor.

int columnCount ()

Returns the columnCount for the grid layout.

Return:

The number of columns in the grid layout, or 0 if the layout is set to use as many columns as there are children.

Since:

BlackBerry 10.3.0

Q_SLOT void resetColumnCount ()

Resets the columnCount to its default value.

The default value is 2.

After the columnCount is reset, the columnCountChanged() signal is emitted.

Since:

BlackBerry 10.3.0

Q_SLOT void setColumnCount (
  • intcolumnCount)

Sets the columnCount for the grid layout.

After the columnCount is set, the columnCountChanged() signal is emitted.

Parameters
columnCount

The number of columns in the grid layout.

Since:

BlackBerry 10.3.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 grid layout.

Using the builder to create a grid layout:

GridLayout* pGridLayout = GridLayout::create()
Return:

A builder used for constructing a GridLayout.

Since:

BlackBerry 10.3.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 columnCountChanged (
  • intcolumnCount)

Emitted when the columnCount property changes.

Parameters
columnCount

The new value of the property.

Note:

If columnCount is set to zero, adding or removing children and thus changing the internal number of columns in the layout, will not trigger a columnCountChanged signal.

Since:

BlackBerry 10.3.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-06-24



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

comments powered by Disqus