0

The page I created is shifting to the left. I am getting a purple color error in the frame settings. "Invalid frame size (not negative or finite)." How can I fix? I'm learning Swiftui new I don't know what I did wrong. enter image description here

enter image description here

 ZStack { GeometryReader{ geometry in Color.black.edgesIgnoringSafeArea(.all) VStack { Text("Picture").font(.system(size: 60)).foregroundColor(.init(red: 45/255, green: 0/255, blue: 112/255)) TextField("Adınız", text: $Name.text) .foregroundColor(.white) .padding([.leading, .trailing], 20) .font(Font.system(size: 30, design: .default)) .multilineTextAlignment(.center) .accentColor(Color.white) .frame(width: geometry.size.width - 100, height:50 , alignment: .center) .padding(5) .font(Font.system(size: 15, weight: .medium, design: .serif)) .overlay(RoundedRectangle(cornerRadius: 30).stroke(Color(#colorLiteral(red: 0.5411764706, green: 0.4549019608, blue: 0.2823529412, alpha: 1)), lineWidth: 1)) TextField("Soyadınız", text: $profilSurname) .textFieldStyle(PlainTextFieldStyle()) .padding([.leading, .trailing], 20) .font(Font.system(size: 30, design: .default)) .multilineTextAlignment(.center) .accentColor(Color.white) .foregroundColor(.white) .frame(width: geometry.size.width / 100, height:50 , alignment:.center) .padding(5) .font(Font.system(size: 15, weight: .medium, design: .serif)) .overlay(RoundedRectangle(cornerRadius: 30).stroke(Color(#colorLiteral(red: 0.5411764706, green: 0.4549019608, blue: 0.2823529412, alpha: 1)), lineWidth: 1)) Text(iliski)//-------------->this .frame(height: 50) .foregroundColor(.white) .font(Font.system(size: 25, design: .default)) .padding(5) .overlay( RoundedRectangle(cornerRadius: 30) .stroke(Color(#colorLiteral(red: 0.5411764706, green: 0.4549019608, blue: 0.2823529412, alpha: 1)), lineWidth:1)).padding(.horizontal, 50) } } }
Improve this question
2
  • Could you prepare standalone reproducible example and screenshot to demo what's wrong? Commented Jan 4, 2021 at 11:27
  • I added a screenshot @Asperi Commented Jan 4, 2021 at 11:33

1 Answer 1

Reset to default
1

So your problem with the first TextField is that you said geo.size.width - 100 which would have worked had it not been for the ZStack which gave you that undesired shift.

For the second TextField you had geo.size.width / 100 which ultimately rendered you with 0 width. You'll find the corrections in code listed below.

For the color, the issue is just your contrast. Instead of using the .init for your colors just go with something concrete like .white or .blue to get you in the ballpark of what you want. Then you should be able to hone in on your desired color from there.

** You'll need to uncomment the comment marks to get your background color back **

Also I adjusted your binding for the textfield, I don't know why you had .text after it.

 import SwiftUI struct ContentView: View { @State private var name = "" @State private var profilSurname = "" var body: some View { GeometryReader{ geometry in //Color.black.edgesIgnoringSafeArea(.all) VStack { Text("Picture").font(.system(size: 60)).foregroundColor(.init(red: 45/255, green: 0/255, blue: 112/255)) TextField("Adınız", text: $name) .foregroundColor(.white) .font(Font.system(size: 30, design: .default)) .multilineTextAlignment(.center) .accentColor(Color.white) .font(Font.system(size: 15, weight: .medium, design: .serif)) .overlay(RoundedRectangle(cornerRadius: 30) .stroke(Color(#colorLiteral(red: 0.5411764706, green: 0.4549019608, blue: 0.2823529412, alpha: 1)), lineWidth: 1)).padding(.horizontal, 50) TextField("Soyadınız", text: $profilSurname) .textFieldStyle(PlainTextFieldStyle()) .font(Font.system(size: 30, design: .default)) .multilineTextAlignment(.center) .accentColor(Color.white) .foregroundColor(.white) .font(Font.system(size: 15, weight: .medium, design: .serif)) .overlay(RoundedRectangle(cornerRadius: 30).stroke(Color(#colorLiteral(red: 0.5411764706, green: 0.4549019608, blue: 0.2823529412, alpha: 1)), lineWidth: 1)).padding(.horizontal, 50) } } } } struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } }

** ANSWER TO YOUR MOST RECENT QUESTION **

TextField("Placeholder", text: $third)//-------------->this .foregroundColor(.white) .font(Font.system(size: 25, design: .default)) .multilineTextAlignment(.center) .padding(5) .overlay( RoundedRectangle(cornerRadius: 30) .stroke(Color(#colorLiteral(red: 0.5411764706, green: 0.4549019608, blue: 0.2823529412, alpha: 1)), lineWidth:1)).padding(.horizontal, 50)
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

I added your picture, I want a space next to it, as if the sides are sticking out, I don't understand. I want equal space on the left and right. @Sergio Bost
@metaflor22 Then what you need to do is add .padding() directly after the .overlay modifier, I will edit my answer so you can see
"Text("iliski")" I added a text below it. Can you fix this too? I tried to do it but it gets bigger and smaller with the text inside. @Sergio Bost
Just posted the code, in order for that to work you'll need to add a @State private var third = ""
no, you misunderstood me. I don't want to use textfield. I want to use it as text but the stroke appearance will be the same. @Sergio Bost
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.