根据 SwiftUI 中的旋转对齐 ZStack 中的文本

Question

我在对齐 ZStack 中的文本时遇到一些问题...更具体地说，如果我在启动应用程序后旋转设备...

我希望文本与视图的顶部对齐，但您可以在下面看到正在发生的事情的图像...

如果我在纵向设备上打开应用程序，则对齐是正确的...

Alignment with app started in portrait

...但是如果我将设备旋转到横向，文本会移动到顶部中心...

Alignment after rotation to landscape

如果我在横向设备上启动应用程序，一切都正确对齐...

Alignment with app started in landscape

...但是如果我将设备旋转到纵向，文本几乎完全消失...

Alignment after rotation to portrait

这是 ContentView 的代码：

import SwiftUI

let furl = URL(fileURLWithPath: "path")

struct ContentView: View {
    
    @State private var selected = 0
    
    var body: some View {
        TabView(selection: $selected) {
            NavigationView {
                HomeView()
            }
            .navigationViewStyle(StackNavigationViewStyle())
            .tabItem {
                Image(systemName: (selected == 0 ? "house.fill" : "house"))
                Text("Home")
            }.tag(0)
            NavigationView {
                CategoryView(dm: DownloadManager())
            }
            .navigationViewStyle(DoubleColumnNavigationViewStyle())
            .tabItem {
                Image(systemName: (selected == 1 ? "text.justify" : "text.justify"))
                Text("Categorie")
            }.tag(1)
            NavigationView {
                GalleryView(dm: DownloadManager())
            }
            .navigationViewStyle(DoubleColumnNavigationViewStyle())
            .tabItem {
                Image(systemName: (selected == 2 ? "photo.fill" : "photo"))
                Text("Galleria")
            }.tag(2)
            NavigationView {
                FavoritesView()
            }
            .navigationViewStyle(DoubleColumnNavigationViewStyle())
            .tabItem {
                Image(systemName: (selected == 3 ? "star.fill" : "star"))
                Text("Preferiti")
            }.tag(3)
            NavigationView {
                InfoView()
            }
            .navigationViewStyle(StackNavigationViewStyle())
            .tabItem {
                Image(systemName: (selected == 4 ? "info.circle.fill" : "info.circle"))
                Text("Informazioni")
            }.tag(4)
        }
        .accentColor(.white)
        .onAppear() {
            UINavigationBar.appearance().barTintColor = UIColor(red: 112.0/255.0, green: 90.0/255.0, blue: 143.0/255.0, alpha: 1.0)
            UITabBar.appearance().barTintColor = UIColor(red: 112.0/255.0, green: 90.0/255.0, blue: 143.0/255.0, alpha: 1.0)
            UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

这是 HomeView 的代码（我遇到问题的地方）：

import SwiftUI

struct HomeView: View {
    
    @State private var showAlertSheet = false
    @ObservedObject var monitor = NetworkMonitor()
    
    var body: some View {
        ZStack {
            Image("vivibusso_home")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .clipped()
            VStack(alignment: .leading) {
                Text("Benvenuto")
                    .font(.largeTitle)
                    .fontWeight(.bold)
                    .padding(.leading)
                Text("a Busso!")
                    .font(.largeTitle)
                    .fontWeight(.bold)
                    .padding(.leading)
            }
            .frame(maxWidth: UIScreen.main.bounds.width, maxHeight: UIScreen.main.bounds.height, alignment: .topLeading)
            .padding(.top)
        }
        .navigationTitle(Text("ViviBusso"))
        .navigationBarTitleDisplayMode(.inline)
        .navigationBarItems(trailing:
                                Button (action: {
                                    self.showAlertSheet = true
                                }) {
                                    Image(systemName: monitor.isConnected ? "wifi" : "wifi.slash")
                                })
        .alert(isPresented: $showAlertSheet) {
            if monitor.isConnected {
                return Alert(title: Text("Tutto OK!"), message: Text("ViviBusso funziona correttamente!"), dismissButton: .default(Text("OK")))
            }
            return Alert(title: Text("Attenzione!"), message: Text("ViviBusso ha bisogno della connessione Internet per funzionare!"), dismissButton: .default(Text("OK")))
        }
    }
}

struct HomeView_Previews: PreviewProvider {
    static var previews: some View {
        HomeView()
    }
}

我该如何解决这个问题？

谢谢！

Answer 1

  ZStack(alignment:.topLeading) { //<= here
            
            GeometryReader { proxy in //<= here
                Image("vivibusso_home")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .border(Color.black)
                    .frame(width: proxy.size.width, height: proxy.size.height)// <= here
            }
            
            VStack(alignment: .leading) {
                Text("Benvenuto")
                    .font(.largeTitle)
                    .fontWeight(.bold)
                    .padding(.leading)
                Text("a Busso!")
                    .font(.largeTitle)
                    .fontWeight(.bold)
                    .padding(.leading)
            }
            //<=here
            .padding(.top)
        }
        .navigationTitle(Text("ViviBusso"))
          ...

根据 SwiftUI 中的旋转对齐 ZStack 中的文本

Aligning Text within ZStack based on rotation in SwiftUI

text

rotation

alignment

swiftui

zstack