I'm trying to use a Pane which I add Material.elevation: 6
but in turn I want to give it a rounded edge and I can not get both together at the same time
The following is attempted but the elevation is lost.
Pane {
// ...
Material.elevation: 6
background: Rectangle {
radius: 15
}
// ...
}
The idea is that you can keep both aspects to achieve something like:
You have to overwrite based on the source code:
RoundPane.qml
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Material 2.12
import QtQuick.Controls.Material.impl 2.12
Pane {
id: control
property int radius: 2
background: Rectangle {
color: control.Material.backgroundColor
radius: control.Material.elevation > 0 ? control.radius : 0
layer.enabled: control.enabled && control.Material.elevation > 0
layer.effect: ElevationEffect {
elevation: control.Material.elevation
}
}
}
IconPane.qml
import QtQuick 2.12
import QtQuick.Controls.Material 2.12
import QtQuick.Layouts 1.12
RoundPane {
id: control
property alias name: txt.text
property alias icon: image.source
Material.elevation: 6
radius: 15
RowLayout{
anchors.fill: parent
Image {
id: image
sourceSize.height: parent.height
}
Text {
id: txt;
}
}
}
main.qml
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
IconPane{
name: "Stack <b>Overflow</b>"
icon: "https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg"
anchors.centerIn: parent
}
}