如何在窗格中使用Material.elevation和Radius? [英] How to use Material.elevation and Radius in a Pane?

问题描述

我正在尝试使用添加了Material.elevation: 6的窗格，但又要为其赋予圆角边缘，而我不能同时将它们聚在一起

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:

推荐答案

您必须基于 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
    }
}

这篇关于如何在窗格中使用Material.elevation和Radius?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！