Unable to get user's location using CLLocationManager - swiftui

I am having an issue when trying to request the user's location using CLLocationManager. When running my app, the Console gives this error: [WeatherDataService] Response did not contain requested dataset: .appLocationConfig. Returning default value: AppLocationConfig(reportAnIssue: ReportIssueLocationConfig(position: beforeFooter, minDaysSinceInteraction: 0), expireTime: 2023-01-23 07:30:06 +0000.
I tried looking up some tutorials on requesting the user's location using CLLocationManager but none of them worked.
Here is my LocationManager class and extension:
class LocationManager: NSObject, ObservableObject {
#Published var currentLocation: CLLocation?
private let locationManager = CLLocationManager()
override init() {
super.init()
locationManager.desiredAccuracy = kCLLocationAccuracyBest
locationManager.distanceFilter = kCLDistanceFilterNone
locationManager.requestAlwaysAuthorization()
locationManager.startUpdatingLocation()
locationManager.delegate = self
}
}
extension LocationManager: CLLocationManagerDelegate {
func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
guard let location = locations.last, currentLocation == nil else { return }
DispatchQueue.main.async {
self.currentLocation = location
}
}
}
Here is the code inside my VStack:
VStack{
if let weather {
VStack{
HStack{
Text("Singapore")
.padding()
.font(.largeTitle)
VStack {
Text("Condition: \(weather.currentWeather.condition.rawValue)")
.font(.title2)
Text("Temperature: \(weather.currentWeather.temperature.formatted())")
.font(.title2)
Text("Feels like: \(weather.currentWeather.apparentTemperature.formatted())")
.font(.title2)
// Text("Min: \() Max: \()")
// .font(.title)
}
}
Text("Today, \(weather.currentWeather.date.formatted())")
.font(.subheadline)
}
ScrollView(.vertical){
VStack{
HourlyForcastView(hourWeatherList: hourlyWeatherData, hourlyWeatherData: hourlyWeatherData)
TenDayForcastView(dayWeatherList: weather.dailyForecast.forecast)
HStack{
// Humidity
VStack{
Image(systemName: "humidity")
.font(.system(size: 65))
.foregroundColor(.yellow)
let humidity = (weather.currentWeather.humidity * 100)
Text("HUMIDITY")
.font(.headline)
.foregroundColor(.white)
Text("\(humidity.formatted())%")
.foregroundColor(.white)
}
.frame(width: 155)
.padding()
.background(content: {Color.blue})
.clipShape(RoundedRectangle(cornerRadius: 10.0, style: .continuous))
// Pressure
VStack{
HStack{
Image(systemName: "arrow.down")
.resizable()
.frame(width: 40, height: 60)
.foregroundColor(.yellow)
Image(systemName: "arrow.down")
.resizable()
.frame(width: 40, height: 60)
.foregroundColor(.yellow)
Image(systemName: "arrow.down")
.resizable()
.frame(width: 40, height: 60)
.foregroundColor(.yellow)
}
let pressure = (weather.currentWeather.pressure)
Text("PRESSURE")
.font(.headline)
.foregroundColor(.white)
Text("\(pressure.formatted())")
.foregroundColor(.white)
}
.frame(width: 155)
.padding()
.background(content: {Color.blue})
.clipShape(RoundedRectangle(cornerRadius: 10.0, style: .continuous))
}
HStack{
// Dew Point
VStack{
HStack{
Image(systemName: "drop")
.font(.system(size: 56.5))
.foregroundColor(.yellow)
Image(systemName: "drop")
.font(.system(size: 56.5))
.foregroundColor(.yellow)
}
let dewPoint = (weather.currentWeather.dewPoint)
Text("DEW POINT")
.font(.headline)
.foregroundColor(.white)
Text("\(dewPoint.formatted())")
.foregroundColor(.white)
}
.frame(width: 155)
.padding()
.background(content: {Color.blue})
.clipShape(RoundedRectangle(cornerRadius: 10.0, style: .continuous))
// UV Index
VStack{
Image(systemName: "sun.max")
.font(.system(size: 53))
.foregroundColor(.yellow)
let uvIndex = (weather.currentWeather.uvIndex)
Text("UV INDEX")
.font(.headline)
.foregroundColor(.white)
Text("\(uvIndex.value) - \(uvIndex.category.rawValue)")
.foregroundColor(.white)
}
.frame(width: 155)
.padding()
.background(content: {Color.blue})
.clipShape(RoundedRectangle(cornerRadius: 10.0, style: .continuous))
}
HStack{
// Wind Speed
VStack{
Image(systemName: "wind")
.font(.system(size: 53))
.foregroundColor(.yellow)
let windSpeed = (weather.currentWeather.wind)
Text("WIND SPEED")
.font(.headline)
.foregroundColor(.white)
Text("\(windSpeed.speed.formatted())")
.foregroundColor(.white)
}
.frame(width: 155)
.padding()
.background(content: {Color.blue})
.clipShape(RoundedRectangle(cornerRadius: 10.0, style: .continuous))
// Wind Direction
VStack{
Image(systemName: "wind")
.font(.system(size: 53))
.foregroundColor(.yellow)
let windSpeed = (weather.currentWeather.wind)
Text("WIND DIRECTION")
.font(.headline)
.foregroundColor(.white)
Text("\(windSpeed.compassDirection.rawValue)")
.foregroundColor(.white)
}
.frame(width: 155)
.padding()
.background(content: {Color.blue})
.clipShape(RoundedRectangle(cornerRadius: 10.0, style: .continuous))
}
HStack{
// Visibility
VStack{
Image(systemName: "mountain.2")
.font(.system(size: 53))
.foregroundColor(.yellow)
let visibility = (weather.currentWeather.visibility)
Text("VISIBILITY")
.font(.headline)
.foregroundColor(.white)
Text("\(visibility.formatted())")
.foregroundColor(.white)
}
.frame(width: 155)
.padding()
.background(content: {Color.blue})
.clipShape(RoundedRectangle(cornerRadius: 10.0, style: .continuous))
}
}
}
}
}
I also add a .task to my VStack so the weather data will only show up when the user's location has been retrieved:
} // This is where the VStack ends.
.padding()
.task(id: locationManager.currentLocation) {
do {
// if let location = locationManager.currentLocation {
let location = CLLocation(latitude: 1.30437, longitude: 103.82458)
self.weather = try await weatherService.weather(for: location)
// }
} catch {
print(error)
}
}

Related

Swift ScrollView goes on top again

I have a simple screen in which content are going on bottom so I use ScrollView on it issue is when I release scroll its going to top again. I need to replace scrollview to something Because I try with with List but that's not working properly with background image so I use Scrollview
struct signupView: View {
#StateObject var signUpViewModel = signupViewModel()
var body: some View {
ZStack{
GeometryReader { geo in
ScrollView {
VStack{
VStack{
Image("Untitled-2")
.resizable()
.frame(width: geo.size.width * 0.45, height: geo.size.width * 0.45)
}
.padding(.top, geo.size.height * 0.03)
HStack(spacing: 0){
VStack{
Text("Student")
.foregroundColor(signUpViewModel.isStudent ? Color("secondarycolor") : Color("authColorText"))
Rectangle()
.fill(signUpViewModel.isStudent ? Color("secondarycolor") : Color("authColorText"))
.frame(width: geo.size.width * 0.4, height: 2)
}
.onTapGesture {
signUpViewModel.isStudent = true
}
VStack{
Text("Facilitator")
.foregroundColor(!signUpViewModel.isStudent ? Color("secondarycolor") : Color("authColorText"))
Rectangle()
.fill(!signUpViewModel.isStudent ? Color("secondarycolor") : Color("authColorText"))
.frame(width: geo.size.width * 0.4, height: 2)
}
.onTapGesture {
signUpViewModel.isStudent = false
}
}
VStack{
VStack{
Spacer().frame(height: geo.size.height * 0.7)
TextField("", text: $signUpViewModel.nameField)
.modifier(PlaceholderStyle(showPlaceHolder: signUpViewModel.nameField.isEmpty,
placeholder: "Name"))
.padding()
.background(RoundedRectangle(cornerRadius: 50).fill(Color("primarycolorwithopacity")))
.foregroundColor(Color("authColorText"))
.foregroundColor(Color("authColorText")).font(Font.headline.weight(.medium))
.padding(.bottom, 10)
TextField("", text: $signUpViewModel.emailField)
.modifier(PlaceholderStyle(showPlaceHolder: signUpViewModel.emailField.isEmpty,
placeholder: "Email"))
.padding()
.background(RoundedRectangle(cornerRadius: 50).fill(Color("primarycolorwithopacity")))
.foregroundColor(Color("authColorText"))
.foregroundColor(Color("authColorText")).font(Font.headline.weight(.medium))
.padding(.bottom, 10)
SecureField("", text: $signUpViewModel.passwordField)
.modifier(PlaceholderStyle(showPlaceHolder: signUpViewModel.passwordField.isEmpty,
placeholder: "Password"))
.padding()
.background(RoundedRectangle(cornerRadius: 50).fill(Color("primarycolorwithopacity")))
.foregroundColor(Color("authColorText"))
.foregroundColor(Color("authColorText")).font(Font.headline.weight(.medium))
.padding(.bottom, 10)
SecureField("", text: $signUpViewModel.passwordRepeatField)
.modifier(PlaceholderStyle(showPlaceHolder: signUpViewModel.passwordRepeatField.isEmpty,
placeholder: "Repeat Password"))
.padding()
.background(RoundedRectangle(cornerRadius: 50).fill(Color("primarycolorwithopacity")))
.foregroundColor(Color("authColorText"))
.foregroundColor(Color("authColorText")).font(Font.headline.weight(.medium))
.padding(.bottom, 10)
TextField("", text: $signUpViewModel.countryField)
.modifier(PlaceholderStyle(showPlaceHolder: signUpViewModel.countryField.isEmpty,
placeholder: "Select Country"))
.padding()
.background(RoundedRectangle(cornerRadius: 50).fill(Color.black))
.foregroundColor(Color("authColorText"))
.foregroundColor(Color("authColorText")).font(Font.headline.weight(.medium))
.padding(.bottom, 10)
.overlay(
ZStack{if signUpViewModel.hasOptions {
Spacer().frame(height: 70)
VStack(alignment: .center) {
ForEach(signUpViewModel.countryoptions, id: \.self) {d in
Text(d).frame(maxWidth: .infinity).padding(8).onTapGesture {
signUpViewModel.countryField = d
signUpViewModel.hasOptions = false
}
Divider()
}
}.frame(maxWidth: .infinity).background(RoundedRectangle(cornerRadius: 6).foregroundColor(.white).shadow(radius: 4))
}
}.offset(y: 50)
, alignment: .topLeading)
.overlay(
Image("Untitled-42")
.resizable()
.foregroundColor(.white)
.frame(width: 15, height: 10).padding().padding(.bottom,2).onTapGesture {
signUpViewModel.hasOptions = !signUpViewModel.hasOptions
}
, alignment: .trailing).zIndex(1)
SecureField("", text: $signUpViewModel.passwordRepeatField)
.modifier(PlaceholderStyle(showPlaceHolder: signUpViewModel.passwordRepeatField.isEmpty,
placeholder: "Repeat Password"))
.padding()
.background(RoundedRectangle(cornerRadius: 50).fill(Color("primarycolorwithopacity")))
.foregroundColor(Color("authColorText"))
.foregroundColor(Color("authColorText")).font(Font.headline.weight(.medium))
.padding(.bottom, 10)
}.padding([.top, .leading, .trailing], 8).frame(height: 45)
}
}
.padding()
}
}
}.background(Image("Untitled-7").resizable()).edgesIgnoringSafeArea(.all)
}
}
When I release its going back to top. Don't get it why its happening on this. Or I need to use something else
One way of doing it is with introspect package, you can add the package here https://github.com/siteline/SwiftUI-Introspect.git
scrollView.bounces = false
Here's how I would do it with Introspect:
struct ContentView: View {
var body: some View {
ScrollView {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
Text("Hello, world!")
}
.padding()
}.introspectScrollView { scrollView in
scrollView.bounces = false
}
}
}
also don't forget the imports
import Introspect

Responsive design swiftUI

How can I make sure that my UI looks good on different devices such as the iPhone 13 and the iPhone 8?
Here is my code that is unresponsive
It is just a simple layout
import SwiftUI
let grey = Color(red: 0.928, green: 0.928, blue: 0.928)
let i = 0
var columns: [GridItem] =
Array(repeating: .init(.flexible()), count: 3)
let categories: [Category] = [
.init(name: "Pasta", imageName: "square.and.arrow.up"),
.init(name: "Asian", imageName: "square.and.arrow.down.fill"),
.init(name: "Main", imageName: "rectangle.portrait.and.arrow.right"),
.init(name: "Quick", imageName: "pencil.slash"),
.init(name: "Veg", imageName: "scribble.variable"),
.init(name: "Dessert", imageName: "pencil.circle.fill"),
]
struct SearchView: View {
var body: some View {
VStack{
Text("Search For Recipes")
.font(.system(size: 35))
.padding(.top, 80)
.padding(.horizontal, -70)
.frame(width: 200, height: 10, alignment: .leading)
Spacer()
SearchBox()
.padding(.top, 50)
Spacer()
Recomend()
.padding(.top)
.padding(.leading, -100)
Spacer()
LazyVGrid(columns: columns){
ForEach((0...5), id: \.self) { _ in
MenuChoice()
}
}
.padding(20)
.padding(.bottom, 100)
.padding(.top)
.frame(maxWidth: .infinity)
.frame(height:500)
}
}
}
struct SearchBox: View {
var body: some View{
VStack{
HStack{
Image(systemName: "magnifyingglass")
Text("Search for recipes")
}
.frame(width: 200, height: 10, alignment: .leading)
.padding(.trailing, 60)
}
.frame(width: 300, height: 50)
.background(grey)
.cornerRadius(8)
.padding(.trailing, 50)
}
}
struct MenuChoice: View{
var body: some View{
ZStack{
ForEach(categories, id: \.self) { category in
VStack{
Spacer()
.frame(width: 100, height: 100)
.background(Color(red: 50, green: 207, blue: 255))
.cornerRadius(5)
.shadow(color: .init(.sRGB, white: 0.7, opacity: 1), radius: 4, x: 0.0, y: 2)
.padding(.bottom)
.overlay(
VStack(spacing: 8) {
Image(systemName: category.imageName)
.padding(.top, -10)
.font(.system(size: 30))
Text(category.name)
.foregroundColor(.black)
.font(.system(size: 20))
.padding(.top, 5)
}
)
}
}
}
}
}
struct Recomend: View{
var body: some View{
Button {
print("Image tapped!")
} label: {
ZStack{
RoundedRectangle(cornerRadius: 8)
.frame(width: 250, height: 50)
.foregroundColor(grey)
Text("See All Recomended Recipes")
.foregroundColor(Color.black)
}
}
}
}
struct SearchView_Previews: PreviewProvider {
static var previews: some View {
SearchView()
.previewDevice(PreviewDevice(rawValue: "iPhone 13"))
SearchView()
.previewDevice(PreviewDevice(rawValue: "iPhone 8"))
}
}
On the iPhone 13 it looks good but on the iPhone 8 it looks squashed and not good.
How can i make my code responsive for different screen heights/widths?
Following the comments you could go in this direction:
This adapts nicely and also is a lot less code.
struct ContentView: View {
var body: some View {
VStack{
Text("Search For Recipes")
.font(.system(size: 35))
.frame(maxWidth: .infinity, alignment: .leading)
SearchBox()
.padding(.bottom)
.padding(.bottom)
Recomend()
Spacer()
LazyVGrid(columns: columns, spacing: 18){
ForEach(categories) { category in
MenuChoice(category: category)
}
}
Spacer()
}
.padding()
}
}
struct SearchBox: View {
var body: some View{
VStack {
HStack{
Image(systemName: "magnifyingglass")
Text("Search for recipes")
}
}
.frame(maxWidth: .infinity, alignment: .leading)
.padding()
.background(grey)
.cornerRadius(8)
}
}
struct MenuChoice: View{
let category: Category
var body: some View{
VStack(spacing: 8) {
Image(systemName: category.imageName)
.padding(.top)
.font(.system(size: 30))
Text(category.name)
.foregroundColor(.black)
.font(.system(size: 20))
.padding(.bottom)
}
.frame(width: 100, height: 100)
.background(Color(red: 50, green: 207, blue: 255))
.cornerRadius(5)
.shadow(color: .init(.sRGB, white: 0.7, opacity: 1), radius: 4, x: 0.0, y: 2)
}
}
struct Recomend: View{
var body: some View{
Button {
print("Image tapped!")
} label: {
Text("See All Recomended Recipes")
.padding()
.foregroundColor(Color.black)
.frame(maxWidth: .infinity, alignment: .leading)
.background(grey)
.cornerRadius(8)
}
}
}

UINavigation Breaks on landscape mode in SwiftUI

Good afternoon community,
I have a problem with my app, I am trying to make it look good in both situations, so when I change orientation my app returns to the main screen, it does not stay on the second screen, will someone have a solution to this problem?
I don't know if my view breaks or cannot cover the space that I have determined, I leave my code below.
import SwiftUI
struct LoginView: View {
#Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
init() {
UINavigationBar.appearance().setBackgroundImage(UIImage(), for: UIBarMetrics.default)
UINavigationBar.appearance().shadowImage = UIImage()
UINavigationBar.appearance().isTranslucent = true
UINavigationBar.appearance().tintColor = .clear
UINavigationBar.appearance().backgroundColor = .clear
}
var backButton : some View {
Button(action: {
self.presentationMode.wrappedValue.dismiss()
}) {
HStack {
Image("Backarrow")
.aspectRatio(contentMode: .fit)
.foregroundColor(.white)
Text(" Back")
.foregroundColor(.yellow)
}
}
}
var topImage:some View{
Image("header2")
.resizable()
.overlay( ImageOverlay() , alignment: .center)
.background(Color.black)
}
var usernameTextField:some View{
HStack{
TextField("", text: $LoginViewM.username)
.placeholder(Text("Numero de telefono,email o usuario").padding().foregroundColor(.white), show: LoginViewM.password.isEmpty)
.background(Color.black)
Image("menuCloseSmall")
.padding(.init(top: 0, leading: 0, bottom: 0, trailing: 14))
}
.lineLimit(1)
.foregroundColor(.white)
.minimumScaleFactor(0.5)
.font(.custom("Montserrat-Regular", fixedSize: 16.4))
.overlay(RoundedRectangle(cornerRadius: 4).stroke(Color.gray, lineWidth: 3))
.clipShape(RoundedRectangle(cornerRadius: 4))
}
var errorUsernameLabel:some View{
VStack{
Text(" Hey you, no user found. Make sure you’ve provided the ")
.lineLimit(1)
Text("correct information.")
}
.multilineTextAlignment(.leading)
.foregroundColor(.redBlueParrot)
.minimumScaleFactor(0.5)
.font(.custom("Montserrat-Regular", size: 12.1))
}
var passwordTextField:some View{
HStack{
TextField("Contraseña", text: $LoginViewM.password)
.font(.custom("Montserrat-Regular", fixedSize: 16.4))
.padding(.bottom)
.foregroundColor(.white)
.placeholder(Text("Contraseña").padding().foregroundColor(.white), show: LoginViewM.username.isEmpty)
.lineLimit(1)
.minimumScaleFactor(0.5)
.background(Color.black)
Image("editShow")
.padding(.init(top: 0, leading: 0, bottom: 0, trailing: 14))
}
.overlay(RoundedRectangle(cornerRadius: 4).stroke(Color.gray, lineWidth: 3))
.clipShape(RoundedRectangle(cornerRadius: 4))
}
var errorPasswordLabel:some View{
VStack{
Text(" Incorrect password for \(LoginViewM.password). Please try again.")
}
.lineLimit(1)
.minimumScaleFactor(0.5)
.foregroundColor(.redBlueParrot)
.font(.custom("Montserrat-Regular", size: 12.1))
}
var buttonLogin:some View{
NavigationLink(
destination: Text("Hola"),
label: {
Text("Iniciar sesion")
}) .font(.custom("Montserrat-Medium", size: 16))
.foregroundColor(Color.ligthGray)
.frame(minWidth: 0, idealWidth: 174, maxWidth: 174, minHeight: 0, idealHeight: 48, maxHeight: 48, alignment: .center)
.overlay(RoundedRectangle(cornerRadius: 18)
.stroke(Color.gray, lineWidth: 1.5))
}
var textInBottom:some View{
HStack(spacing:5){
Text("Olvidaste tu")
.foregroundColor(.white)
.font(.custom("Montserrat-Regular", size: 16))
Button("contraseña"){
}
.foregroundColor(.yellow)
.font(.custom("Montserrat-Regular", size: 16))
Text("o")
.foregroundColor(.white)
.font(.custom("Montserrat-Regular", size: 16))
Button("usuario"){
}
.foregroundColor(.yellow)
.font(.custom("Montserrat-Regular", size: 16))
}
}
#ObservedObject var LoginViewM = LoginViewModel()
var body: some View {
GeometryReader{ geometry in
NavigationView{
VStack(spacing:2){
topImage
.frame(width: geometry.size.width, height: geometry.size.height * 0.39)
VStack(spacing:17){
usernameTextField
.frame(width: geometry.size.width*0.90, height: geometry.size.height*0.05)
errorUsernameLabel
.frame(width: geometry.size.width*0.90,height: geometry.size.height*0.06, alignment: .center)
passwordTextField
.frame(width: geometry.size.width*0.90, height: geometry.size.height*0.05)
errorPasswordLabel
.frame(height: geometry.size.height*0.06, alignment: .center)
}.frame( height: geometry.size.height * 0.40)
VStack{
buttonLogin
}.frame(height: geometry.size.height * 0.10, alignment: .center)
Spacer()
textInBottom
.frame(height: geometry.size.height * 0.05, alignment: .center)
Spacer()
}
.ignoresSafeArea(.all)
.background(Color.black)
}
.navigationBarItems(leading: backButton)
.navigationBarBackButtonHidden(true)
.background(Color.black)
.navigationViewStyle(StackNavigationViewStyle())
}
}
}
struct LoginView_Previews: PreviewProvider {
static var previews: some View {
LoginView()
}
}

Textfield in SwiftUI doesn't work, I can't type in it anymore

I have made a login view in SwiftUI and it worked at first but now that I have styled the view, my textfields don't work anymore. I can't type anything in the Textfields. Is this a Xcode bug or have I made a mistake. This is the code:
ZStack{
Color.red.ignoresSafeArea()
VStack {
Image("login")
.resizable()
.frame(width: 150, height: 150)
.shadow(radius: 5)
.padding(.top, 20)
.offset(y: -50)
Spacer()
}
VStack {
Spacer()
VStack {
HStack {
Image(systemName: "mail")
TextField("Email", text: $email)
}
.padding()
.background(Color.gray.opacity(0.1))
.cornerRadius(10)
.padding(.horizontal)
.padding(.top, 30)
HStack {
Image(systemName: "lock.rectangle")
SecureField("Password", text: $password)
}
.padding()
.background(Color.gray.opacity(0.1))
.cornerRadius(10)
.padding(.horizontal)
.zIndex(1)
Button(action: {login()}) {
Text("Sign in")
.padding()
.foregroundColor(.white)
.frame(width: UIScreen.main.bounds.width - 100, height: 50)
.background(Color.red)
.cornerRadius(10)
.padding(.horizontal)
.padding(.top)
}.buttonStyle(PlainButtonStyle())
NavigationLink(destination: Register()) {
Text("No account? Sign up!")
.padding()
.foregroundColor(.black)
.cornerRadius(35)
.padding(.horizontal)
}.buttonStyle(PlainButtonStyle())
Spacer()
}
.frame(height: UIScreen.main.bounds.height * 0.6)
.background(RoundedCorners(color: .white, tl: 30, tr: 30, bl: 0, br: 0))
.ignoresSafeArea()
.offset(y: 35)
}.shadow(radius: 15)
}
The login button and register text do work so I don't think that there is an invisible object above the textfields.
This is my design
First, you are using three views insid the ZStack. In other words you are laying three layers over the others. You should use 2 views inside the Zstack.
Second, use the clipped() modifier before shadow().
ZStack{
Color.red
VStack {
Spacer()
Image(systemName: "plus")
.resizable()
.frame(width: 150, height: 150)
.shadow(radius: 5)
.padding(.top, 20)
.offset(y: -50)
VStack {
HStack {
Image(systemName: "mail")
TextField("Email", text: $email)
}
.padding()
.background(Color.gray.opacity(0.1))
.cornerRadius(10)
.padding(.horizontal)
.padding(.top, 30)
HStack {
Image(systemName: "lock.rectangle")
SecureField("Password", text: $password)
}
.padding()
.background(Color.gray.opacity(0.1))
.cornerRadius(10)
.padding(.horizontal)
Button(action: {}) {
Text("Sign in")
.padding()
.foregroundColor(.white)
.frame(width: UIScreen.main.bounds.width - 100, height: 50)
.background(Color.red)
.cornerRadius(10)
.padding(.horizontal)
.padding(.top)
}.buttonStyle(PlainButtonStyle())
NavigationLink(destination: Text("hello")) {
Text("No account? Sign up!")
.padding()
.foregroundColor(.black)
.cornerRadius(35)
.padding(.horizontal)
}
.buttonStyle(PlainButtonStyle())
Spacer()
}
.frame(height: UIScreen.main.bounds.height * 0.6)
.background(Color.white)
.clipped()
.shadow(radius: 15, x: 0, y: 0)
}
}
.ignoresSafeArea()
However, using the ZStack is unnecessary.
VStack {
Spacer()
Image(systemName: "plus")
.resizable()
.frame(width: 150, height: 150)
.shadow(radius: 5)
.padding(.top, 20)
.offset(y: -50)
VStack {
HStack {
Image(systemName: "mail")
TextField("Email", text: $email)
}
.padding()
.background(Color.gray.opacity(0.1))
.cornerRadius(10)
.padding(.horizontal)
.padding(.top, 30)
HStack {
Image(systemName: "lock.rectangle")
SecureField("Password", text: $password)
}
.padding()
.background(Color.gray.opacity(0.1))
.cornerRadius(10)
.padding(.horizontal)
Button(action: {}) {
Text("Sign in")
.padding()
.foregroundColor(.white)
.frame(width: UIScreen.main.bounds.width - 100, height: 50)
.background(Color.red)
.cornerRadius(10)
.padding(.horizontal)
.padding(.top)
}.buttonStyle(PlainButtonStyle())
NavigationLink(destination: Text("hello")) {
Text("No account? Sign up!")
.padding()
.foregroundColor(.black)
.cornerRadius(35)
.padding(.horizontal)
}
.buttonStyle(PlainButtonStyle())
Spacer()
}
.frame(height: UIScreen.main.bounds.height * 0.6)
.background(Color.white)
.clipped()
.shadow(radius: 15, x: 0, y: 0)
}
.background(Color.red)
.ignoresSafeArea()
You should use .background(RoundedCorners(color: .white, tl: 30, tr: 30, bl: 0, br: 0)) adjust the offset of the innner Vstack.
This has happened to me before. Usually it has just been an Xcode glitch and I have to quit and restart the IDE a couple times before it actually shows up. However in Simulator it works. Hope it's resolved now though! :)

Vstack chiled Hstack elements do not distribute equally

I have two Hstack inside Vstack but Elements of Hstack are not distributed equally due to text length.
Due to Current task and Completed Task Text length my Hstack do not equally distribute. How can I achieved equally distribution?
I have to use VSTACK and Inside it HSTACK and inside it three Vstack with image and text.
Similarly I have another Hstack and inside it three VSTACK with image and text but element inside my HSTACK do not distributed due to the length of text.
VStack{
VStack{
HStack{
Spacer()
VStack{
availableFuntionView(id:0, imageName: "home_icon_new_taks")
Text("New Task's")
.foregroundColor(.white)
.font(.system(size: UIScreen.main.bounds.width * 0.04))
.minimumScaleFactor(0.5)
.lineLimit(1)
}
Spacer()
VStack{
availableFuntionView(id:1, imageName: "home_icon_current_taks")
Text("CURRENT TASK")
.foregroundColor(.white)
.font(.system(size: UIScreen.main.bounds.width * 0.04))
.minimumScaleFactor(0.5)
.lineLimit(1)
}
Spacer()
VStack{
availableFuntionView(id:2, imageName: "home_icon_completed_tasks")
Text("COMPLETED TASK")
.foregroundColor(.white)
.font(.system(size: UIScreen.main.bounds.width * 0.04))
.minimumScaleFactor(0.5)
.lineLimit(1)
}
Spacer()
}
}
VStack{
HStack{
Spacer()
VStack{
availableFuntionView(id:3, imageName: "home_icon_chat")
Text("CHAT")
.foregroundColor(.white)
.font(.system(size: UIScreen.main.bounds.width * 0.04))
.minimumScaleFactor(0.5)
.lineLimit(1)
}
Spacer()
VStack{
availableFuntionView(id:4, imageName: "home_icon_settings")
Text("SETTING")
.foregroundColor(.white)
.font(.system(size: UIScreen.main.bounds.width * 0.04))
.minimumScaleFactor(0.5)
.lineLimit(1)
}
Spacer()
VStack{
availableFuntionView(id:2, imageName: "home_icon_logout")
Text("LOGOUT")
.foregroundColor(.white)
.font(.system(size: UIScreen.main.bounds.width * 0.04))
.minimumScaleFactor(0.5)
.lineLimit(1)
}
Spacer()
}
}
Spacer().frame(minHeight: 20, maxHeight: .infinity)
}
I hope my question is clear. Please help me out. I will be very thankful.
You need to use a GeometryReader. This will give you the screen size of whatever device you are currently running on. Now, this is probably not an ideal set up as you could end up with shortened text. I am not sure how much you are trying to put on the screen at once...
GeometryReader { geometry in
VStack{
VStack{
HStack{
VStack{
availableFuntionView(id:0, imageName: "home_icon_new_taks")
Text("New Task's")
.foregroundColor(.white)
.font(.system(size: UIScreen.main.bounds.width * 0.04))
.minimumScaleFactor(0.5)
.lineLimit(1)
}
.frame(width: (geometry.size.width / 4))
VStack{
availableFuntionView(id:1, imageName: "home_icon_current_taks")
Text("CURRENT TASK")
.foregroundColor(.white)
.font(.system(size: UIScreen.main.bounds.width * 0.04))
.minimumScaleFactor(0.5)
.lineLimit(1)
}
.frame(width: (geometry.size.width / 4))
VStack{
availableFuntionView(id:2, imageName: "home_icon_completed_tasks")
Text("COMPLETED TASK")
.foregroundColor(.white)
.font(.system(size: UIScreen.main.bounds.width * 0.04))
.minimumScaleFactor(0.5)
.lineLimit(1)
}
.frame(width: (geometry.size.width / 4))
}
}
VStack{
HStack{
Spacer()
VStack{
availableFuntionView(id:3, imageName: "home_icon_chat")
Text("CHAT")
.foregroundColor(.white)
.font(.system(size: UIScreen.main.bounds.width * 0.04))
.minimumScaleFactor(0.5)
.lineLimit(1)
}
.frame(width: (geometry.size.width / 4))
VStack{
availableFuntionView(id:4, imageName: "home_icon_settings")
Text("SETTING")
.foregroundColor(.white)
.font(.system(size: UIScreen.main.bounds.width * 0.04))
.minimumScaleFactor(0.5)
.lineLimit(1)
}
.frame(width: (geometry.size.width / 4))
VStack{
availableFuntionView(id:2, imageName: "home_icon_logout")
Text("LOGOUT")
.foregroundColor(.white)
.font(.system(size: UIScreen.main.bounds.width * 0.04))
.minimumScaleFactor(0.5)
.lineLimit(1)
}
.frame(width: (geometry.size.width / 4))
}
}
Spacer().frame(minHeight: 20, maxHeight: .infinity)
}
}
}
You will have to play with the multiplier some for it to look the way you want, but this is the general idea.