Search code examples
swiftxcodeswiftuixcode12

SwiftUI: Alignment Issues, Style Sheets, Padding


I am new to stack overflow. What I want is an info button in the top right corner. No background, just the icon In white. I currently have a black backgorund at the bottom with the icon in the bottom left corner. I have the button working but I cannot get the positioning right. Can someone tell me where I went wrong? Here is my code and current position.

ControlView:

import SwiftUI

struct ControlView: View {
@Binding var showInfo: Bool

var body: some View {
    ZStack {
        HStack{
        Spacer()
        // Info Button
        ControllButton(systemIconName: "info.circle") {
            print("Info Button Pressed")
            self.showInfo.toggle()
        }.sheet(isPresented: $showInfo, content: {
            // InfoView
            InfoView(showInfo: $showInfo)
        })
        }
        .frame(maxWidth: 500)
        .padding()
        .background(Color.black.opacity(0.05))
    }
    Spacer()
    }
}


struct ControllButton: View {

let systemIconName: String
let action: () -> Void

var body: some View {
    
    Button(action: {
        self.action()
    }){
        Image(systemName: systemIconName)
            .font(.system(size: 35))
            .foregroundColor(.white)
            .buttonStyle(PlainButtonStyle())
    }
    .frame(width: 50, height: 50)
    
}
}

ContentView:

import SwiftUI
import RealityKit

struct ContentView : View {
@State private var isWalkthroughViewShowing = true
@State private var showInfo: Bool = false

var body: some View {
    Group{
        if isWalkthroughViewShowing{
            WalkthroughView(isWalkthroughViewShowing: $isWalkthroughViewShowing)
        } else {
            
 ARViewContainer().edgesIgnoringSafeArea(.all)
                
            ControlView(showInfo: $showInfo)
            
        }
    }
 }
}

Screenshot: image


Solution

  • First of all, welcome Jeremy.

    You can simply use .overlay modifier:

    ARViewContainer().edgesIgnoringSafeArea(.all)
        .overlay(ControlView(showInfo: $showInfo).padding(), alignment: .topTrailing)