Кнопка SwiftUI с анимацией + проблема перехода при отображении цвета фона в окне

Уважаемое сообщество SwiftUI,

Я пытаюсь создать текстовое поле, которое переключает отображение / скрытие с анимацией движения вверх / вниз при нажатии кнопки.

Я нашел этот полезный источник на как это сделать.

Однако, когда я попробовал его на своем собственном коде, он работал только с переключателем отображения, а не с переключателем скрытия (также при запуске на моем iPhone). После полного удаления кода до тех пор, пока он не приведен ниже, я обнаружил, что эта проблема решается, когда я удаляю (фон) цвет на начальном ZStack.

Я не понимаю, почему это так. Это ошибка SwiftUI или есть какая-то логика? Кроме того, я не уверен, как теперь добавить фон в это окно, чтобы снова не испортить анимацию текстового поля.

У кого-нибудь есть дополнительная информация по этому поводу?

Заранее спасибо!

Бест, Пол

import SwiftUI

struct MatchResultsInput: View {
    
    @State private var show = false
    
    var body: some View {

        ZStack {
            Color(#colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1))
                .ignoresSafeArea()
            
            VStack {
                Button(action: {
                    withAnimation {
                        show.toggle()
                    }
                }) {
                    Text("Show/Hide button")
                        .foregroundColor(.white)
                        .bold()
                }
                .padding(5)
                .background(Color(#colorLiteral(red: 0.2117647059, green: 0.8, blue: 0.5176470588, alpha: 1)))
                .clipShape(Capsule())
                
                Spacer()
                
            }
            
            if show {
                
                VStack {
                    
                    Text("16")
                        .foregroundColor(.gray)
                        .font(.system(size: 30))
                        .bold()   
                }
                .transition(.move(edge: .bottom))                
            }
        }
    }
}

struct MatchResultsInput_Previews: PreviewProvider {
    static var previews: some View {
        MatchResultsInput()
    }
}

swiftui swiftui-animation
person Paul    schedule 26.05.2021    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Не думаю, что это ошибка. Я могу исправить это, добавив zIndex, как показано ниже. Пожалуйста, дайте мне знать, работает ли это и для вас. Удачного кодирования!

struct MatchResultsInput: View {

    @State private var show = false
    var body: some View {
        ZStack {
            Color(#colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1))
                .ignoresSafeArea()
                .zIndex(0)
            ...
            if show {
                VStack {
                    ...
                }
                .transition(.move(edge: .bottom))
                .zIndex(1)
            }
        }
    }
}
person Hieu Dinh    schedule 26.05.2021

arrow_upward
1
arrow_downward

Поскольку вы добавляете / удаляете представления внутри ZStack, вам необходимо установить zIndex. В противном случае SwiftUI может немедленно изменить порядок стека, и вы не получите перехода.

if show {
    VStack {
        Text("16")
            .foregroundColor(.gray)
            .font(.system(size: 30))
            .bold()
    }
    .transition(.move(edge: .bottom))
    .zIndex(2) /// here!
}

Результат:

Переход кнопки слайда при отображении и скрытии

person aheze    schedule 26.05.2021