TextEditor positioning in SwiftUI

user_13892094 0
Viewed 616

I added a text editor but couldn't center its position, The text editor has shifted to the right as shown in the picture. Sorry, I just noticed that the whole page has shifted to the right. I don't know what I'm doing wrong. You can fix this. I want it to stand in the middle.

enter image description here

struct TextSend: View {
    
    @State private var inputText = ""
    
    var body: some View {
        GeometryReader { geometry in
            VStack {
                HStack {
                    Text("Picture")
                        .font(.system(size: 60))
                        .frame(width: geometry.size.width, height: geometry.size.height / 10)
                        .foregroundColor(.init(red: 45 / 255, green: 0 / 255, blue: 112 / 255))
                    Spacer().frame(height: geometry.size.height / 5)
                }

                VStack {
                    Text("Hi").frame(width: geometry.size.width, height: geometry.size.height / 10)
                }
                
                
                HStack {
                    ForEach(0 ..< 3) { _ in
                        CircleView()
                            .frame(width: geometry.size.width / 5, height: geometry.size.height / 10)
                            .shadow(radius: 10)
                    }
                }
                VStack {
                    
                TextEditor(text: $inputText) .frame(width: geometry.size.width, height:geometry.size.height / 3) .overlay(RoundedRectangle(cornerRadius: 30).stroke(Color.init( red: 45/255, green: 0/255, blue: 112/255), lineWidth: 1)).lineSpacing(10)
                    .autocapitalization(.words)
                    .disableAutocorrection(true)
                    .padding()
                }
                Spacer().frame(height: geometry.size.height / 15)
                VStack {
                    Button(action: {}, label: {
                        Text("Gönder")
                            .frame(width: geometry.size.width / 3, height: 50)
                            .padding(10)
                            .font(Font.system(size: 30, weight: .medium, design: .serif))
                            .foregroundColor(.white)
                            .background(RoundedRectangle(cornerRadius: 30))
                            .foregroundColor(.init(red: 45 / 255, green: 0 / 255, blue: 112 / 255))

                    })
                }
            }
        }
    }
}
swiftui swift text-editor ios
2 Answers

Remove frame(width: geometry.size.width from everywhere used, as such hardcoding breaks layout. Try to use geometry always only for calculable values.

Here is fixed parts (tested with Xcode 12.1 / iOS 14.1)

demo

    HStack {
        Text("Picture")
            .font(.system(size: 60))
            .frame(height: geometry.size.height / 10)    // << !!
            .foregroundColor(.init(red: 45 / 255, green: 0 / 255, blue: 112 / 255))
        Spacer().frame(height: geometry.size.height / 5)
    }

    VStack {
        Text("Hi").frame(height: geometry.size.height / 10)   // << !!
    }
    
    
    // ... other code

    VStack {
        
    TextEditor(text: $inputText)
       .frame(height:geometry.size.height / 3)      // << !!
       .overlay(RoundedRectangle(cornerRadius: 30).stroke(Color.init( red: 45/255, green: 0/255, blue: 112/255), lineWidth: 1)).lineSpacing(10)
        .autocapitalization(.words)
        .disableAutocorrection(true)
        .padding()
    }
user_122990300

You need to add frame to your first child inside the GeometryReader which is VStack in your case

VStack{
}.frame(width:geometry.size.width , height: geometry.size.height)

ps : you can make it : geometry.size.width - 10 for example , for padding purpose

user_60419520
Related