0

I want to display a long list of images in the right side of a Qt application. I created a QScrollArea but when I try the grid layout, it tries to expand the items and does not wrap lines:

enter image description here

I created a simple CSS/HTML demo of what I want to do in Qt/C++. As you move your mouse over the demo, you can observe how the items neatly wrap around how they align to the top.

document.body.addEventListener("mousemove", (e)=>{
    document.querySelector("#QScrollArea").style.width = e.clientX+"px";

})
* {box-sizing: content-box;}
body,html,#QScrollArea {
    margin: 0px;
    padding: 0px;
}
#QScrollArea {
    border: 1px solid black;
    overflow-y: auto;
    max-height: 99vh;
    height: 99vh;
    overflow-x: hidden;
    display: flex;
    flex-flow: row wrap;
    align-content: start;
}
.PictureWidget {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: green;
    margin: 2pt;
    border: 1px solid black;
}
<div id="QScrollArea">
    <div class="PictureWidget">
        
    </div>
    <div class="PictureWidget" style="background-color:#1144ee">
        
    </div>
    <div class="PictureWidget" style="background-color:#FFAA11">
        
    </div>
    <div class="PictureWidget" style="background-color:#FF5511">
        
    </div>
    <div class="PictureWidget" style="background-color:#005511">
        
    </div>
    <div class="PictureWidget" style="background-color:#7799ff">
        
    </div>
    <div class="PictureWidget" style="background-color:#ffff00">
        
    </div>
    <div class="PictureWidget" style="background-color:#ff00ff">
        
    </div>
    <div class="PictureWidget" style="background-color:#333300;color: white">
        
    </div>
    <div class="PictureWidget" style="background-color:#ffaaaa">
        
    </div>
    <div class="PictureWidget" style="background-color:#111199;color: white">
        
    </div>
</div>

How to replicate the behavior of the demo I created above with Qt/C++?

Tomáš Zato
  • 50,171
  • 52
  • 268
  • 778
  • 2
    Maybe using `QListView` is a better approach? – vahancho Apr 30 '19 at 11:06
  • Possible duplicate of [QT Layouts, how to make widgets in horizontal layout move down a row instead of overflowing the window](https://stackoverflow.com/questions/14619047/qt-layouts-how-to-make-widgets-in-horizontal-layout-move-down-a-row-instead-of) – catalin May 02 '19 at 07:13

0 Answers0