SwiftUI - добавление тени ухудшает интерактивность текстовых полей?

Я создаю простое представление SwiftUI для приложения Catalyst Mac следующим образом:

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()
        }

    }
}

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

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

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


ios swift swiftui
person brettfazio    schedule 31.03.2020    source источник
comment
Я попробовал ваш код, и с моей стороны он работает нормально. Я могу печатать и редактировать что угодно в textField, с тенью и без нее   -  person Muhammad Waqas Bhati    schedule 31.03.2020
comment
@MuhammadWaqasBhati Я только что добавил видео о том, что вижу. Я не могу их редактировать, когда добавляю тень.   -  person brettfazio    schedule 31.03.2020
comment
Это потому, что UIKit находится под капотом SwiftUI. VStack просто никогда не вызывает drawRect метод, поэтому shadow не будет работать с ним. Фон с тенью работает, потому что делает дополнительные CALayer. https://stackoverflow.com/questions/34868344/how-to-change-the-background-color-of-uistackview/39720288   -  person imike    schedule 31.03.2020

Ответы (2)


arrow_upward
2
arrow_downward

Вероятно, это недоработка - вы можете оставить отзыв в 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 !!
person Asperi    schedule 31.03.2020
comment
Это сработало для меня. Я нашел другое решение проблемы, которое я поставил в другом ответе, и я отправил сообщение об ошибке в Apple. - person brettfazio; 31.03.2020

arrow_upward
0
arrow_downward

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

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()
        }

    }
}
person brettfazio    schedule 31.03.2020