SwiftUI - мешает ли добавление тени интерактивности на TextFields?

Question

Я создаю простое представление SwiftUI для приложения Catalyst Ma c, например:

var body: some View {
    ZStack {
        Color(envColor.getColor())
        HStack {
            Spacer()
            VStack {
                HStack {
                    TextField("First", text: $envColor.stringR)
                    TextField("Second", text: $envColor.stringG)
                }
            }
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 100, maxHeight: 200)
            .background(Color.gray)

            Spacer()
            VStack {
                Text("Right Side")
            }
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 100, maxHeight: 200)

            Spacer()
        }

    }
}

Когда я запускаю приложение, оно выглядит так: Простой вид с двумя текстовыми полями. Оба из них вы можете свободно вводить без проблем.

Вы можете выделить и редактировать любой из 255. Без проблем.

Однако, когда я добавляю тень к своему VStack следующим образом:

var body: some View {
    ZStack {
        Color(envColor.getColor())
        HStack {
            Spacer()
            VStack {
                HStack {
                    TextField("First", text: $envColor.stringR)
                    TextField("Second", text: $envColor.stringG)
                }
            }
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 100, maxHeight: 200)
            .background(Color.gray)
            .shadow(radius: 5)

            Spacer()
            VStack {
                Text("Right Side")
            }
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 100, maxHeight: 200)

            Spacer()
        }

    }
}

Приложение выглядит точно так же , но Я не могу набрать TextField s вообще. Они не выделяются, и я не могу их печатать. Я посмотрел на иерархию просмотра отладки, и она отлично смотрится с TextField s спереди.

Вот видео моего использования его с тенью. Как вы можете видеть, курсор не меняется, чтобы позволить мне редактировать.

Действительно ли добавление тени к VStack вызывает проблемы? А я что-то делаю неправильно? Или это ошибка?

Answer 1

Возможно, это дефект - вы можете оставить отзыв в Apple. Между тем я могу предложить решение - поставить тень на фон:

Протестировано с Xcode 11.4 / macOS 10.15.4

VStack {
    HStack {
        TextField("First", text: $first)
        TextField("Second", text: $second)
    }
}
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 100, maxHeight: 200)
.background(Color.gray.shadow(radius: 5))    // << here !!

Answer 2

Следующее изменение в моем коде решило проблему в дополнение к решению @ Asperi. Я добавил .clipped() и теперь работа TextField s.

var body: some View {
    ZStack {
        Color(envColor.getColor())
        HStack {
            Spacer()
            VStack {
                HStack {
                    TextField("First", text: $envColor.stringR)
                    TextField("Second", text: $envColor.stringG)
                }
            }
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 100, maxHeight: 200)
            .clipped()
            .background(Color.gray)

            Spacer()
            VStack {
                Text("Right Side")
            }
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 100, maxHeight: 200)

            Spacer()
        }

    }
}