SwiftUI，屏幕旋转打破了工具栏布局

Question

在 SwiftUI 中，我有一个带有文本的简单自定义工具栏：

import SwiftUI

struct ContentView: View {

    var body: some View {
        NavigationStack {
            VStack {
                Text("Hi")
            }
            .toolbar {
                ToolbarItem(placement: .principal) {
                    HStack {
                        Text("My Toolbar")
                            .border(.red)
                        Spacer()
                    }
                }

            }
        }
    }
}

当我纵向运行时，工具栏中的文本显示正确。当我旋转到横向时，文本视图会移位：

工具栏正确呈现	工具栏中的文本已移位

但是，当我横向运行应用程序时，UI 在两个方向上都能正确呈现。

如何避免从纵向旋转到横向时，自定义工具栏（不仅仅是单个字符串）破坏布局？

Answer 1

如果您希望工具栏项位于左侧，最简单的解决方法是使用放置

.topBarLeading

而不是

.principal

。那么您也不需要

Spacer

，也不需要

HStack

：

ToolbarItem(placement: .principal) {
    Text("My Toolbar")
        .border(.red)
}

但是，我希望您会说，啊，是的，但我的自定义工具栏项目比文本标签更复杂，所以这个简单的解决方法不起作用。

在这种情况下，当方向改变时，您将需要强制重建。 设备旋转上的 SwiftUI 重绘视图组件的答案描述了执行此操作的各种方法。

我发现将内容包装在

GeometryReader

中也是一种非常可靠的技术。它也适用于 iPad 分屏，但并非其他帖子的所有答案都可以。你只需要在某个地方使用

GeometryProxy

。

→ 例如，您可以取出

Spacer

并使用代理中的大小设置

maxWidth

：

GeometryReader { proxy in
    NavigationStack {
        VStack {
            Text("Hi")
        }
        .toolbar {
            ToolbarItem(placement: .topBarLeading) {
                Text("My Toolbar")
                    .border(.red)
                    .frame(maxWidth: proxy.size.width, alignment: .leading)
            }

        }
    }
}