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 
7 import QtQuick
8 import QtQuick.Layouts
9 import 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  */
28 GridLayout {
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 Thu Feb 15 2024 03:59:21 by doxygen 1.8.17 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.