From a9aa500a680058d7f2a75f02ad8d72c4b1e49f7c Mon Sep 17 00:00:00 2001 From: J-P Nurmi Date: Wed, 18 Jan 2017 16:29:14 +0100 Subject: Add ScrollView [ChangeLog][Controls][ScrollView] Added ScrollView. Change-Id: I5d68799f0246e04b519bf6a0ec7bc7e5625f50e7 Reviewed-by: Mitch Curtis Reviewed-by: Qt CI Bot --- src/imports/controls/ScrollView.qml | 66 +++++++++++++++++ src/imports/controls/controls.pri | 1 + .../images/qtquickcontrols2-scrollview-custom.png | Bin 0 -> 5909 bytes .../qtquickcontrols2-scrollview-wireframe.png | Bin 0 -> 1343 bytes .../doc/images/qtquickcontrols2-scrollview.png | Bin 0 -> 5922 bytes .../qtquickcontrols2-scrollview-interactive.qml | 38 ++++++++++ .../qtquickcontrols2-scrollview-listview.qml | 61 ++++++++++++++++ .../qtquickcontrols2-scrollview-policy.qml | 38 ++++++++++ .../qtquickcontrols2-scrollview-custom.qml | 81 +++++++++++++++++++++ .../screenshots/qtquickcontrols2-scrollview.qml | 61 ++++++++++++++++ .../doc/src/qtquickcontrols2-containers.qdoc | 6 ++ .../doc/src/qtquickcontrols2-customize.qdoc | 10 +++ .../doc/src/qtquickcontrols2-differences.qdoc | 11 +-- src/imports/controls/plugins.qmltypes | 19 +++++ src/imports/controls/qtquickcontrols2plugin.cpp | 1 + src/imports/templates/plugins.qmltypes | 11 +++ src/imports/templates/qtquicktemplates2plugin.cpp | 2 + 17 files changed, 398 insertions(+), 8 deletions(-) create mode 100644 src/imports/controls/ScrollView.qml create mode 100644 src/imports/controls/doc/images/qtquickcontrols2-scrollview-custom.png create mode 100644 src/imports/controls/doc/images/qtquickcontrols2-scrollview-wireframe.png create mode 100644 src/imports/controls/doc/images/qtquickcontrols2-scrollview.png create mode 100644 src/imports/controls/doc/snippets/qtquickcontrols2-scrollview-interactive.qml create mode 100644 src/imports/controls/doc/snippets/qtquickcontrols2-scrollview-listview.qml create mode 100644 src/imports/controls/doc/snippets/qtquickcontrols2-scrollview-policy.qml create mode 100644 src/imports/controls/doc/snippets/screenshots/qtquickcontrols2-scrollview-custom.qml create mode 100644 src/imports/controls/doc/snippets/screenshots/qtquickcontrols2-scrollview.qml (limited to 'src/imports') diff --git a/src/imports/controls/ScrollView.qml b/src/imports/controls/ScrollView.qml new file mode 100644 index 00000000..e10c5328 --- /dev/null +++ b/src/imports/controls/ScrollView.qml @@ -0,0 +1,66 @@ +/**************************************************************************** +** +** Copyright (C) 2017 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL3$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 3 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPLv3 included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 3 requirements +** will be met: https://www.gnu.org/licenses/lgpl.html. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 2.0 or later as published by the Free +** Software Foundation and appearing in the file LICENSE.GPL included in +** the packaging of this file. Please review the following information to +** ensure the GNU General Public License version 2.0 requirements will be +** met: http://www.gnu.org/licenses/gpl-2.0.html. +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.9 +import QtQuick.Controls 2.2 +import QtQuick.Controls.impl 2.2 +import QtQuick.Templates 2.2 as T + +T.ScrollView { + id: control + + implicitWidth: Math.max(background ? background.implicitWidth : 0, contentWidth + leftPadding + rightPadding) + implicitHeight: Math.max(background ? background.implicitHeight : 0, contentHeight + topPadding + bottomPadding) + + contentWidth: contentItem.implicitWidth || (contentChildren.length === 1 ? contentChildren[0].implicitWidth : -1) + contentHeight: contentItem.implicitHeight || (contentChildren.length === 1 ? contentChildren[0].implicitHeight : -1) + + ScrollBar.vertical: ScrollBar { + parent: control + x: control.mirrored ? 0 : control.width - width + y: control.topPadding + height: control.availableHeight + active: control.ScrollBar.horizontal.active + } + + ScrollBar.horizontal: ScrollBar { + parent: control + x: control.leftPadding + y: control.height - height + width: control.availableWidth + active: control.ScrollBar.vertical.active + } +} diff --git a/src/imports/controls/controls.pri b/src/imports/controls/controls.pri index 04e31103..5aa56418 100644 --- a/src/imports/controls/controls.pri +++ b/src/imports/controls/controls.pri @@ -45,6 +45,7 @@ QML_CONTROLS = \ RoundButton.qml \ ScrollBar.qml \ ScrollIndicator.qml \ + ScrollView.qml \ Slider.qml \ SpinBox.qml \ StackView.qml \ diff --git a/src/imports/controls/doc/images/qtquickcontrols2-scrollview-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-scrollview-custom.png new file mode 100644 index 00000000..9c2790c9 Binary files /dev/null and b/src/imports/controls/doc/images/qtquickcontrols2-scrollview-custom.png differ diff --git a/src/imports/controls/doc/images/qtquickcontrols2-scrollview-wireframe.png b/src/imports/controls/doc/images/qtquickcontrols2-scrollview-wireframe.png new file mode 100644 index 00000000..afdc681d Binary files /dev/null and b/src/imports/controls/doc/images/qtquickcontrols2-scrollview-wireframe.png differ diff --git a/src/imports/controls/doc/images/qtquickcontrols2-scrollview.png b/src/imports/controls/doc/images/qtquickcontrols2-scrollview.png new file mode 100644 index 00000000..2a1807ee Binary files /dev/null and b/src/imports/controls/doc/images/qtquickcontrols2-scrollview.png differ diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-scrollview-interactive.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-scrollview-interactive.qml new file mode 100644 index 00000000..8bb7be29 --- /dev/null +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-scrollview-interactive.qml @@ -0,0 +1,38 @@ +/**************************************************************************** +** +** Copyright (C) 2017 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.9 +import QtQuick.Controls 2.2 + +//! [file] +ScrollView { + // ... + ScrollBar.horizontal.interactive: true + ScrollBar.vertical.interactive: true +} +//! [file] + diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-scrollview-listview.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-scrollview-listview.qml new file mode 100644 index 00000000..bce00cde --- /dev/null +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-scrollview-listview.qml @@ -0,0 +1,61 @@ +/**************************************************************************** +** +** Copyright (C) 2017 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.9 +import QtQuick.Controls 2.2 + +Item { + id: root + width: 200 + height: 200 + + Binding { + target: root.children[0].ScrollBar.horizontal + property: "active" + value: true + } + + Binding { + target: root.children[0].ScrollBar.vertical + property: "active" + value: true + } + +//! [file] +ScrollView { + width: 200 + height: 200 + + ListView { + model: 20 + delegate: ItemDelegate { + text: "Item " + index + } + } +} +//! [file] +} diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-scrollview-policy.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-scrollview-policy.qml new file mode 100644 index 00000000..ce41950d --- /dev/null +++ b/src/imports/controls/doc/snippets/qtquickcontrols2-scrollview-policy.qml @@ -0,0 +1,38 @@ +/**************************************************************************** +** +** Copyright (C) 2017 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.9 +import QtQuick.Controls 2.2 + +//! [file] +ScrollView { + // ... + ScrollBar.horizontal.policy: ScrollBar.AlwaysOff + ScrollBar.vertical.policy: ScrollBar.AlwaysOn +} +//! [file] + diff --git a/src/imports/controls/doc/snippets/screenshots/qtquickcontrols2-scrollview-custom.qml b/src/imports/controls/doc/snippets/screenshots/qtquickcontrols2-scrollview-custom.qml new file mode 100644 index 00000000..82347a5d --- /dev/null +++ b/src/imports/controls/doc/snippets/screenshots/qtquickcontrols2-scrollview-custom.qml @@ -0,0 +1,81 @@ +/**************************************************************************** +** +** Copyright (C) 2017 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.9 +import QtQuick.Controls 2.2 + +Item { + width: 200 + height: 200 + + Binding { + target: control.ScrollBar.horizontal + property: "active" + value: true + } + + Binding { + target: control.ScrollBar.vertical + property: "active" + value: true + } + +//! [file] +ScrollView { + id: control + + width: 200 + height: 200 + focus: true + + Label { + text: "ABC" + font.pixelSize: 224 + } + + ScrollBar.vertical: ScrollBar { + parent: control + x: control.mirrored ? 0 : control.width - width + y: control.topPadding + height: control.availableHeight + active: control.ScrollBar.horizontal.active + } + + ScrollBar.horizontal: ScrollBar { + parent: control + x: control.leftPadding + y: control.height - height + width: control.availableWidth + active: control.ScrollBar.vertical.active + } + + background: Rectangle { + border.color: control.activeFocus ? "#21be2b" : "#bdbebf" + } +} +//! [file] +} diff --git a/src/imports/controls/doc/snippets/screenshots/qtquickcontrols2-scrollview.qml b/src/imports/controls/doc/snippets/screenshots/qtquickcontrols2-scrollview.qml new file mode 100644 index 00000000..8900cf9e --- /dev/null +++ b/src/imports/controls/doc/snippets/screenshots/qtquickcontrols2-scrollview.qml @@ -0,0 +1,61 @@ +/**************************************************************************** +** +** Copyright (C) 2017 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Free Documentation License Usage +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of +** this file. Please review the following information to ensure +** the GNU Free Documentation License version 1.3 requirements +** will be met: http://www.gnu.org/copyleft/fdl.html. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.9 +import QtQuick.Controls 2.2 + +Rectangle { + id: root + width: 200 + height: 200 + border.color: "#ddd" + + Binding { + target: root.children[0].ScrollBar.horizontal + property: "active" + value: true + } + + Binding { + target: root.children[0].ScrollBar.vertical + property: "active" + value: true + } + +//! [file] +ScrollView { + width: 200 + height: 200 + clip: true + + Label { + text: "ABC" + font.pixelSize: 224 + } +} +//! [file] +} diff --git a/src/imports/controls/doc/src/qtquickcontrols2-containers.qdoc b/src/imports/controls/doc/src/qtquickcontrols2-containers.qdoc index 139958e0..73cfd989 100644 --- a/src/imports/controls/doc/src/qtquickcontrols2-containers.qdoc +++ b/src/imports/controls/doc/src/qtquickcontrols2-containers.qdoc @@ -78,6 +78,12 @@ you to position its contents, for instance by using a \l RowLayout or a \l ColumnLayout. + \section1 ScrollView Control + + \image qtquickcontrols2-scrollview-wireframe.png + + \l ScrollView provides scrolling for user-defined content. + \section1 StackView Control \image qtquickcontrols2-stackview-wireframe.png diff --git a/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc b/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc index 6ef019f6..487c5d6f 100644 --- a/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc +++ b/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc @@ -636,6 +636,16 @@ \snippet qtquickcontrols2-scrollindicator-custom.qml file + \section2 Customizing ScrollView + + ScrollView consists of a \l {Control::background}{background} item, + and horizontal and vertical scroll bars. + + \image qtquickcontrols2-scrollview-custom.png + + \snippet qtquickcontrols2-scrollview-custom.qml file + + \section2 Customizing Slider Slider consists of two visual items: \l {Control::background}{background}, diff --git a/src/imports/controls/doc/src/qtquickcontrols2-differences.qdoc b/src/imports/controls/doc/src/qtquickcontrols2-differences.qdoc index 3423e423..dd86d2ed 100644 --- a/src/imports/controls/doc/src/qtquickcontrols2-differences.qdoc +++ b/src/imports/controls/doc/src/qtquickcontrols2-differences.qdoc @@ -328,14 +328,9 @@ \li \row \li \l [QML QtQuickControls] {ScrollView} - \li \mdash - \li \l [QML QtQuickControls2] {ScrollBar},\br - \l [QML QtQuickControls2] {ScrollIndicator} \br\sup {(Qt Quick Controls 2)} - \li \list - \li \b {Qt Quick Controls 2}: \c ScrollBar and \c ScrollIndicator offer - similar functionality. They can be attached to any \c Flickable to - build scrollable views. - \endlist + \li \l [QML QtQuickControls2] {ScrollView} + \li + \li \row \li \l [QML QtQuickControls] {Slider} \li \l [QML QtQuickControls2] {Slider} diff --git a/src/imports/controls/plugins.qmltypes b/src/imports/controls/plugins.qmltypes index c3e01172..affdfb96 100644 --- a/src/imports/controls/plugins.qmltypes +++ b/src/imports/controls/plugins.qmltypes @@ -375,6 +375,14 @@ Module { isComposite: true defaultProperty: "data" } + Component { + prototype: "QQuickScrollView" + name: "QtQuick.Controls/ScrollView 2.2" + exports: ["QtQuick.Controls/ScrollView 2.2"] + exportMetaObjectRevisions: [2] + isComposite: true + defaultProperty: "contentData" + } Component { prototype: "QQuickSlider" name: "QtQuick.Controls/Slider 2.0" @@ -1257,6 +1265,17 @@ Module { Property { name: "horizontal"; type: "QQuickScrollIndicator"; isPointer: true } Property { name: "vertical"; type: "QQuickScrollIndicator"; isPointer: true } } + Component { + name: "QQuickScrollView" + defaultProperty: "contentData" + prototype: "QQuickControl" + exports: ["QtQuick.Templates/ScrollView 2.2"] + exportMetaObjectRevisions: [0] + Property { name: "contentWidth"; type: "double" } + Property { name: "contentHeight"; type: "double" } + Property { name: "contentData"; type: "QObject"; isList: true; isReadonly: true } + Property { name: "contentChildren"; type: "QQuickItem"; isList: true; isReadonly: true } + } Component { name: "QQuickSlider" defaultProperty: "data" diff --git a/src/imports/controls/qtquickcontrols2plugin.cpp b/src/imports/controls/qtquickcontrols2plugin.cpp index e7bedc73..cd81eb62 100644 --- a/src/imports/controls/qtquickcontrols2plugin.cpp +++ b/src/imports/controls/qtquickcontrols2plugin.cpp @@ -143,6 +143,7 @@ void QtQuickControls2Plugin::registerTypes(const char *uri) // QtQuick.Controls 2.2 (new types in Qt 5.9) qmlRegisterType(selector.select(QStringLiteral("DelayButton.qml")), uri, 2, 2, "DelayButton"); + qmlRegisterType(selector.select(QStringLiteral("ScrollView.qml")), uri, 2, 2, "ScrollView"); } static QObject *styleSingleton(QQmlEngine *engine, QJSEngine *scriptEngine) diff --git a/src/imports/templates/plugins.qmltypes b/src/imports/templates/plugins.qmltypes index d2151685..0ff02f22 100644 --- a/src/imports/templates/plugins.qmltypes +++ b/src/imports/templates/plugins.qmltypes @@ -752,6 +752,17 @@ Module { Property { name: "horizontal"; type: "QQuickScrollIndicator"; isPointer: true } Property { name: "vertical"; type: "QQuickScrollIndicator"; isPointer: true } } + Component { + name: "QQuickScrollView" + defaultProperty: "contentData" + prototype: "QQuickControl" + exports: ["QtQuick.Templates/ScrollView 2.2"] + exportMetaObjectRevisions: [0] + Property { name: "contentWidth"; type: "double" } + Property { name: "contentHeight"; type: "double" } + Property { name: "contentData"; type: "QObject"; isList: true; isReadonly: true } + Property { name: "contentChildren"; type: "QQuickItem"; isList: true; isReadonly: true } + } Component { name: "QQuickSlider" defaultProperty: "data" diff --git a/src/imports/templates/qtquicktemplates2plugin.cpp b/src/imports/templates/qtquicktemplates2plugin.cpp index c50ca2f6..f8c34792 100644 --- a/src/imports/templates/qtquicktemplates2plugin.cpp +++ b/src/imports/templates/qtquicktemplates2plugin.cpp @@ -70,6 +70,7 @@ #include #include #include +#include #include #include #include @@ -231,6 +232,7 @@ void QtQuickTemplates2Plugin::registerTypes(const char *uri) qmlRegisterType(uri, 2, 2, "Drawer"); qmlRegisterType(uri, 2, 2, "RangeSlider"); qmlRegisterType(uri, 2, 2, "ScrollBar"); + qmlRegisterType(uri, 2, 2, "ScrollView"); qmlRegisterType(uri, 2, 2, "Slider"); qmlRegisterType(uri, 2, 2, "SpinBox"); qmlRegisterType(uri, 2, 2, "SwipeDelegate"); -- cgit v1.2.3