Kirigami2

CardsLayout.qml
1/*
2 * SPDX-FileCopyrightText: 2018 Marco Martin <mart@kde.org>
3 *
4 * SPDX-License-Identifier: LGPL-2.0-or-later
5 */
6
7import QtQuick
8import QtQuick.Layouts
9import org.kde.kirigami as Kirigami
10
11/**
12 * @brief A GridLayout optimized for showing one or two columns of cards,
13 * depending on the available space.
14 *
15 * It Should be used when the cards are not instantiated by a model or by a
16 * model which has always very few items.
17 *
18 * They are presented as a grid of two columns which will remain
19 * centered if the application is really wide, or become a single
20 * column if there is not enough space for two columns,
21 * such as a mobile phone screen.
22 *
23 * A CardsLayout should always be contained within a ColumnLayout.
24 *
25 * @since 2.4
26 * @inherit QtQuick.Layouts.GridLayout
27 */
28GridLayout {
29 /**
30 * @brief This property holds the maximum number of columns.
31 *
32 * This layout will never lay out the items in more columns than maximumColumns
33 *
34 * default: ``2``
35 *
36 * @since 2.5
37 */
38 property int maximumColumns: 2
39
40 /**
41 * @brief This property holds the maximum width the columns may have.
42 *
43 * The cards will never become wider than this size; when the GridLayout is wider than
44 * maximumColumnWidth, it will switch from one to two columns.
45 *
46 * If the default needs to be overridden for some reason,
47 * it is advised to express this unit as a multiple
48 * of Kirigami.Units.gridUnit.
49 *
50 * default: ``20 * Kirigami.Units.gridUnit``
51 */
52 property int maximumColumnWidth: Kirigami.Units.gridUnit * 20
53
54 /**
55 * @brief This property holds the minimum width the columns may have.
56 *
57 * The layout will try to dispose of items
58 * in a number of columns that will respect this size constraint.
59 *
60 * default: ``12 * Kirigami.Units.gridUnit``
61 *
62 * @since 2.5
63 */
64 property int minimumColumnWidth: Kirigami.Units.gridUnit * 12
65
66 columns: Math.max(1, Math.min(maximumColumns > 0 ? maximumColumns : Infinity,
67 Math.floor(width/minimumColumnWidth),
68 Math.ceil(width/maximumColumnWidth)));
69
70 rowSpacing: Kirigami.Units.largeSpacing
71 columnSpacing: Kirigami.Units.largeSpacing
72
73
74 // NOTE: this default width which defaults to 2 columns is just to remove a binding loop on columns
75 width: maximumColumnWidth*2 + Kirigami.Units.largeSpacing
76 // same computation of columns, but on the parent size
77 Layout.preferredWidth: maximumColumnWidth * Math.max(1, Math.min(maximumColumns > 0 ? maximumColumns : Infinity,
78 Math.floor(parent.width/minimumColumnWidth),
79 Math.ceil(parent.width/maximumColumnWidth))) + Kirigami.Units.largeSpacing * (columns - 1)
80
81 Layout.maximumWidth: Layout.preferredWidth
82 Layout.alignment: Qt.AlignHCenter
83
84 Component.onCompleted: childrenChanged()
85 onChildrenChanged: {
86 for (const child of children) {
87 child.Layout.fillHeight = true;
88 }
89 }
90}
This file is part of the KDE documentation.
Documentation copyright © 1996-2024 The KDE developers.
Generated on Fri Jul 19 2024 11:52:23 by doxygen 1.11.0 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.