如何消除SwiftUI中图片与黑色矩形间的白色间隙？

问题描述 #

图片与下方黑色矩形之间存在无法消除的白色间隙，尝试调整代码和搜索解决方案均无效，需要解决该问题。

原始代码 #

struct Home: View {
    var body: some View {
        ScrollView {
            ZStack {
                Image("Home-Slider1_Hitachi")
                    .resizable()
                    .scaledToFill()
                VStack(alignment: .leading) {
                    VStack(alignment: .leading) {
                        Text("text")
                            .font(.title3)
                            .foregroundColor(Color.white)
                            .multilineTextAlignment(.leading)
                            .padding(.leading)
                            .padding(.top)
                        Text("text")
                            .font(.title)
                            .foregroundColor(Color.white)
                            .multilineTextAlignment(.leading)
                            .padding(.leading)
                            .padding(.bottom)
                    }
                    .background(.opacity(0.3))
                    .cornerRadius(15)
                    
                    
                }
            }
            
            VStack(alignment: .leading) {
                ZStack {
                    Rectangle()
                        .frame(height: 75)
                    Text("text")
                        .foregroundColor(.white)
                        .tracking(5)
                }
                VStack(alignment: .leading) {
                    Text("text")
                        .font(.headline)
                        .padding([.top, .leading, .trailing])
                        .padding(.bottom, 1.0)
                    Text("text")
                        .font(.body)
                        .padding(.horizontal)
                        .foregroundColor(Color.primary)
                    Divider()
                    Text("text")
                        .font(.subheadline)
                        .fontWeight(.bold)
                        .padding([.top, .leading, .trailing])
                        .padding(.bottom, 1.0)
                    Text("text")
                        .font(.callout)
                        .padding(.horizontal)
                    Divider()
                }
            }
        }.edgesIgnoringSafeArea(.top)
    }
}

struct Home_Previews: PreviewProvider {
    static var previews: some View {
        Home()
    }
}

解决方案 #

问题根源在于ScrollView内组件间的默认垂直间距，以及图片未裁剪导致的视觉空白。通过以下修改可彻底消除间隙：

• 用VStack(spacing: 0)包裹ScrollView内的所有组件，消除元素间默认间距
• 给图片添加.clipped()，裁剪超出容器的部分，避免空白
• 给图片所在的ZStack指定固定高度，确保图片区域尺寸稳定

修改后的代码 #

struct Home: View {
    var body: some View {
        ScrollView {
            VStack(spacing: 0) {
                ZStack {
                    Image("Home-Slider1_Hitachi")
                        .resizable()
                        .scaledToFill()
                        .clipped()
                        .frame(height: 250) // 可根据需求调整高度
                    VStack(alignment: .leading) {
                        VStack(alignment: .leading) {
                            Text("text")
                                .font(.title3)
                                .foregroundColor(Color.white)
                                .multilineTextAlignment(.leading)
                                .padding(.leading)
                                .padding(.top)
                            Text("text")
                                .font(.title)
                                .foregroundColor(Color.white)
                                .multilineTextAlignment(.leading)
                                .padding(.leading)
                                .padding(.bottom)
                        }
                        .background(.opacity(0.3))
                        .cornerRadius(15)
                    }
                }
                
                VStack(alignment: .leading) {
                    ZStack {
                        Rectangle()
                            .frame(height: 75)
                        Text("text")
                            .foregroundColor(.white)
                            .tracking(5)
                    }
                    VStack(alignment: .leading) {
                        Text("text")
                            .font(.headline)
                            .padding([.top, .leading, .trailing])
                            .padding(.bottom, 1.0)
                        Text("text")
                            .font(.body)
                            .padding(.horizontal)
                            .foregroundColor(Color.primary)
                        Divider()
                        Text("text")
                            .font(.subheadline)
                            .fontWeight(.bold)
                            .padding([.top, .leading, .trailing])
                            .padding(.bottom, 1.0)
                        Text("text")
                            .font(.callout)
                            .padding(.horizontal)
                        Divider()
                    }
                }
            }
        }.edgesIgnoringSafeArea(.top)
    }
}

struct Home_Previews: PreviewProvider {
    static var previews: some View {
        Home()
    }
}

关键修改说明 #

• VStack(spacing: 0)：彻底移除ScrollView内两个模块之间的默认垂直间距，这是间隙的核心来源
• .clipped()：解决scaledToFill后图片超出容器范围带来的视觉空白问题，确保图片完全适配容器
• 固定图片区域高度：避免因图片自身尺寸差异导致容器高度不稳定，进一步消除间隙可能性

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