Aligning Text within ZStack based on rotation in SwiftUI

Question

I'm having some trouble aligning Text inside a ZStack...more specifically, if I rotate the device after I started the app...

I want the Text to be aligned to the top leading of the View, but below you can see images of what's happening...

If I open the app with the device in portrait, the alignment is correct...

Alignment with app started in portrait

...but if I rotate the device to landscape, the text moves to the top center...

Alignment after rotation to landscape

Same thing if I start the app with the device in landscape, all aligned correctly...

Alignment with app started in landscape

...but if I rotate the device to portrait, the text almost disappear completely...

Alignment after rotation to portrait

This is the code for the 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()
    }
}

This is the code for the HomeView (where I have the problem):

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()
    }
}

How can I solve this?

Thank you!

question from:https://stackoverflow.com/questions/65649054/aligning-text-within-zstack-based-on-rotation-in-swiftui

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"))
          ...