Create a list in SwiftUI with sticky section headers

 Sample Code

import SwiftUI

struct ContentView: View {

    @State var isCustomViewControllerDisplayed = false

    @State private var toggleState = false

    

    var body: some View {

        HStack{

            List {

                Text("Non-sticky part of the header...")

                    .font(.system(size: 32))

                

                Section(header: HStack {

                    Text("Sticky header")

                        .font(.system(size: 24))

                    Spacer()

                    Image(systemName: "sun.max.fill")

                }) {

                    ForEach(1..<40) { index in

                        HStack {

                            Text("Row #\(index)")

                            Spacer()

                            Image(systemName: "sun.max.fill")

                           

                        }

                    }

                }

                Section(header: HStack {

                    Text("Sticky header1")

                        .font(.system(size: 24))

                    Spacer()

                }) {

                    ForEach(41..<80) { index in

                        HStack {

                            Text("Row #\(index)")

                            Spacer()

                            

                        }

                    }

                }

            }

            .listStyle(.plain) // PlainListStyle() on SwiftUI 1 and 2

        }

    }

}

#Preview {

    ContentView()

}

Create a custom toggle button in SwiftUI

Sample Code:

struct CustomToggleButton: View {

    @Binding var isSwitchOn: Bool

    

    var body: some View {

        Button(action: {

            isSwitchOn.toggle()

        }){

            HStack {

                Image(systemName: isSwitchOn ? "checkmark.circle.fill" : "circle")

                    .resizable()

                    .frame(width: 20, height: 20)

                //Text(isSwitchOn ? "On" : "Off")

            }

        }

    }

}

Usage:  

struct ContentView: View {

 @State private var toggleState = false

    

    var body: some View {

         CustomToggleButton(isSwitchOn: $toggleState)

    }

}

GeometryReader in SwiftUI

 GeometryReader is a SwiftUI tool that allows users to access and manipulate the size and position of a view.

Getting Screen Size:

struct ScreenSize: View {

    var body: some View {

        GeometryReader { geometry in

            Text("Screen width: \(geometry.size.width)")

                .padding()

        }

    }

}

Getting View Size:

struct ViewSize: View {

    var body: some View {

        GeometryReader { geometry in

            Rectangle()

                .fill(Color.blue)

                .overlay(

                    Text("View width: \(geometry.size.width)"),

                    alignment: .center

                )

        }

        .frame(width: 200, height: 100)

    }

}

Key Points:

1. GeometryReader provides size and position info.
2. Use geometry.size to access width and height.
3. Can be used within any view.
4. Global screen size access via UIScreen.main.bounds.

Spacer() and Divider() in SwiftUI.

 1. Purpose:

    - Spacer(): manages layout and spacing.

    - Divider(): visually separates sections.

2. Appearance:

    - Spacer(): invisible, takes up space.

    - Divider(): visible line.

3. Orientation:

    - Spacer(): horizontal or vertical.

    - Divider(): horizontal (default) or vertical.

Create a custom layout in SwiftUI using VStack, HStack, and ZStack?

 In SwiftUI, create custom layouts using VStack, HStack, and ZStack. 

VStack (Vertical Stack)

- Arranges views vertically.

- Respects view sizes.

    VStack {

            

            Text("View 1")

            

            Text("View 2")

            

            Text("View 3")

            

        }

HStack (Horizontal Stack)

• - Arranges views horizontally.
• - Respects view sizes.

        HStack {

            

            Text("View 1")

            

            Text("View 2")

            

            Text("View 3")

            

        }

ZStack (Z-Axis Stack)

- Arranges views overlapping each other.

- Later views cover earlier ones.

ZStack {

            

            Rectangle().fill(Color.blue)

            

            Text("Overlay Text")

            

        }

Combining Stacks

- Nest stacks to create complex layouts.

    VStack {

            

            HStack {

                

                Text("View 1")

                

                Text("View 2")

                

            }

            

            Text("View 3")

            

        }

    }

Custom Layout Modifiers

- Use modifiers to adjust spacing, padding, alignment.

    VStack(spacing: 20) {

            

            Text("View 1")

            

            Text("View 2")

            

        }

        

        .padding(.all, 20)

        

        .alignment(.center)

struct ContentView: View {

    var body: some View {

        ZStack {

            Rectangle().fill(Color.blue)

            VStack(spacing: 20) {

                HStack {

                    Text("View 1")

                    Text("View 2")

                }

                Text("View 3")

            }

            .padding(.all, 20)

            

        }

}

}

Best Practices

1. Use VStack for vertical lists.

2. Use HStack for horizontal lists.

3. Use ZStack for overlays.

4. Nest stacks for complex layouts.

5. Adjust spacing, padding, and alignment using modifiers.

6. Use Spacer() to manage layout.