diff options
author | Jens Bache-Wiig <jens.bache-wiig@digia.com> | 2013-05-22 15:16:10 +0200 |
---|---|---|
committer | The Qt Project <gerrit-noreply@qt-project.org> | 2013-05-23 14:36:02 +0200 |
commit | 57cb0961f811c90ddf5ed9298935d958e8afcd2a (patch) | |
tree | 432b48e624734bc8856676f699b47e55ec473763 /src/controls/GroupBox.qml | |
parent | 587c2c00678f8b3fe9e3249875630112cfb27de7 (diff) | |
download | qtquickcontrols-57cb0961f811c90ddf5ed9298935d958e8afcd2a.tar.gz |
Update GroupBox to support contentItem
- Removed contentWidth and contentHeight since it is not needed
- Exposed contentItem so that it can be designable.
- Respect the implicit width or height of the contentItem if it is the
only item of the GroupBox. Otherwise childrenRect is used.
- Modified the style so that the style takes care of only the
padding size and not the entire size of the group box.
- Fixed flat and checkable appearance for custom style
Change-Id: I2c7ec4cb7d5e6f96863847e8d8d6d6f52428364e
Reviewed-by: J-P Nurmi <jpnurmi@digia.com>
Diffstat (limited to 'src/controls/GroupBox.qml')
-rw-r--r-- | src/controls/GroupBox.qml | 124 |
1 files changed, 70 insertions, 54 deletions
diff --git a/src/controls/GroupBox.qml b/src/controls/GroupBox.qml index 61406fff..6342d278 100644 --- a/src/controls/GroupBox.qml +++ b/src/controls/GroupBox.qml @@ -58,13 +58,18 @@ import QtQuick.Layouts 1.0 You can minimize the space consumption of a group box by enabling the flat property. In most styles, enabling this property results in the removal of the left, right and bottom edges of the frame. - GroupBox doesn't automatically lay out the child controls (which are often \l{CheckBox}{CheckBoxes} or \l{RadioButton}{RadioButtons} but can be any controls). - The following example shows how we can set up a GroupBox with a column: + To add content to a group box, you can reparent it to its contentItem property. + + The implicit size of the GroupBox is calculated based on the size of its content. If you want to anchor + items inside the group box, you must specify an explicit width and height on the GroupBox itself. + + The following example shows how we use a GroupBox with a column: \qml GroupBox { title: qsTr("Package selection") Column { + spacing: 2 CheckBox { text: qsTr("Update system") } @@ -78,9 +83,8 @@ import QtQuick.Layouts 1.0 } \endqml - \note The default size of the GroupBox is calculated based on the size of its children. If you need to use anchors - inside a GroupBox, it is recommended to specify a width and height to the GroupBox or to add an intermediate Item - inside the GroupBox. + \sa CheckBox, RadioButton, Layout + */ Item { @@ -129,27 +133,34 @@ Item { */ property alias checked: check.checked - /*! - This property holds the width of the content. - */ - property real contentWidth: content.childrenRect.width + + /*! \internal */ + default property alias __content: container.data /*! - This property holds the height of the content. + \qmlproperty Item GroupBox::contentItem + + This property holds the content Item of the group box. + + Items declared as children of a GroupBox are automatically parented to the GroupBox's contentItem. + Items created dynamically need to be explicitly parented to the contentItem: + + \note The implicit size of the GroupBox is calculated based on the size of its content. If you want to anchor + items inside the group box, you must specify an explicit width and height on the GroupBox itself. */ - property real contentHeight: content.childrenRect.height + readonly property alias contentItem: container /*! \internal */ property Component style: Qt.createComponent(Settings.theme() + "/GroupBoxStyle.qml", groupbox) /*! \internal */ - default property alias data: content.data + property alias __checkbox: check /*! \internal */ - property alias __checkbox: check + property alias __style: styleLoader.item - implicitWidth: Math.max(200, (loader.item ? loader.item.implicitWidth: 0) ) - implicitHeight: (loader.item ? loader.item.implicitHeight : 0) + implicitWidth: (!anchors.fill ? container.calcWidth() : 0) + loader.leftMargin + loader.rightMargin + implicitHeight: (!anchors.fill ? container.calcHeight() : 0) + loader.topMargin + loader.bottomMargin Layout.minimumWidth: implicitWidth Layout.minimumHeight: implicitHeight @@ -159,44 +170,49 @@ Item { activeFocusOnTab: false - Loader { - id: loader - anchors.fill: parent - property int topMargin: (title.length > 0 || checkable ? 16 : 0) + content.margin - property int bottomMargin: 4 - property int leftMargin: 4 - property int rightMargin: 4 - sourceComponent: styleLoader.item ? styleLoader.item.panel : null - onLoaded: item.z = -1 + + data: [ Loader { - id: styleLoader - property alias __control: groupbox - sourceComponent: groupbox.style - } - } - - CheckBox { - id: check - checked: true - text: groupbox.title - visible: checkable - anchors.top: parent.top - anchors.left: parent.left - anchors.right: parent.right - height: loader.topMargin - style: CheckBoxStyle { panel: Item{} } - } - - Item { - id:content - z: 1 - focus: true - property int margin: styleLoader.item ? styleLoader.item.margin : 0 - anchors.topMargin: loader.topMargin - anchors.leftMargin: margin - anchors.rightMargin: margin - anchors.bottomMargin: margin - anchors.fill: parent - enabled: (!groupbox.checkable || groupbox.checked) - } + id: loader + anchors.fill: parent + property int topMargin: __style ? __style.padding.top : 0 + property int bottomMargin: __style ? __style.padding.bottom : 0 + property int leftMargin: __style ? __style.padding.left : 0 + property int rightMargin: __style ? __style.padding.right : 0 + sourceComponent: styleLoader.item ? styleLoader.item.panel : null + onLoaded: item.z = -1 + Loader { + id: styleLoader + property alias __control: groupbox + sourceComponent: groupbox.style + } + }, + CheckBox { + id: check + checked: true + text: groupbox.title + visible: checkable + anchors.top: parent.top + anchors.left: parent.left + anchors.right: parent.right + height: loader.topMargin + activeFocusOnTab: groupbox.checkable + style: CheckBoxStyle { panel: Item{} } + }, + Item { + id: container + z: 1 + focus: true + anchors.fill: parent + + anchors.topMargin: loader.topMargin + anchors.leftMargin: loader.leftMargin + anchors.rightMargin: loader.rightMargin + anchors.bottomMargin: loader.bottomMargin + enabled: (!groupbox.checkable || groupbox.checked) + + property Item layoutItem: container.children.length === 1 ? container.children[0] : null + function calcWidth () { return (layoutItem ? (layoutItem.implicitWidth || layoutItem.width) : container.childrenRect.width) } + function calcHeight () { return (layoutItem ? (layoutItem.implicitHeight || layoutItem.height) : container.childrenRect.height) } + }] } |