How can I push both views ? Spacer() doesn't work

Question

Im trying to push one GeometryReader as a button to the bottom of the screen but Spacer doesn't work here... The idea is to make the app responsive to all screen sizes.

VStack {
    GeometryReader { geometry in
        Text("VeganFood")
            .font(.system(size: geometry.size.width/12, weight: .bold))
            .foregroundColor(.white)
            .frame(maxWidth: .infinity)
            .frame(maxHeight: 200)
    }
    
    /// Spacer doesn't work here

    GeometryReader { geometry in
        Button(action: { }) {
            Text("Let's get started!")
                .font(.system(size: geometry.size.width/30, weight: .medium, design: .rounded))
                .frame(width: geometry.size.width/3, height: geometry.size.height/7)
                .foregroundColor(.white)
                .background(Color.black)
                .cornerRadius(20.0)
        }
        
        .frame(maxWidth: .infinity)
        .frame(maxHeight: 200)
    }
}

user_9440709 · Answer

GeometryReader takes space as much as it can.

  struct ContentView: View {
        var body: some View {
            VStack {
                GeometryReader { geometry in
                    Text("VeganFood")
                        .font(.system(size: geometry.size.width/12, weight: .bold))
                        .foregroundColor(.red)
                        .frame(maxWidth: .infinity)
                        .frame(maxHeight: 200)
                }
                
                GeometryReader { geometry in
                    VStack { //<= here
                        Spacer() //<=here
                        Button(action: { }) {
                            Text("Let's get started!")
                                .font(.system(size: geometry.size.width/30, weight: .medium, design: .rounded))
                                
                        }
                        .frame(width: geometry.size.width/3, height: geometry.size.height/7)
                        .foregroundColor(.white)
                        .background(Color.black)
                        .cornerRadius(20.0)
                        .frame(maxWidth: .infinity)
                        
                    }
                }
            }
        }
    }

There might be some different approaches

How can I push both views ? Spacer() doesn't work

1 Answers