FlexListItem Class Reference

Inheritance diagram for FlexListItem:

Properties
alias	columns
alias	columnSpacing
alias	content
alias	iconSizeHint
alias	iconSource
alias	imageSource
alias	label1
alias	label2
alias	label3
alias	label4
alias	rows
alias	rowSpacing
alias	template
bool	wide
Properties inherited from ItemDelegate
alias	containsPress
alias	content
bool	draggable
bool	flat
bool	highlighted
alias	isCurrentItem
alias	mouseArea
int	radius
string	tooltipText

Additional Inherited Members
Signals inherited from ItemDelegate
void	clicked (var mouse)
void	doubleClicked (var mouse)
void	pressAndHold (var mouse)
void	pressed (var mouse)
void	rightClicked (var mouse)

Detailed Description

A template to position information next to a flexing right-content section, that wraps into a new line under constrained space conditions.

Since

org.mauikit.controls.labs 1.0

This control inherits from QQC2 ItemDelegate, to checkout its inherited properties refer to the Qt Docs.

Expanded vs wrapped

Column
{
   anchors.centerIn: parent
   width: parent.width
 
   Maui.FlexListItem
   {
       id: _flexItem
       width: parent.width
       label1.text: "Flex List Item"
       label2.text: "This item is reposnive and will split into a column on a narrow space."
       iconSource: "love"
 
       Rectangle
       {
           color: "purple"
           radius: 4
           implicitHeight: 64
           implicitWidth: 140
           Layout.fillWidth: !_flexItem.wide
           Layout.minimumWidth: 140
       }
 
       Rectangle
       {
           color: "yellow"
           radius: 4
           implicitHeight: 64
           implicitWidth: 80
           Layout.fillWidth: !_flexItem.wide
       }
   }
}

Notes

It is possible to manually set the number of columns to be used using the columns property, but this will break the auto wrapping functionality of the wide property. So consider using this property only if it is really needed to be forced.

You can find a more complete example at this link.

Definition at line 73 of file FlexListItem.qml.

Property Documentation

columns

alias FlexListItem::columns

read

This allows to manually set the number of columns to be used.

By default his value is set to 2 when it is wide, and to 1 otherwise.

Warning

Using this property will break the wrapping functionality via the wide property.

Definition at line 143 of file FlexListItem.qml.

columnSpacing

int FlexListItem::columnSpacing

read

The spacing of the columns, when the layout is not wrapped.

Definition at line 137 of file FlexListItem.qml.

content

list< QtObject > FlexListItem::content

read

The items declared as the children of this element will wrap into a new line on constrained spaces.

Remarks

This is the default property

Note

The content is handled by a RowLayout, so to position items use the Layout attached properties.

Definition at line 81 of file FlexListItem.qml.

iconSizeHint

int FlexListItem::iconSizeHint

read

The size hint for the icon container.

Definition at line 122 of file FlexListItem.qml.

iconSource

string FlexListItem::iconSource

read

The icon name to be used in the information section.

Definition at line 112 of file FlexListItem.qml.

imageSource

url FlexListItem::imageSource

read

The image source file to be used in the information section.

Definition at line 117 of file FlexListItem.qml.

label1

Label FlexListItem::label1

read

The Label element for the title.

Definition at line 92 of file FlexListItem.qml.

label2

Label FlexListItem::label2

read

The Label element for the message body.

Definition at line 97 of file FlexListItem.qml.

label3

Label FlexListItem::label3

read

The Label element for extra information positioned on the right top side.

Definition at line 102 of file FlexListItem.qml.

label4

Label FlexListItem::label4

read

The Label element for extra information positioned on the right bottom side.

Definition at line 107 of file FlexListItem.qml.

rows

alias FlexListItem::rows

read

This allows to manually set the number of rows to be used.

By default this uses maximum two [2] rows.

Warning

Using this property will break the wrapping functionality via the wide property.

Definition at line 148 of file FlexListItem.qml.

rowSpacing

int FlexListItem::rowSpacing

read

The spacing of the rows, when the layout is wrapped.

Definition at line 132 of file FlexListItem.qml.

template

ListItemTemplate FlexListItem::template

read

An alias to the template element handling the information labels and image/icon.

See also

ListItemTemplate

Definition at line 87 of file FlexListItem.qml.

wide

bool FlexListItem::wide

read

Whether the layout will be wrapped into a new line or not.

If wide: true then a single line is used, but otherwise the layout is split into two lines, at the top the information labels and and the bottom all the children elements.

See also

content

Definition at line 127 of file FlexListItem.qml.

---

The documentation for this class was generated from the following file:

• FlexListItem.qml