如何在 SwiftUI 中相对于下一行中的图像将第二行中的文本居中?
How to center a text in the second row with respect to an image in the row below in SwiftUI?
在下面的屏幕截图中,紫色图像未与地球符号水平对齐。我正在尝试将导航标题相对于其上方的徽标居中,我完全可以使用 VStack 做到这一点。但是我不知道如何将徽标本身与导航尾随项(屏幕截图中的地球仪)对齐。有小费吗?想法?教程?谢谢!
struct ContentView: View {
var body: some View {
NavigationView {
Text("Hello")
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
Button {} label: {Image(systemName: "globe")}
}
ToolbarItemGroup(placement: .principal) {
VStack {
Image("image")
.resizable()
.frame(width: 64.0, height: 24.0)
Text("Navigation Title")
}
}
}
}
.navigationBarTitleDisplayMode(.inline)
}
}
只需对前导工具栏项目执行相同操作(因为项目是独立的,并且一个对齐方式不会影响其他 - 仅影响栏的大小)
测试 Xcode 13.4 / iOS 15.5
*边框是为了更好的可见性
Text("Hello")
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
VStack(alignment: .leading) {
Button {} label: {Image(systemName: "globe")}
.frame(height: 24.0)
Text("X").foregroundColor(.clear)
}.border(.red)
}
ToolbarItemGroup(placement: .principal) {
VStack {
Image("picture")
.resizable()
.frame(width: 64.0, height: 24.0)
Text("Navigation Title")
}.border(.green)
}
}
在下面的屏幕截图中,紫色图像未与地球符号水平对齐。我正在尝试将导航标题相对于其上方的徽标居中,我完全可以使用 VStack 做到这一点。但是我不知道如何将徽标本身与导航尾随项(屏幕截图中的地球仪)对齐。有小费吗?想法?教程?谢谢!
struct ContentView: View {
var body: some View {
NavigationView {
Text("Hello")
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
Button {} label: {Image(systemName: "globe")}
}
ToolbarItemGroup(placement: .principal) {
VStack {
Image("image")
.resizable()
.frame(width: 64.0, height: 24.0)
Text("Navigation Title")
}
}
}
}
.navigationBarTitleDisplayMode(.inline)
}
}
只需对前导工具栏项目执行相同操作(因为项目是独立的,并且一个对齐方式不会影响其他 - 仅影响栏的大小)
测试 Xcode 13.4 / iOS 15.5
*边框是为了更好的可见性
Text("Hello")
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
VStack(alignment: .leading) {
Button {} label: {Image(systemName: "globe")}
.frame(height: 24.0)
Text("X").foregroundColor(.clear)
}.border(.red)
}
ToolbarItemGroup(placement: .principal) {
VStack {
Image("picture")
.resizable()
.frame(width: 64.0, height: 24.0)
Text("Navigation Title")
}.border(.green)
}
}