'alignment and constraint does not work in SwiftUI

I'm just trying to use the segment control which work on both -iPhone and iPad devices. Using SwiftUI, below is the code and screenshot, this code does not work for iPad and different versions of iPhone devices.

struct ContentView: View {
    @State private var favoriteColor = 0
    
    var body: some View {
        NavigationView {
            HStack{
                Picker("What is your favorite color?", selection: $favoriteColor) {
                                Text("Red").tag(0)
                                Text("Green").tag(1)
                                Text("Blue").tag(2)
                            }
                            .pickerStyle(.segmented)
                            .padding(.top,10)
                 }
            }
}

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

Attached screenshotenter image description here

iPad enter image description here

Not sure, how to align this for any iPhone or iPad devices

iphoneipadswiftuialignment


Solution 1:[1]

enter image description hereYour ipad view is not looking proper as you want Because you did not gave navigationViewStyle to your navigation View.

            NavigationView {
               HStack{
                   Picker("What is your favorite color?", selection: $favoriteColor) {
                                   Text("Red").tag(0)
                                   Text("Green").tag(1)
                                   Text("Blue").tag(2)
                               }
                               .pickerStyle(.segmented)
                               .padding(.top,10)
                    }
    }.navigationViewStyle(StackNavigationViewStyle())

Just add .navigationViewStyle(StackNavigationViewStyle()) at the end of your NavigationView.

Solution 2:[2]

As Namra Parmar said you need to set (override) the default navigation style of the iPad, because, by default, views are stacked up on iPhone, but they become columns on the iPad. Here are some devices with different screen sizes: iPhone SE 1st gen (4.0inch), iPhone 13 Pro (6.06inch), iPhone 13 Pro Max (6.68inch), iPad pro (12.9inch), when you set the navigationViewStyle to "StackNavigationViewStyle()".

enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 SAndreev

Related Questions