SwiftUI在List和NavigationView中的奇怪行为--模糊功能正在改变y偏移。

Question

我有一个 List 帗 NavigationView如果我模糊它，视图就会改变偏移量，似乎它在列表视图中强制边缘忽略安全区域。

情况1： 如果我模糊它，视图正在改变偏移。

情况2：如果我把东西放在 List 在 VStack，偏移量为右（与对象的空间）。

情况3：我发现的变通方法，是在模糊效果处增加偏移量y:1。

struct Test: View {

@State private var arr = [1,2,3,4]

var body: some View {
   TabView {
       NavigationView {
            HStack {
                VStack {
                    List {
                        ForEach (arr, id:\.self) { _ in
                            Image(systemName: "person")
                            .resizable()
                            .frame(width: 150, height: 150)
                        }
                    }
                }
                VStack {
                    List {
                        ForEach (arr, id:\.self) { _ in
                            Image(systemName: "person")
                            .resizable()
                            .frame(width: 150, height: 150)
                        }
                    }
                    .blur(radius: 3)
                }
            }
            .navigationBarTitle(Text("TITLE"), displayMode: .inline)
       }
        .navigationViewStyle(DoubleColumnNavigationViewStyle())//DoubleColumnNavigationViewStyle())
            .tabItem {
                Image(systemName: "message")
                Text("LIST + LIST BLUR")
            }
        .tag(1)
            NavigationView {
                HStack {
                    VStack {
                        List {
                            ForEach (arr, id:\.self) { _ in
                                Image(systemName: "person")
                                .resizable()
                                .frame(width: 150, height: 150)
                            }
                        }
                    }
                    VStack {
                        Text("2").frame(width: 0, height: 0)
                        List {
                            ForEach (arr, id:\.self) { _ in
                                Image(systemName: "person")
                                .resizable()
                                .frame(width: 150, height: 150)
                            }
                        }
                        .blur(radius: 3)
                    }
                }
                .navigationBarTitle(Text("TITLE"), displayMode: .inline)
            }
            .tabItem {
                VStack {
                    Image(systemName: "circle")
                    Text("LIST+VSTACKBLUR")
                }

            }
        .tag(2)
            NavigationView {
                HStack {
                    VStack {
                        List {
                            ForEach (arr, id:\.self) { _ in
                                Image(systemName: "person")
                                .resizable()
                                .frame(width: 150, height: 150)
                            }
                        }
                    }
                    VStack {
                        List {
                            ForEach (arr, id:\.self) { _ in
                                Image(systemName: "person")
                                .resizable()
                                .frame(width: 150, height: 150)
                            }
                        }
                        .blur(radius: 3).offset(y:1)
                    }
                }
                .navigationBarTitle(Text("TITLE"), displayMode: .inline)
            }
            .tabItem {
                VStack {
                    Image(systemName: "circle")
                    Text("List+BLUR+OFFSET")
                }
            }
    }

}
}

struct Test_Previews: PreviewProvider {
    static var previews: some View {
        Test()
    }
}

更新。我无法在列表中模糊显示 因为我使用了View的扩展来显示个人的TextFieldAlert。

extension View {

func textFieldAlert(isShowing: Binding<Bool>,
                    text: Binding<String>,
                    title: String, grayText: String, onReturnPressed: @escaping () -> Void) -> some View {
    TextFieldAlert(isShowing: isShowing,
                   text: text,
                   presenting: { self },
                   title: title, grayText: grayText, onReturnPressed: 
                   onReturnPressed)
    }

}
struct TextFieldAlert<Presenting>: View where Presenting: View {

@Binding var isShowing: Bool
@Binding var text: String
let presenting: () -> Presenting
let title: String
var grayText:String

let onReturnPressed: () -> Void

func returnFunction() {//quando l'utenti schiaccia ok o invio}
    self.isShowing = false
    self.onReturnPressed()
}

var body: some View {
    GeometryReader { (deviceSize: GeometryProxy) in
        ZStack {

            if self.isShowing {
                self.presenting()
                .blur(radius: 3).offset(y:1) //I've added this
                .disabled(self.isShowing)
            }
            else {
                self.presenting()
                .disabled(self.isShowing)
            }                   
                VStack {
                    Spacer()
                    .frame(height: 8)
                    Text(self.title)
                    Divider()
                    TextField(self.grayText, text: self.$text, onCommit: {
                        self.returnFunction()
                    })                        
                    Divider()
                    Spacer()
                    .frame(height: 10)
                    HStack {
                        Button(action: {
                            withAnimation {
                                self.returnFunction()
                            }
                        }) {
                            Text("OK")

                             .frame(width: 150, height: 30)
                             .background(Color.white)
                             //.foregroundColor(.white)
                             .cornerRadius(15)

                        }                            
                    }                        
                }
                .padding()
                .background(Color.white)                    
                .clipShape(RoundedRectangle(cornerRadius: 15))
                .frame(
                    width: 250,//deviceSize.size.width*0.6,
                    height: 220//deviceSize.size.height*0.6
                )
                .offset(y: -100)
                .shadow(radius: 20)
                .opacity(self.isShowing ? 1 : 0)                    

                ZStack {
                    Circle().frame(width: 40, height: 40)
                    .foregroundColor(Color.white)
                    Image(systemName: "pencil.circle.fill")
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width: 50, height: 50)
                        .clipShape(Circle())
                        .foregroundColor(Color.blue)

                }
                .offset(x:0, y: -220/3 - 110)//-deviceSize.size.height*0.6/6 - 110)
                .opacity(self.isShowing ? 1 : 0)

            }

    }

}

}

Answer 1

只是模糊图像，即内容，而不是List本身...... 用Xcode 11.4 iOS 13.4进行测试

var body: some View {
   NavigationView {
        HStack {
            VStack {
                List {
                    ForEach (0..<10, id:\.self) { _ in
                        Image(systemName: "person")
                        .resizable()
                        .frame(width: 150, height: 150)
                    }
                }
            }
            VStack {
                List {
                    ForEach (0..<10, id:\.self) { _ in
                        Image(systemName: "person")
                        .resizable()
                        .frame(width: 150, height: 150)
                    }
                    .blur(radius: 3) // << here !!
                }
            }
        }
        .navigationBarTitle(Text("TITLE"), displayMode: .inline)
   }
}