zxctatar
zxctatar

Reputation: 105

QML the shadow of widgets inside ScrollView is cut off

I have a TextField that has a shadow, I want it to be visible when I put it in a ScrollView, but it gets cut off

#TextField (in other code it will be like InputField)

import QtQuick 2.15
import QtQuick.Controls 2.15
import Qt5Compat.GraphicalEffects
import "../../resources"

TextField {
    id: inputField
    width: Sizes.maxInputFieldWidth // 410
    height: Sizes.maxInputFieldHeight // 48

    leftPadding: Sizes.leftPaddingSize // 20
    rightPadding: Sizes.rightPaddingSize // 20
    topPadding: Sizes.topPaddingSize // 10
    bottomPadding: Sizes.bottomPaddingSize // 10

    color: Colors.pressedInputFieldTextColor
    placeholderTextColor: Colors.normalInputFieldTextColor

    font.pixelSize: Sizes.inputFieldTextSize // 20
    font.family: Fonts.textFont

    background: Rectangle {
        radius: Sizes.radiusInputFieldRectangle // 10
        color: parent.activeFocus ? Colors.pressedInputFieldColor : Colors.normalInputFieldColor
        border.color: parent.activeFocus ? Colors.pressedInputFieldBorderColor : Colors.normalInputFieldBorderColor
        layer.enabled: true
        layer.effect: DropShadow {
            anchors.fill: parent
            transparentBorder: Shadows.transparentBorder // true
            radius: Shadows.radius // 5
            color: Shadows.shadowColor
        }
    }
}

#code with faulty part

ColumnLayout {
        anchors.centerIn: parent
        spacing: 18

        WindowText {
            Layout.alignment: Qt.AlignHCenter | Qt.AlignLeft
            text: "Регистрация"
        }

        ScrollView {
            Layout.alignment: parent
            Layout.preferredWidth: contentWidth
            Layout.preferredHeight: contentHeight

            ColumnLayout {
                Layout.alignment: Qt.AlignCenter
                spacing: 18

                InputField {
                    Layout.alignment: Qt.AlignHCenter
                    Layout.preferredWidth: Sizes.maxInputFieldWidth
                    Layout.preferredHeight: Sizes.maxInputFieldHeight

                    placeholderText: "Введите имя"
                }

                InputField {
                    Layout.alignment: Qt.AlignHCenter
                    Layout.preferredWidth: Sizes.maxInputFieldWidth
                    Layout.preferredHeight: Sizes.maxInputFieldHeight

                    placeholderText: "Введите номер телефона"
                }

                InputField {
                    Layout.alignment: Qt.AlignHCenter
                    Layout.preferredWidth: Sizes.maxInputFieldWidth
                    Layout.preferredHeight: Sizes.maxInputFieldHeight

                    placeholderText: "Введите почту"
                }

                InputField {
                    Layout.alignment: Qt.AlignHCenter
                    Layout.preferredWidth: Sizes.maxInputFieldWidth
                    Layout.preferredHeight: Sizes.maxInputFieldHeight

                    placeholderText: "Введите пароль"
                }

                InputField {
                    Layout.alignment: Qt.AlignHCenter
                    Layout.preferredWidth: Sizes.maxInputFieldWidth
                    Layout.preferredHeight: Sizes.maxInputFieldHeight

                    placeholderText: "Повторите пароль"
                }
            }
        }

i tried using clip:false, z:1, tried different alignments, but nothing worked for me, i tried to make the size of my ScrolleView as height + radius of the shadow and width + radius of my shadow, but this also did not give a result, the shadow is still cut off on the left and top

maybe my implementation of ScrollView is wrong, since this is my first time working with it

Upvotes: 0

Views: 37

Answers (0)

Related Questions