ios SwiftUI：固定到居中元素的顶部和底部

6rqinv9w 于 2022-11-26 发布在 iOS

关注(0)|答案(3)|浏览(237)

使用SwiftUI，我尝试将View放在屏幕中心，然后给予它一个高度可变的页眉和/或页脚。
使用约束时，它看起来如下所示：

let view = ...
let header = ...
let footer = ...

view.centerInParent()
header.pinBottomToTop(of: view)
footer.pinTopToBottom(of: view)

这样，无论页眉和页脚的大小如何，view都将始终位于屏幕的中心。
我不知道如何用SwiftUI实现这一点。使用任何类型的HStack或VStack都意味着header和footer的大小围绕view。我希望避免硬编码任何高度，因为中心view的大小也可能不同。
有什么想法吗？新的SwiftUI，所以建议是赞赏！

ios

来源：https://stackoverflow.com/questions/59315176/swiftui-pin-to-the-top-bottom-of-a-centered-element

3条答案

按热度按时间

slhcrj9b1#

如果我正确地理解了你的目标（因为，正如@nayem评论的那样，第一次似乎我错过了），下面的方法应该是有帮助的。

代码快照：

extension VerticalAlignment {
   private enum CenteredMiddleView: AlignmentID {
      static func defaultValue(in dimensions: ViewDimensions) -> CGFloat {
         return dimensions[VerticalAlignment.center]
      }
   }

    static let centeredMiddleView = VerticalAlignment(CenteredMiddleView.self)
}

extension Alignment {
    static let centeredView = Alignment(horizontal: HorizontalAlignment.center, 
                          vertical: VerticalAlignment.centeredMiddleView)
}

struct TestHeaderFooter: View {
    var body: some View {
        ZStack(alignment: .centeredView) {
            Rectangle().fill(Color.clear) // !! Extends ZStack to full screen
            VStack {
                Header()
                Text("I'm on center")
                    .alignmentGuide(.centeredMiddleView) { 
                         $0[VerticalAlignment.center]
                    }
                Footer()
            }
        }
//        .edgesIgnoringSafeArea(.top) // uncomment if needed
    }
}

struct Header: View {
    var body: some View {
        Rectangle()
            .fill(Color.blue)
            .frame(height: 40)
    }
}

struct Footer: View {
    var body: some View {
        Rectangle()
            .fill(Color.green)
            .frame(height: 200)
    }
}

struct SwiftUIView_Previews: PreviewProvider {
    static var previews: some View {
        TestHeaderFooter()
    }
}

赞(0）回复(0）举报 2022-11-26

i2loujxw2#

代码如下：

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            VStack(alignment: .leading) {
                Rectangle()
                .fill(Color.gray)
                .frame(width: geometry.size.width, height: geometry.size.height * 0.1, alignment: .center)
            Text("Center")
                .frame(width: geometry.size.width, height: geometry.size.height * 0.2, alignment: .center)
            Rectangle()
                .fill(Color.gray)
                .frame(width: geometry.size.width, height: geometry.size.height * 0.1, alignment: .center)
            }
        }
    }
}

使用GeometryReader，你可以为你的视图应用动态大小。这里也是上述代码的屏幕截图