OnLayout Tutorial 08

OnLayout Tutorial 08.swift

struct MainView: View {
    
    /// Controls the amount of padding above the scroll view's
    /// content.
    @State var titleBarHeight: CGFloat = 123
    
    var body: some View {
       ScrollView {
            HStack {
                Spacer()
                Text("ScrollView Content")
                    .multilineTextAlignment(.center)
                    .foregroundColor(.white)
                    .background(Color.blue.brightness(0.2))
                Spacer()
            }
            /// Pad the top of the content based on the value
            /// of `titleBarHeight`.
            .padding(.top, titleBarHeight)
        }
        .background(Color.blue)
        .overlay(
            TitleBar()
                .background(
                    /// `proxy` will contain the size of the
                    /// title bar view.
                    GeometryReader { proxy in
                        layoutWatcher(proxy)
                    }
                ),
            alignment: .top
        )
        .edgesIgnoringSafeArea(.all)
    }
    
    /// Returns a `View` with the side effect of using the proxy 
    /// value to update `titleBarHeight`.
    func layoutWatcher(_ proxy: GeometryProxy) -> some View {
        /// This updates the height whenever the view is updated.
        titleBarHeight = proxy.size.height
        return Color.clear
            .onAppear {
                /// This updates the height when the view first
                /// appears.
                titleBarHeight = proxy.size.height
            }
    }
}