在 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 在两个方向上都能正确呈现。
如何避免从纵向旋转到横向时,自定义工具栏(不仅仅是单个字符串)破坏布局?
如果您希望工具栏项位于左侧,最简单的解决方法是使用放置
.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)
}
}
}
}