How to show Images In a row using repeater in qml?

2777
4
Jump to solution
08-22-2020 01:21 AM
x_d
by
New Contributor III

so i have to show 9 images on my page, so I have used repeater, but the problem is that I want to show the images in a row, but in out put it shows in a column. I am working on a mobile application using qml. So can anybody suggest me how to show it in a row format using qml?

Here is my code

ColumnLayout {   
        spacing: 10     
        clip:true   
        Repeater{         
        model: 9    
                Row{       
                   id:icons   
                   spacing:30    
                   Layout.alignment: Qt.AlignHCenter    
                      Image {      
                        id: img1      
                        source:"path to images"    
                        height: 50        
                        width:50         
                         }    
                    }     
         }    
 }
Tags (2)
0 Kudos
1 Solution

Accepted Solutions
by Anonymous User
Not applicable

Read up on GridLayout which allows you to specify the maximum number of columns

GridLayout QML Type | Qt Quick 5.15.0 

View solution in original post

4 Replies
by Anonymous User
Not applicable

Do a google search for "qml layout" and you will see there are several layout types.

You are using ColumnLayout which is why they are displayed in a column. Try RowLayout or GridLayout for different options.

x_d
by
New Contributor III

Yeah it was a silly mistake. but can you suggest me how can i put a condition  that in one row it only can consist of 4 images if it will more than 4 then after 4th image it will be in 2nd line. well i am showing images dynamically it's not hard coded 

0 Kudos
by Anonymous User
Not applicable

Read up on GridLayout which allows you to specify the maximum number of columns

GridLayout QML Type | Qt Quick 5.15.0 

x_d
by
New Contributor III

thanks it worked

0 Kudos