如何移除SwiftUI中TextField与View的额外间距？

问题描述 #

以下代码未手动添加额外padding，但预览/模拟器中TextField及Map View仍存在额外间距，询问是否有修饰符可移除这些间距：

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)

 }
}

解决方法 #

1. 移除TextField的默认间距 #

SwiftUI的TextField自带默认内边距和外部布局间距，可通过以下操作清除：

• 用.textFieldStyle(.plain)取消默认样式，消除自带内边距
• 添加.padding(0)确保无额外内边距
• 若VStack元素间默认间距导致TextField上下留白，给VStack设置.spacing(0)

修改后的TextField代码：

TextField("Search for area, street name...", text: $addressSearchString)
    .textFieldStyle(.plain)
    .padding(0)
    .background(.blue.opacity(0.3))

2. 移除Map View的额外间距 #

Map组件默认存在布局间距，需让它占满可用空间并消除默认留白：

• 添加.frame(maxWidth: .infinity, maxHeight: .infinity)，让Map填充父容器可用空间
• 若安全区导致边缘留白，可添加.edgesIgnoringSafeArea(.all)（根据界面需求选择是否启用）

修改后的ZStack代码：

ZStack(alignment:.bottom) {
    Map(coordinateRegion: $region, interactionModes: [.all])
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .edgesIgnoringSafeArea(.all) // 可选，按需启用
    Button(action: {}) {
        HStack {
            Text("Locate Me")
        }
    }
    .foregroundColor(.green)
    .background(.white)
}

3. 全局消除VStack默认间距 #

给外层VStack添加.spacing(0)，彻底清除所有元素间的默认间距：

VStack {
    // 内部元素
}
.spacing(0)
.background(.gray)

最终完整代码 #

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)
            .textFieldStyle(.plain)
            .padding(0)
            .background(.blue.opacity(0.3))

        ZStack(alignment:.bottom) {
            Map(coordinateRegion: $region, interactionModes: [.all])
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .edgesIgnoringSafeArea(.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)

    }
    .spacing(0)
    .background(.gray)

 }
}

内容的提问来源于stack exchange，提问作者Nassif