Отображение сетки виджетов фиксированного размера, чтобы она помещалась в QScrollArea горизонтально - PullRequest
Новая
       36

Отображение сетки виджетов фиксированного размера, чтобы она помещалась в QScrollArea горизонтально

0 голосов
/ 30 апреля 2019

Я хочу отобразить длинный список изображений в правой части приложения Qt.Я создал QScrollArea, но когда я пробую макет сетки, он пытается развернуть элементы и не переносит строки:

enter image description here

Я создалпростая демонстрация CSS / HTML того, что я хочу сделать в Qt / C ++.Когда вы наводите указатель мыши на демонстрацию, вы можете наблюдать, как элементы аккуратно оборачиваются вокруг их выравнивания к вершине. 

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>

Как скопировать поведение созданной мной демонстрации с Qt / C ++?

...