在 HSack 中时,SwiftUI 转换不起作用

SwiftUI transition is not working when in HSack

我有一个 VStack 将一个数字元素包裹在另一个 HStack 中,我想在加载时添加一个简单的从底部到顶部的转换,但它对输出没有任何影响:

var body: some View {
    let bottomPadding = ScreenRectHelper.shared.bottomPadding + 150
    GeometryReader { geometry in
        ZStack {
            VisualEffectViewSUI(effect: UIBlurEffect(style: .regular))
                .edgesIgnoringSafeArea(.all)

            VStack(alignment: .center) {
                Spacer()
                HStack {
                    VStack(alignment: .leading, spacing: 15) {
                        ForEach(items, id: \.id) { item in
                            HStack(alignment: .center) {
                                Image(item.imageName)
                                    .resizable()
                                    .scaledToFit()
                                    .frame(width: 24)

                                Spacer()
                                    .frame(width: 15)

                                Text("\(item.text)")
                                    .foregroundColor(.white)
                                    .transition(.move(edge: .bottom))
                            }
                            .contentShape(Rectangle())
                            .onTapGesture {
                                 /// Do something
                            }

                        }
                        

                    }
                }
                .frame(width: geometry.size.width, height: nil, alignment: .center)
                
            }.zIndex(1)
            .frame(width: geometry.size.width, height: nil, alignment: .center)
                .padding(.bottom, bottomPadding)
        }.background(
            LinearGradient(gradient: Gradient(colors: [gradientColor.opacity(0),gradientColor]), startPoint: .top, endPoint: .bottom)
         )
            
    }.edgesIgnoringSafeArea(.all)

}

SwiftUI 视图已添加到 UIKit 视图控制器,并且该视图控制器以模态方式呈现。

.transition 仅当您有条件地将某些内容插入视图时才有效。

我不太确定你想要实现什么,但如果你想让整个视图从底部滑动,这就可以了。

struct ContentView: View {
    
    @State private var showText = false
    let bottomPadding: CGFloat = 150
    
    var body: some View {

        ZStack {
            if showText {  // conditional view to make .transition work
                
                    //   VisualEffectViewSUI(effect: UIBlurEffect(style: .regular))
                    //   .edgesIgnoringSafeArea(.all)
                    
                    VStack(alignment: .center) {
                        Spacer()
                        HStack {
                            VStack(alignment: .leading, spacing: 15) {
                                ForEach(0 ..< 3) { item in
                                    HStack(alignment: .center) {
                                        Image(systemName: "\(item).circle")
                                            .resizable()
                                            .scaledToFit()
                                            .frame(width: 24)
                                        
                                        Spacer()
                                            .frame(width: 15)
                                        
                                        Text("Item \(item)")
                                            .foregroundColor(.white)
                                    }
                                }
                            }
                        }
                    }
                    .frame(maxWidth: .infinity)
                    .padding(.bottom, bottomPadding)

                    .background(
                    LinearGradient(gradient: Gradient(colors: [.blue.opacity(0), .blue]),
                                   startPoint: .top, endPoint: .bottom)
                )
                .edgesIgnoringSafeArea(.all)
                .transition(.move(edge: .bottom)) // here for whole modal view

            }
            
            Button("Show modal") {
                withAnimation {
                    showText.toggle()
                }
            }
            
        }
    }
}