diff options
Diffstat (limited to 'src/quickcontrols/material/impl')
5 files changed, 169 insertions, 116 deletions
diff --git a/src/quickcontrols/material/impl/BoxShadow.qml b/src/quickcontrols/material/impl/BoxShadow.qml index f77412d554..d702389cdf 100644 --- a/src/quickcontrols/material/impl/BoxShadow.qml +++ b/src/quickcontrols/material/impl/BoxShadow.qml @@ -16,6 +16,12 @@ RectangularGlow { property int blurRadius property int spreadRadius + // The strength of the shadow. We have this because RectangularGlow spreads + // out the shadow thinly, whereas lower elevation levels in Material 3 + // are less spread out and stronger. This is only used for items with fully-rounded + // corners, like buttons. + property real strength + // The source item the shadow is being applied to, used for correctly // calculating the corner radious property Item source @@ -23,6 +29,10 @@ RectangularGlow { property bool fullWidth property bool fullHeight + // qmllint disable unqualified + // Intentionally duck-typed (QTBUG-94807) + readonly property real sourceRadius: source && source.radius || 0 + x: (parent.width - width)/2 + offsetX y: (parent.height - height)/2 + offsetY @@ -32,8 +42,7 @@ RectangularGlow { width: implicitWidth + 2 * spreadRadius + (fullWidth ? 2 * cornerRadius : 0) height: implicitHeight + 2 * spreadRadius + (fullHeight ? 2 * cornerRadius : 0) glowRadius: blurRadius/2 - spread: 0.05 - // qmllint disable unqualified - // Intentionally duck-typed (QTBUG-94807) - cornerRadius: blurRadius + (source && source.radius || 0) + spread: strength + + cornerRadius: blurRadius + sourceRadius } diff --git a/src/quickcontrols/material/impl/CMakeLists.txt b/src/quickcontrols/material/impl/CMakeLists.txt index 8b8e2311b4..ebf3e1cbf3 100644 --- a/src/quickcontrols/material/impl/CMakeLists.txt +++ b/src/quickcontrols/material/impl/CMakeLists.txt @@ -12,6 +12,7 @@ set(qml_files "ElevationEffect.qml" "RadioIndicator.qml" "RectangularGlow.qml" + "RoundedElevationEffect.qml" "SliderHandle.qml" "SwitchIndicator.qml" ) diff --git a/src/quickcontrols/material/impl/ElevationEffect.qml b/src/quickcontrols/material/impl/ElevationEffect.qml index 6690567617..29ec742f4a 100644 --- a/src/quickcontrols/material/impl/ElevationEffect.qml +++ b/src/quickcontrols/material/impl/ElevationEffect.qml @@ -75,106 +75,113 @@ Item { The shadows to use for each possible elevation. There are three shadows that when combined make up the elevation. */ - readonly property var _shadows: [ - [{offset: 0, blur: 0, spread: 0}, - {offset: 0, blur: 0, spread: 0}, - {offset: 0, blur: 0, spread: 0}], - - [{offset: 1, blur: 3, spread: 0}, - {offset: 1, blur: 1, spread: 0}, - {offset: 2, blur: 1, spread: -1}], - - [{offset: 1, blur: 5, spread: 0}, - {offset: 2, blur: 2, spread: 0}, - {offset: 3, blur: 1, spread: -2}], - - [{offset: 1, blur: 8, spread: 0}, - {offset: 3, blur: 4, spread: 0}, - {offset: 3, blur: 3, spread: -2}], - - [{offset: 2, blur: 4, spread: -1}, - {offset: 4, blur: 5, spread: 0}, - {offset: 1, blur: 10, spread: 0}], - - [{offset: 3, blur: 5, spread: -1}, - {offset: 5, blur: 8, spread: 0}, - {offset: 1, blur: 14, spread: 0}], - - [{offset: 3, blur: 5, spread: -1}, - {offset: 6, blur: 10, spread: 0}, - {offset: 1, blur: 18, spread: 0}], - - [{offset: 4, blur: 5, spread: -2}, - {offset: 7, blur: 10, spread: 1}, - {offset: 2, blur: 16, spread: 1}], - - [{offset: 5, blur: 5, spread: -3}, - {offset: 8, blur: 10, spread: 1}, - {offset: 3, blur: 14, spread: 2}], - - [{offset: 5, blur: 6, spread: -3}, - {offset: 9, blur: 12, spread: 1}, - {offset: 3, blur: 16, spread: 2}], - - [{offset: 6, blur: 6, spread: -3}, - {offset: 10, blur: 14, spread: 1}, - {offset: 4, blur: 18, spread: 3}], - - [{offset: 6, blur: 7, spread: -4}, - {offset: 11, blur: 15, spread: 1}, - {offset: 4, blur: 20, spread: 3}], - - [{offset: 7, blur: 8, spread: -4}, - {offset: 12, blur: 17, spread: 2}, - {offset: 5, blur: 22, spread: 4}], - - [{offset: 7, blur: 8, spread: -4}, - {offset: 13, blur: 19, spread: 2}, - {offset: 5, blur: 24, spread: 4}], - - [{offset: 7, blur: 9, spread: -4}, - {offset: 14, blur: 21, spread: 2}, - {offset: 5, blur: 26, spread: 4}], - - [{offset: 8, blur: 9, spread: -5}, - {offset: 15, blur: 22, spread: 2}, - {offset: 6, blur: 28, spread: 5}], - - [{offset: 8, blur: 10, spread: -5}, - {offset: 16, blur: 24, spread: 2}, - {offset: 6, blur: 30, spread: 5}], - - [{offset: 8, blur: 11, spread: -5}, - {offset: 17, blur: 26, spread: 2}, - {offset: 6, blur: 32, spread: 5}], - - [{offset: 9, blur: 11, spread: -5}, - {offset: 18, blur: 28, spread: 2}, - {offset: 7, blur: 34, spread: 6}], - - [{offset: 9, blur: 12, spread: -6}, - {offset: 19, blur: 29, spread: 2}, - {offset: 7, blur: 36, spread: 6}], - - [{offset: 10, blur: 13, spread: -6}, - {offset: 20, blur: 31, spread: 3}, - {offset: 8, blur: 38, spread: 7}], - - [{offset: 10, blur: 13, spread: -6}, - {offset: 21, blur: 33, spread: 3}, - {offset: 8, blur: 40, spread: 7}], - - [{offset: 10, blur: 14, spread: -6}, - {offset: 22, blur: 35, spread: 3}, - {offset: 8, blur: 42, spread: 7}], - - [{offset: 11, blur: 14, spread: -7}, - {offset: 23, blur: 36, spread: 3}, - {offset: 9, blur: 44, spread: 8}], - - [{offset: 11, blur: 15, spread: -7}, - {offset: 24, blur: 38, spread: 3}, - {offset: 9, blur: 46, spread: 8}] + property var _shadows: _defaultShadows + + readonly property var _defaultShadows: [ + { // 0 + angularValues: [ + {offset: 0, blur: 0, spread: 0}, + {offset: 0, blur: 0, spread: 0}, + {offset: 0, blur: 0, spread: 0} + ], + strength: 0.05 + }, + { // 1 + angularValues: [ + {offset: 1, blur: 3, spread: 0}, + {offset: 1, blur: 1, spread: 0}, + {offset: 2, blur: 1, spread: -1} + ], + strength: 0.05 + }, + { // 2 + angularValues: [ + {offset: 1, blur: 5, spread: 0}, + {offset: 2, blur: 2, spread: 0}, + {offset: 3, blur: 1, spread: -2} + ], + strength: 0.05 + }, + { // 3 + angularValues: [ + {offset: 1, blur: 8, spread: 0}, + {offset: 3, blur: 4, spread: 0}, + {offset: 3, blur: 3, spread: -2} + ], + strength: 0.05 + }, + { // 4 + angularValues: [ + {offset: 2, blur: 4, spread: -1}, + {offset: 4, blur: 5, spread: 0}, + {offset: 1, blur: 10, spread: 0} + ], + strength: 0.05 + }, + { // 5 + angularValues: [ + {offset: 3, blur: 5, spread: -1}, + {offset: 5, blur: 8, spread: 0}, + {offset: 1, blur: 14, spread: 0} + ], + strength: 0.05 + }, + { // 6 + angularValues: [ + {offset: 3, blur: 5, spread: -1}, + {offset: 6, blur: 10, spread: 0}, + {offset: 1, blur: 18, spread: 0} + ], + strength: 0.05 + }, + { // 7 + angularValues: [ + {offset: 4, blur: 5, spread: -2}, + {offset: 7, blur: 10, spread: 1}, + {offset: 2, blur: 16, spread: 1} + ], + strength: 0.05 + }, + { // 8 + angularValues: [ + {offset: 5, blur: 5, spread: -3}, + {offset: 8, blur: 10, spread: 1}, + {offset: 3, blur: 14, spread: 2} + ], + strength: 0.05 + }, + { // 9 + angularValues: [ + {offset: 5, blur: 6, spread: -3}, + {offset: 9, blur: 12, spread: 1}, + {offset: 3, blur: 16, spread: 2} + ], + strength: 0.05 + }, + { // 10 + angularValues: [ + {offset: 6, blur: 6, spread: -3}, + {offset: 10, blur: 14, spread: 1}, + {offset: 4, blur: 18, spread: 3} + ], + strength: 0.05 + }, + { // 11 + angularValues: [ + {offset: 6, blur: 7, spread: -4}, + {offset: 11, blur: 15, spread: 1}, + {offset: 4, blur: 20, spread: 3} + ], + strength: 0.05 + }, + { // 12 + angularValues: [ + {offset: 7, blur: 8, spread: -4}, + {offset: 12, blur: 17, spread: 2}, + {offset: 5, blur: 22, spread: 4} + ], + strength: 0.05 + } ] /* @@ -202,9 +209,10 @@ Item { // the size of the parent, so we don't need to worry about the extra padding // in the parent Item BoxShadow { - offsetY: effect._shadow[0].offset - blurRadius: effect._shadow[0].blur - spreadRadius: effect._shadow[0].spread + offsetY: effect._shadow.angularValues[0].offset + blurRadius: effect._shadow.angularValues[0].blur + spreadRadius: effect._shadow.angularValues[0].spread + strength: effect._shadow.strength color: Qt.rgba(0,0,0, 0.2) fullWidth: effect.fullWidth @@ -213,9 +221,10 @@ Item { } BoxShadow { - offsetY: effect._shadow[1].offset - blurRadius: effect._shadow[1].blur - spreadRadius: effect._shadow[1].spread + offsetY: effect._shadow.angularValues[1].offset + blurRadius: effect._shadow.angularValues[1].blur + spreadRadius: effect._shadow.angularValues[1].spread + strength: effect._shadow.strength color: Qt.rgba(0,0,0, 0.14) fullWidth: effect.fullWidth @@ -224,9 +233,10 @@ Item { } BoxShadow { - offsetY: effect._shadow[2].offset - blurRadius: effect._shadow[2].blur - spreadRadius: effect._shadow[2].spread + offsetY: effect._shadow.angularValues[2].offset + blurRadius: effect._shadow.angularValues[2].blur + spreadRadius: effect._shadow.angularValues[2].spread + strength: effect._shadow.strength color: Qt.rgba(0,0,0, 0.12) fullWidth: effect.fullWidth diff --git a/src/quickcontrols/material/impl/RoundedElevationEffect.qml b/src/quickcontrols/material/impl/RoundedElevationEffect.qml new file mode 100644 index 0000000000..c197823dc6 --- /dev/null +++ b/src/quickcontrols/material/impl/RoundedElevationEffect.qml @@ -0,0 +1,35 @@ +// Copyright (C) 2022 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only + +import QtQuick.Controls.Material +import QtQuick.Controls.Material.impl + +ElevationEffect { + required property int roundedScale + + _shadows: roundedScale === Material.NotRounded ? _defaultShadows : roundedShadows() + + function roundedShadows() { + // Make a deep copy. + let shadows = [..._defaultShadows] + for (let i = 0, strength = 0.95; i < shadows.length; ++i) { + // See comment on BoxShadow's strength property for why we do this. + shadows[i].strength = strength + // We don't want the strength to be too high for the controls with very slightly rounded + // corners, as they are quite close to the non-rounded ones in terms of not needing adjustments. + // This is still not great for the higher elevations for ExtraSmallScale, but it's as good + // as I can get it. + strength = Math.max(0.05, strength - (roundedScale > Material.ExtraSmallScale ? 0.1 : 0.3)) + + // The values at index 0 are already 0, and we don't want our Math.max(1, ...) code to affect them. + if (i > 0) { + // The blur values for e.g. buttons with rounded corners are too large, so we reduce them. + for (let angularShadowIndex = 0; angularShadowIndex < shadows[i].angularValues.length; ++angularShadowIndex) { + shadows[i].angularValues[angularShadowIndex].blur = + Math.max(1, Math.floor(shadows[i].angularValues[angularShadowIndex].blur / 4)) + } + } + } + return shadows + } +} diff --git a/src/quickcontrols/material/impl/qquickmaterialripple.cpp b/src/quickcontrols/material/impl/qquickmaterialripple.cpp index 04e171f190..89648182d4 100644 --- a/src/quickcontrols/material/impl/qquickmaterialripple.cpp +++ b/src/quickcontrols/material/impl/qquickmaterialripple.cpp @@ -227,7 +227,6 @@ void QQuickMaterialRipple::setClipRadius(qreal radius) return; m_clipRadius = radius; - setClip(!qFuzzyIsNull(radius)); update(); } @@ -323,8 +322,7 @@ QSGNode *QQuickMaterialRipple::updatePaintNode(QSGNode *oldNode, UpdatePaintNode QQuickItemPrivate *d = QQuickItemPrivate::get(this); QQuickDefaultClipNode *clipNode = d->clipNode(); if (clipNode) { - // TODO: QTBUG-51894 - // clipNode->setRadius(m_clipRadius); + clipNode->setRadius(m_clipRadius); clipNode->setRect(boundingRect()); clipNode->update(); } |