Revision control
Copy as Markdown
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only
// This example was created for the blog post about responsive layouts:
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
Window {
id: window
width: 600
height: 800
minimumHeight: 500
minimumWidth: 160
title: "Window: (" + width + "x" + height + ")"
visible: true
component MyButton : Rectangle {
implicitWidth: 56
implicitHeight: 56
Layout.minimumWidth: 56
Layout.minimumHeight: 56
Layout.fillWidth: false
Layout.fillHeight: false
Layout.alignment: Qt.AlignHCenter
property string label: ""
color: "#eaeaea"
Text {
font.pixelSize: 32
font.bold: true
anchors.centerIn: parent
text: label
color: "#243a5e"
}
}
component ButtonBox : Rectangle {
id: bb
property Item elideButton: Item {}
property Item buttonLayout: Item {}
height: buttonLayout.height + buttonLayout.anchors.margins * 2
implicitWidth: buttonLayout.width + buttonLayout.anchors.margins * 2
color: "#c8c8c8"
function updateItems() {
if (width == 0)
return;
let butts = buttonLayout.children
let lastBut = undefined
let xmax = buttonLayout.anchors.margins
for (let i = butts.length - 1; i>= 0; --i) {
if (butts[i] !== elideButton && butts[i].visible) {
if (butts[i].x + butts[i].width > xmax) {
lastBut = butts[i]
xmax = butts[i].x + butts[i].width
}
}
}
let buttonsRightX = xmax
+ buttonLayout.spacing * 2
let hiddenItems = 0
for (let i = 0; i < butts.length; i++) {
if (butts[i] === elideButton)
continue;
if (butts[i].visible === false) {
hiddenItems++;
let buttonAddedWidth = butts[i].width + buttonLayout.spacing
if (buttonsRightX + buttonAddedWidth < width - elideButton.implicitWidth - buttonLayout.anchors.margins - buttonLayout.spacing) {
buttonsRightX += buttonAddedWidth
butts[i].visible = true
hiddenItems--;
}
}
}
for (let i = butts.length - 1; i>= 0; --i) {
if ( butts[i] === elideButton)
continue;
if (butts[i].visible === true) {
let buttonRemovedWidth = butts[i].width + buttonLayout.spacing
if (buttonsRightX > width - elideButton.implicitWidth - buttonLayout.anchors.margins - buttonLayout.spacing) {
buttonsRightX -= buttonRemovedWidth
butts[i].visible = false
hiddenItems++;
}
}
}
if (hiddenItems == 0)
elideButton.visible = false
else if (hiddenItems == 1) {
for (let i = butts.length - 1; i>= 0; --i)
butts[i].visible = true
elideButton.visible = false
} else
elideButton.visible = true
}
onWidthChanged: {
updateItems()
}
onChildrenChanged: {
updateItems()
}
}
ColumnLayout {
height: parent.height
width: parent.width
spacing: 0
ButtonBox {
Layout.fillHeight: false
Layout.fillWidth: true
RowLayout {
id: buttonLayout
anchors.margins: 10
anchors.top: parent.top
anchors.left: parent.left
spacing: 8
MyButton { id: aButton; label: "A"; z: 2 }
MyButton { id: bButton; label: "B"; z: 2 }
MyButton { id: cButton; label: "C"; z: 2 }
MyButton { id: dButton; label: "D"; z: 2 }
MyButton { id: eButton; label: "E"; z: 2 }
MyButton { id: fButton; label: "F"; z: 2 }
MyButton { id: gButton; label: "G"; z: 2 }
MyButton { id: elideButton; label: "..."; z: 2 }
}
elideButton: elideButton
buttonLayout: buttonLayout
}
Rectangle {
id: rect
Layout.fillWidth: true
Layout.fillHeight: true
color: "#fff"
}
}
}