qtqmlmaterial-design

How to use Material.elevation and Radius in a Pane?


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:


Solution

  • 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
        }
    }
    

    enter image description here