Question

我在 macOS 11.2.2 上使用 Xcode 12.4 和 Swift 5.4
我想控制两个 Text 视图之间的空间。自然会想到 padding。这是代码

VStack(alignment: .leading) {
    Text("Exploring San Francisco")
        .font(.appTitle1)
        .fontWeight(.bold)
        .padding(.bottom, 0)
    Text("May 1, 2021 - May 5, 2021")
        .font(.appSmallBody)
        .fontWeight(.bold)
        .textCase(.uppercase)
        .foregroundColor(.init(hex: "666666"))
}

请注意，我明确地写了底部填充为 0px。结果如下：

现在如果我想要它们之间有 1px 的填充，填充会变得太大。这是底部填充 1 px 的结果：

您可能已经知道，它们之间的距离绝对不是 1px，而是更像是 10px。

但是，如果我将内边距增加到 2px，您几乎看不到 1px 和 2px 之间的区别：

为什么填充距离不一致？

我发现的唯一解决方法是删除 padding 并使用 VStack 的 spacing 参数：

VStack(alignment: .leading, spacing: 1) {
    Text("Exploring San Francisco")
        .font(.appTitle1)
        .fontWeight(.bold)
    Text("May 1, 2021 - May 5, 2021")
        .font(.appSmallBody)
        .fontWeight(.bold)
        .textCase(.uppercase)
        .foregroundColor(.init(hex: "666666"))
}

但是当堆栈中有多个视图并且我想自定义每对视图之间的距离时，这并不理想。

这是一个 SwiftUI 错误吗？这个问题有更优雅的解决方法吗？谢谢！

Answer 1

您可以尝试执行以下操作：基本上在 vstack 上声明间距：0，然后更改填充，它会按照您想要的方式运行。

    VStack(alignment: .leading, spacing: 0) {
        Text("Exploring San Francisco")
            .font(.title)
            .fontWeight(.bold)
            .lineLimit(1)

        Text("May 1, 2021 - May 5, 2021")
            .font(.subheadline)
            .fontWeight(.bold)
            .textCase(.uppercase)
            .foregroundColor(Color.gray)
            .padding(.top, 1)
    }

更改示例中的最后一行，您可以看到与

的区别

.padding(.top, 0)

.padding(.top, 1)

.padding(.top, 5)

SwiftUI 填充距离不一致

1 个答案: