GeometryReader alignment

Hello everyone. I am wanting to be able to adjust the size of buttons in a VStack based on how big the screen is but when I try to use GeometryReader, my buttons end up being on the left side of the screen. I am putting the GeometryReader outside of the VStack by the way.

Another question: how can I navigate back to the previous screen as a result of pressing a button on one of my actionSheets?

Code Block swift
struct EventInProgressView: View {
  @EnvironmentObject var viewModel: OlympicGame
  var event: OlympicModel.Event
  @ObservedObject var stopWatchManager = StopWatchManager()
   
  @State private var showingActionSheet = false
   
  var body: some View {
    VStack {
      if let description = event.description {
        Text(description)
          .font(.headline)
          .opacity(0.70)
          .padding()
      }
       
      if event.stopwatchRequested {
        timer
        Divider()
        ScrollView {
          ForEach(event.times.indices, id: \.self) { index in
            HStack {
              Text(String(index + 1) + ".")
                .padding(.horizontal)
              Spacer()
              Text(String(format: "%.2f", event.times[index]))
                .padding(.horizontal)
            }
            .padding(.horizontal)
          }
        }.padding(.vertical)
        Divider()
         
      }
      Button(action: {
        self.showingActionSheet = true
      }) {
        Text("Finish").font(.title3).padding()
      }
        .actionSheet(isPresented: $showingActionSheet) {
          ActionSheet(title: Text("Declare Winner for \(event.name)"), message: Text("Who was victorious this round?"), buttons: [
            .default(Text(viewModel.team1.name)) {
              viewModel.finishEvent(team: viewModel.team1, event: event)
            },
            .default(Text(viewModel.team2.name)) {
              viewModel.finishEvent(team: viewModel.team2, event: event)
            },
            .cancel()
          ])
        }
    }
    .navigationTitle(event.name)
  }


Here is the code for the timer variable on line 19:

Code Block swift
var timer: some View {
      VStack {
        Text(String(format: "%.2f", stopWatchManager.secondsElapsed))
          .font(.custom("Avenir", size: 55))
          .padding(.vertical, 80)
        if stopWatchManager.mode == .stopped {
          Button(action: {self.stopWatchManager.start()}) {
            TimerButton(label: "Start", buttonColor: .blue)
          }
          Button(action: {
            stopAndSave()
          }) {
            TimerButton(label: "Save and Reset", buttonColor: .red)
          }.padding()
          .disabled(true)
          .opacity(0.0)
        }
        if stopWatchManager.mode == .running {
          Button(action: {self.stopWatchManager.pause()}) {
            TimerButton(label: "Pause", buttonColor: .orange)
          }
          Button(action: {
            stopAndSave()
          }) {
            TimerButton(label: "Save and Reset", buttonColor: .red)
          }.padding()
          .disabled(true)
          .opacity(0.0)
        }
        if stopWatchManager.mode == .paused {
          Button(action: {self.stopWatchManager.start()}) {
            TimerButton(label: "Resume", buttonColor: .blue)
          }
          Button(action: {
            stopAndSave()
          }) {
            TimerButton(label: "Save and Reset", buttonColor: .red)
          }
          .padding()
        }
      
  }


Where should I be putting the GeometryReader so that it doesn't align to the left? How have people been solving this in the past?

One option is this one:

https://youtu.be/-APXKvIiK4o

But have a problem, for example if the. button the second frame will the a button...

Yes, this works nicely, just add a second frame.

import SwiftUI



struct ContentView: View {

    var body: some View {
        GeometryReader { geo in
            Image("Example")
                .resizable()
                .scaledTofit()
                .frame (width: geo.size.width * 0.8)
                .frame (width: geo.size.width, height: geo.size.height)
        }
    }

Hope this helps.

GeometryReader alignment
 
 
Q