CODEWITHSUNDEEP
iosswiftswiftuipaddingxcode14
Nassif
Nassif

Reputation: 1223

How to remove extra spacing of TextField / View in SwiftUI

In the code below there is no extra padding added. However in the preview or simulator, there is extra padding/spacing in TextField and also for map view. Is there any modifier to remove the extra spacing

import SwiftUI
import CoreLocation
import MapKit

struct LocationView: View {
@State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 51.507222, longitude: -0.1275), span: MKCoordinateSpan(latitudeDelta: 0.5, longitudeDelta: 0.5))

@State private var addressSearchString:String = ""

var body: some View {
    VStack {
        Text("Confirm Your Location").foregroundColor(.black).background(.blue)
        TextField("Search for area, street name...", text: $addressSearchString)
            .background(.blue.opacity(0.3))

        ZStack(alignment:.bottom) {
            Map(coordinateRegion: $region, interactionModes: [.all])
            Button(action: {}) {
                HStack {
                    Text("Locate Me")
                }
            }
            .foregroundColor(.green)
            .background(.white)
        }
        Text("Test 1")
            .background(.blue)
        Text("Test 2")
            .background(.green)
        Text("Test 3")
            .background(.blue)
        Text("Test 4")
            .background(.green)
        Text("Test 5")
            .background(.blue)

    }.background(.gray)

 }
}

enter image description here

Upvotes: 0

Views: 181

Answers (1)

mahan
mahan

Reputation: 15015

Remove the distance between adjacent subviews.

  VStack(spacing: 0) { /* NEW */
    Text("Confirm Your Location").foregroundColor(.black).background(.blue)
    TextField("Search for area, street name...", text: $addressSearchString)
        .background(.blue.opacity(0.3))

    ZStack(alignment:.bottom) {
        Map(coordinateRegion: $region, interactionModes: [.all])
        Button(action: {}) {
            HStack {
                Text("Locate Me")
            }
        }
        .foregroundColor(.green)
        .background(.white)
    }
    Text("Test 1")
        .background(.blue)
    Text("Test 2")
        .background(.green)
    Text("Test 3")
        .background(.blue)
    Text("Test 4")
        .background(.green)
    Text("Test 5")
        .background(.blue)

}.background(.gray)

Upvotes: 1

Related Questions