为什么视图比屏幕更宽？

Question

编辑：替换您选择的“系统名称：”。 “pencil.circle”工作正常。 “编辑”不是有效的 SF 符号。

（我已经简化了我的代码，以便您可以剪切和粘贴。这就是为什么您会看到 .frame、可调整大小等。更简单的代码可能是您的第一直觉。）

我创建了一个视图，它是行项目的垂直列表（表格视图）。 每个行项目都有一个水平视图，其中包含两个图像。 图片占用太多空间，无法正确显示在屏幕上：

import SwiftUI

    @main
    struct StackOverflowDemoApp: App {
    
        var body: some Scene {
            WindowGroup {
                TandemView()
            }
        }
    }
    
    struct PaddedImageView: View {
        let color: Color = .red
    
        var body: some View {
            ZStack {
                color
                Image(systemName: "edit")
                    .resizable()
                    .padding()
            }
            Spacer()
        }
    }
    
    struct TandemView: View {
        var body: some View {
            HStack {
                Spacer()
                Image(systemName: "pencil")
                    .resizable()
                    .background(Color.orange)
                    .frame(height: 80)
                    .aspectRatio(1, contentMode: .fill)
                PaddedImageView()
                    .frame(width: 200, height: 80)
            }
            .padding()
            .fixedSize()
    
        }
    }

    struct TandemView_Previews: PreviewProvider {
        static var previews: some View {
            TandemView()
        }
    }

以上是我能达到的最接近所需布局的内容（它只需要水平放置）。我用 GeometryReader 进行了试验，但没有产生预期的结果。

以下是我尝试过的一些事情：

1. 提供的代码
2. NoConstraintsOnPencilOrHStack
3. NoConstraintsOnTandemView
4. NoConstraintsOnImageInPaddedViewButWithFrameConstraint

我正在尝试获取一个包含两个适合屏幕宽度的图像（我的实际源由 UIImage 对象组成）的行视图。

编辑： 在接受 cedricbahirwe 的即时响应后，我能够进一步简化代码。新结果：

我在顶层添加了

 TandemView()
      .padding(.horizontal)

我删除了：

 //       Spacer()

在 PaddedImageView 的末尾

更新了 TandemView -- 更改了两个框架并删除了 3 行：

struct TandemView: View {
    var body: some View {
        HStack {
            Spacer()
            Image(systemName: "pencil")
                .resizable()
                .background(Color.orange)
                .frame(width: 80, height: 80)
//                .aspectRatio(1, contentMode: .fill)
            PaddedImageView()
                .frame(height: 80)
        }
//        .padding()
//        .fixedSize()

    }
}

Answer 1

这是因为PaddedImageView View 的布局，您实际上可以删除Spacer，因为那里不需要它。

所以改变

struct PaddedImageView: View {
    let color: Color = .red
    
    var body: some View {
        ZStack {
            color
            Image(systemName: "edit")
                .resizable()
                .padding()
        }
        Spacer()
    }
}

到

struct PaddedImageView: View {
    let color: Color = .red
    
    var body: some View {
        ZStack {
            color
            Image(systemName: "edit")
                .resizable()
                .padding()
        }
    }
}

注意： SwiftUI Engine 从 body 属性的实现中推断出视图的布局。建议在 body 属性中设置一个 Parent View。