在 watchOS 上使用 SwiftUI，如何将视图与导航标题对齐？

Question

我想将一些内容与导航标题使用的相同插图对齐。

在较旧的手表设备上，没有插图，但在带有圆角的较新设备上，标题是插图，对于某些事情我想对齐到相同的插图。

apple docs 讲了这个margin，但是我不知道怎么用

如何修改此示例以使文本和按钮的左边缘与导航标题对齐？

    var body: some View {
        VStack(alignment: .leading) {
            Text("Hello World")
            Button("Test") {}
        }
        .navigationTitle("Title")
    }

Answer 1

前导填充很简单（在 VStack 上）：

        .padding(.leading, 9.5)

但是你必须根据手表型号来做。以下是如何确定手表型号的示例：

您可能希望将它放在条件视图修饰符中：

Answer 2

您可以使用当前屏幕宽度：

 var screenWidth = WKInterfaceDevice.current().screenBounds.width

并将其（减去所需的边距）作为帧宽度应用于您的 VStack：

 VStack(alignment: .leading){
    
     Text("Hello World")
     Button("Test") {}
 }
 .frame(width: screenWidth - 25)
 .navigationTitle("Title")

这在 45mm 和 40mm 上运行良好，但不幸的是在 38mm 手表上仍然不尽如人意，因此您可能希望为较小的设备明确设置不同的 paddings/frames。

Answer 3

使用.scenePadding(.horizontal)。这将自动在较大的手表上应用您想要的填充。文档：https://developer.apple.com/documentation/swiftui/menu/scenepadding(_:)

在 watchOS 上使用 SwiftUI，如何将视图与导航标题对齐？

Using SwiftUI on watchOS, how to align views to the navigation title?

swift

swiftui

watchos