SwiftUI 在 ZStack 中不居中
Posted
技术标签:
【中文标题】SwiftUI 在 ZStack 中不居中【英文标题】:SwiftUI not centering when in ZStack 【发布时间】:2021-02-16 20:06:13 【问题描述】:我正在尝试组合一个视图,该视图由顶部标题视图、底部内容视图和位于顶部的视图组成,该视图位于分割两个视图的线的中心。我发现我需要一个 ZStack 中的对齐指南来定位中间视图,但是我无法让下部内容视图中的项目居中而没有间隙。
这段代码:
extension VerticalAlignment
struct ButtonMid: AlignmentID
static func defaultValue(in context: ViewDimensions) -> CGFloat
return context[.bottom]
static let buttonMid = VerticalAlignment(ButtonMid.self)
struct ContentView: View
var body: some View
VStack
ZStack(alignment: Alignment(horizontal: .center, vertical: .buttonMid))
HeaderView()
.frame(maxWidth: .infinity, minHeight: 200, idealHeight: 200, maxHeight: 200, alignment: .topLeading)
// BodyView()
// .alignmentGuide(.buttonMid, computeValue: dimension in
// return dimension[VerticalAlignment.top]
// )
Color.red
.frame(width: 380, height: 50, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
.alignmentGuide(.buttonMid, computeValue: dimension in
return dimension[VerticalAlignment.center]
)
BodyView()
.edgesIgnoringSafeArea(.top)
struct HeaderView: View
var body: some View
Color.green
struct BodyView: View
var body: some View
VStack
Spacer()
HStack
Spacer()
BodyContent()
Spacer()
Spacer()
.background(Color.blue)
struct BodyContent: View
var body: some View
VStack
Text("Line 1")
Text("Line 2")
Text("Line 3")
给你这个:
它以我想要的方式将较低的内容居中,但是它在上下视图之间留下了间隙。如果我取消注释 ZStack 中的 BodyView 代码并在 VStack 中将其注释掉,如下所示:
struct ContentView: View
var body: some View
VStack
ZStack(alignment: Alignment(horizontal: .center, vertical: .buttonMid))
HeaderView()
.frame(maxWidth: .infinity, minHeight: 200, idealHeight: 200, maxHeight: 200, alignment: .topLeading)
BodyView()
.alignmentGuide(.buttonMid, computeValue: dimension in
return dimension[VerticalAlignment.top]
)
Color.red
.frame(width: 380, height: 50, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
.alignmentGuide(.buttonMid, computeValue: dimension in
return dimension[VerticalAlignment.center]
)
// BodyView()
.edgesIgnoringSafeArea(.top)
给你:
这会使内容不居中。我怎样才能让它居中?我尝试将它放在 GeometryReader 中,结果相同。
【问题讨论】:
【参考方案1】:您不需要自定义 VerticalAlignment
。相反,您可以将中间视图作为叠加层并将其与底部视图的顶部边框对齐:
struct ContentView: View
var body: some View
VStack(spacing: 0)
HeaderView()
.frame(height: 200)
BodyView()
.overlay(
Color.red
.frame(width: 380, height: 50)
.alignmentGuide(.top) $0[VerticalAlignment.center] ,
alignment: .top
)
.edgesIgnoringSafeArea(.top)
【讨论】:
除了在 VStack 上需要“spacing: 0”之外,它工作得很好。谢谢。以上是关于SwiftUI 在 ZStack 中不居中的主要内容,如果未能解决你的问题,请参考以下文章
SwiftUI,ScrollView 在 ZStack 中向上推送 VStack 图像
iOS SwiftUI:使用 ScrollView 和 ZStack 正确堆叠 NavigationView?