设备方向更改和应用程序背景到前台转换时的 SwiftUI 视图对齐问题

Question

当设备方向更改或应用程序从后台转换到前台时，我遇到了 SwiftUI 视图对齐问题。尽管我做出了努力，但视图（选项卡栏）似乎未对齐，导致用户体验不佳。

下面是我用来显示 UI 的代码的简化版本：

@main
struct SSWIFTUIApp: App {
    var body: some Scene {
        WindowGroup {
            TabbarViewApp()
        }
    }
}

struct TabbarViewApp: View {
    
    init() {
        let app = UITabBarAppearance()
        app.configureWithOpaqueBackground()
        app.backgroundColor = UIColor.systemPink
        app.selectionIndicatorTintColor = .black

        UITabBar.appearance().standardAppearance = app
        if #available(iOS 15.0, *) {
            UITabBar.appearance().scrollEdgeAppearance = app
        }
    }
    
    @State private var selected: Int = 1
    
    @State private var id: String = ""
    
    var body: some View {
        TabView(selection: $selected,
                content:  {
            NavigationView(content: {
                VStack(alignment: .center, spacing: 0, content: {
                    TextField("Connection ID", text: $id)
                        .padding(.horizontal, 5)
                        .frame(height: 40)
                        .border(Color.black, width: 1)
                        .padding()
                })
            })
            .navigationViewStyle(.stack)
            .tabItem {
                Label("Home", systemImage: "house")
                    .foregroundColor(selected == 1 ? Color.accentColor : Color.white)
            }
            .tag(1)
            
            NavigationView(content: {
                
            })
            .navigationViewStyle(.stack)
            .tabItem {
                Label("Settings", systemImage: "gear")
                    .foregroundColor(selected == 2 ? Color.accentColor : Color.white)
            }
            .tag(2)
        })
    }
}

下面用上面的代码演示的问题

设备方向更改或应用程序从后台转换到前台时，视图的对齐方式似乎已关闭。我尝试过使用 GeometryReader 调整填充，甚至合并特定的布局指南，但问题仍然存在。

我将非常感谢有关如何确保在这些情况下 SwiftUI 视图正确对齐的任何见解或解决方案。预先感谢您的帮助！

Answer 1

这似乎是一个 iOS SwiftUI bug，但我设法避免了 tabbar 跳转，但 TextField 仍然跳转。您可以检查一下吗：

struct TabbarViewApp: View {

init() {
    let app = UITabBarAppearance()
    app.configureWithOpaqueBackground()
    app.backgroundColor = UIColor.systemPink
    app.selectionIndicatorTintColor = .black

    UITabBar.appearance().standardAppearance = app
    if #available(iOS 15.0, *) {
        UITabBar.appearance().scrollEdgeAppearance = app
    }
}

@State private var selected: Int = 1
@State private var id: String = ""

// Added a state for device orientation
//
@State private var orientation = UIDevice.current.orientation

var body: some View {
    TabView(selection: $selected,
            content:  {
        NavigationView(content: {
            VStack(alignment: .center, spacing: 0, content: {
                TextField("Connection ID", text: $id)
                    .padding(.horizontal, 5)
                    .frame(height: 40)
                    .border(Color.black, width: 1)
                    .padding()
            })
            .onReceive(NotificationCenter.default.publisher(for: UIDevice.orientationDidChangeNotification)) { _ in
                orientation = UIDevice.current.orientation // observe and set state
            }
            .animation(.easeInOut(duration: 0), value: orientation) // observe and remove animation
        })
        .navigationViewStyle(.stack)
        .tabItem {
            Label("Home", systemImage: "house")
                .foregroundColor(selected == 1 ? Color.accentColor : Color.white)
        }
        .tag(1)
        
        NavigationView(content: {
            
        })
        .navigationViewStyle(.stack)
        .tabItem {
            Label("Settings", systemImage: "gear")
                .foregroundColor(selected == 2 ? Color.accentColor : Color.white)
        }
        .tag(2)
    })
}

}