OnLayout Tutorial 11

OnLayout Tutorial 11.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()
                /// Update the `titleBarHeight` every time the
                /// title bar view changes.
                .onLayout { proxy in
                    titleBarHeight = proxy.size.height
                },
            alignment: .top
        )
        .edgesIgnoringSafeArea(.all)
    }
}

struct TitleBar : View {
    var body: some View {
        HStack {
            Text("Title")
                .frame(alignment: .center)
                .foregroundColor(.white)
            Spacer()
        }
        .padding(
            EdgeInsets(
                top: 50,
                leading: 16,
                bottom: 16,
                trailing: 16
            )
        )
        .background(Color.red.opacity(0.5))
    }
}