%PDF- %PDF-
Direktori : C:/Windows/Temp/MBInstallTemp/ctlrpkg/QtQuick/Controls/Styles/Base/ |
Current File : C:/Windows/Temp/MBInstallTemp/ctlrpkg/QtQuick/Controls/Styles/Base/TumblerStyle.qml |
/**************************************************************************** ** ** Copyright (C) 2016 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** ** This file is part of the Qt Quick Extras module of the Qt Toolkit. ** ** $QT_BEGIN_LICENSE:LGPL$ ** 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 https://www.qt.io/terms-conditions. For further ** information use the contact form at https://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.LGPL3 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-3.0.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 (at your option) the GNU General ** Public license version 3 or any later version approved by the KDE Free ** Qt Foundation. The licenses are as published by the Free Software ** Foundation and appearing in the file LICENSE.GPL2 and LICENSE.GPL3 ** included in the packaging of this file. Please review the following ** information to ensure the GNU General Public License requirements will ** be met: https://www.gnu.org/licenses/gpl-2.0.html and ** https://www.gnu.org/licenses/gpl-3.0.html. ** ** $QT_END_LICENSE$ ** ****************************************************************************/ import QtQuick 2.0 import QtGraphicalEffects 1.0 import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.4 import QtQuick.Controls.Private 1.0 import QtQuick.Extras 1.4 import QtQuick.Extras.Private 1.0 /*! \qmltype TumblerStyle \inqmlmodule QtQuick.Controls.Styles \since 5.5 \ingroup controlsstyling \brief Provides custom styling for Tumbler. You can create a custom tumbler by replacing the following delegates: \list \li \l background \li \l foreground \li \l separator \li \l delegate \li \l highlight \li \l frame \endlist */ Style { id: tumblerStyle padding.left: __padding padding.right: __padding padding.top: __padding padding.bottom: __padding /*! The \l Tumbler that this style is attached to. */ readonly property Tumbler control: __control /*! \obsolete This property holds the spacing between each delegate. This property has no effect. */ property real spacing: 0 /*! This property holds the amount of items visible in each column. This value should be an odd number. */ property int visibleItemCount: 3 /*! \internal TODO: how do we handle differing padding values? */ readonly property real __padding: Math.max(6, Math.round(TextSingleton.implicitHeight * 0.4)) /*! \internal */ property real __delegateHeight: 0 /*! \internal */ property real __separatorWidth: 0 /*! The background of the tumbler. */ property Component background: Rectangle { gradient: Gradient { GradientStop { position: 0.00; color: "#acacac" } GradientStop { position: 0.12; color: "#d5d5d5" } GradientStop { position: 0.24; color: "#e8e8e8" } GradientStop { position: 0.39; color: "#ffffff" } GradientStop { position: 0.61; color: "#ffffff" } GradientStop { position: 0.76; color: "#e8e8e8" } GradientStop { position: 0.88; color: "#d5d5d5" } GradientStop { position: 1.00; color: "#acacac" } } } /*! The foreground of the tumbler. */ property Component foreground: Item { clip: true Rectangle { id: rect anchors.fill: parent // Go one pixel larger than our parent so that we can hide our one pixel frame // that the shadow is created from. anchors.margins: -1 color: "transparent" border.color: "black" visible: false } DropShadow { anchors.fill: rect source: rect samples: 15 spread: 0.45 cached: true } } /*! The separator between each column. The \l {Item::}{implicitWidth} property must be set, and should be the same value for each separator. */ property Component separator: Canvas { implicitWidth: Math.max(10, Math.round(TextSingleton.implicitHeight * 0.4)) onPaint: { var ctx = getContext("2d"); ctx.reset(); ctx.fillStyle = "#11000000"; ctx.fillRect(0, 0, width, height); ctx.fillStyle = "#11000000"; ctx.fillRect(width * 0.2, 0, width * 0.6, height); ctx.fillStyle = "#66000000"; ctx.fillRect(width * 0.4, 0, width * 0.2, height); } } /*! The foreground of each column. In terms of stacking order, this component is displayed above the delegate and highlight components, but below the foreground component. \table \row \li \c {readonly property int} \b styleData.column \li The index of the column that contains this item. \row \li \c {readonly property bool} \b styleData.activeFocus \li \c true if the column that contains this item has active focus. \endtable Delegates for items in specific columns can be defined using TumblerColumn's \l {TumblerColumn::columnForeground}{columnForeground} property, which will be used instead of this component. */ property Component columnForeground /*! The frame around the tumbler. The \l {Item::}{implicitWidth} property must be set, and should be the same value for each separator. */ property Component frame: Canvas { onPaint: { // workaround for QTBUG-40792 var ctx = getContext("2d"); ctx.reset(); var cornerRadius = Math.max(2, Math.round(TextSingleton.implicitHeight * 0.2)); var outerLineWidth = Math.max(1, Math.round(TextSingleton.implicitHeight * 0.05)); var innerLineWidth = __padding - outerLineWidth; ctx.save(); ctx.lineWidth = outerLineWidth; ctx.beginPath(); ctx.roundedRect(0, 0, width, height, cornerRadius, cornerRadius); ctx.roundedRect(outerLineWidth, outerLineWidth, width - outerLineWidth * 2, height - outerLineWidth * 2, cornerRadius - outerLineWidth, cornerRadius - outerLineWidth); ctx.clip(); ctx.beginPath(); ctx.rect(0, 0, width, height); var gradient = ctx.createLinearGradient(width / 2, 0, width / 2, height); gradient.addColorStop(0, "#33b3b3b3"); gradient.addColorStop(1, "#4ce6e6e6"); ctx.fillStyle = gradient; ctx.fill(); ctx.restore(); // The inner stroke must account for its corner radius. cornerRadius -= outerLineWidth; ctx.save(); ctx.lineWidth = innerLineWidth; ctx.beginPath(); ctx.roundedRect(outerLineWidth, outerLineWidth, width - outerLineWidth * 2, height - outerLineWidth * 2, cornerRadius, cornerRadius); ctx.roundedRect(outerLineWidth + innerLineWidth, outerLineWidth + innerLineWidth, width - outerLineWidth * 2 - innerLineWidth * 2, height - outerLineWidth * 2 - innerLineWidth * 2, cornerRadius - innerLineWidth, cornerRadius - innerLineWidth); ctx.clip(); ctx.beginPath(); ctx.rect(0, 0, width, height); gradient = ctx.createLinearGradient(width / 2, 0, width / 2, height); gradient.addColorStop(0, "#4c666666"); gradient.addColorStop(1, "#40cccccc"); ctx.fillStyle = gradient; ctx.fill(); ctx.restore(); } } /*! The delegate provides a template defining each item instantiated in the column. Each instance of this component has access to the following properties: \table \row \li \c {readonly property int} \b styleData.index \li The index of this delegate in the model. \row \li \c {readonly property int} \b styleData.column \li The index of the column that contains this item. \row \li \c {readonly property real} \b styleData.value \li The value for this delegate from the model. \row \li \c {readonly property bool} \b styleData.current \li \c true if this delegate is the current item. \row \li \c {readonly property real} \b styleData.displacement \li \c A value from \c {-visibleItemCount / 2} to \c {visibleItemCount / 2} which represents how far away this item is from being the current item, with \c 0 being completely current. For example, the item below will be 40% opaque when it is not the current item, and transition to 100% opacity when it becomes the current item: \code delegate: Text { text: styleData.value opacity: 0.4 + Math.max(0, 1 - Math.abs(styleData.displacement)) * 0.6 } \endcode \row \li \c {readonly property bool} \b styleData.activeFocus \li \c true if the column that contains this item has active focus. \endtable Properties of the model are also available depending upon the type of \l {qml-data-models}{Data Model}. Delegates for items in specific columns can be defined using TumblerColumn's \l {TumblerColumn::delegate}{delegate} property, which will be used instead of this delegate. The \l {Item::}{implicitHeight} property must be set, and it must be the same for each delegate. */ property Component delegate: Item { implicitHeight: (control.height - padding.top - padding.bottom) / tumblerStyle.visibleItemCount Text { id: label text: styleData.value color: "#666666" opacity: 0.4 + Math.max(0, 1 - Math.abs(styleData.displacement)) * 0.6 font.pixelSize: Math.round(TextSingleton.font.pixelSize * 1.25) anchors.centerIn: parent } } /*! The delegate for the highlight of each column. Delegates for the highlight of specific columns can be defined using TumblerColumn's \l {TumblerColumn::highlight}{highlight} property, which will be used instead of this delegate. Each instance of this component has access to the following properties: \table \row \li \c {readonly property int} \b styleData.index \li The index of this column in the tumbler. \row \li \c {readonly property int} \b styleData.columnIndex \li The index of the column that contains this highlight. \row \li \c {readonly property bool} \b styleData.activeFocus \li \c true if the column that contains this highlight has active focus. \endtable */ property Component highlight /*! \internal */ property Component panel: Item { implicitWidth: { var w = (__separatorWidth * (control.columnCount - 1)) + tumblerStyle.padding.left + tumblerStyle.padding.right; for (var i = 0; i < control.columnCount; ++i) w += control.getColumn(i).width; return w; } implicitHeight: TextSingleton.implicitHeight * 10 + tumblerStyle.padding.top + tumblerStyle.padding.bottom } }