blob: 83253f6743e838e3c3581961923bebae0a6547b4 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
// Copyright (C) 2025 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Effects
pragma ComponentBehavior: Bound
ApplicationWindow {
id: window
visible: true
width: 480
height: 640
title: "QML Flexbox Layout"
ColumnLayout {
id: content
property int count: 10
anchors.fill: parent
Rectangle {
id: mainContent
Layout.preferredWidth: col.implicitWidth
Layout.preferredHeight: col.implicitHeight
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
clip: true
border.width: 1
border.color: "gray"
color: "transparent"
ColumnLayout {
id: col
anchors.fill: parent
FlexboxLayout {
id: flex
wrap: FlexboxLayout.Wrap
gap: 10
justifyContent: FlexboxLayout.JustifyCenter
Layout.margins: 20
Repeater {
model: content.count
delegate: Rectangle {
id: rect
property int size: Math.floor(Math.random() * (140 - 85 + 1)) + 85
Layout.preferredWidth: size
Layout.preferredHeight: size
radius: 10
color: "#328930"
Text {
anchors.centerIn: parent
text: "Qt"
font.pixelSize: 20
}
}
}
}
}
}
Text {
Layout.margins: 20
Layout.alignment: Qt.AlignHCenter
text: "Resize the window to observe how the flex layout adapts."
Layout.fillWidth: true
wrapMode: Text.Wrap
}
}
}
|
