ToggleButton con immagini SwiftUI

TODO: collapasable, copyable, download, etc

Please give me the SwiftUI code to make a button with the following properties:

• no text
• I provide an "on" image
• I provide an "off" image
• teh button is 150px x 167pxCertainly! Below is the SwiftUI code for a button that toggles between an "on" image and an "off" image, with a fixed size of 150px x 167px:

import SwiftUI

struct ToggleButton: View {
    @State private var isOn: Bool = false
    
    let onImage: String
    let offImage: String
    
    var body: some View {
        Button(action: {
            isOn.toggle()
        }) {
            Image(systemName: isOn ? onImage : offImage)
                .resizable()
                .frame(width: 150, height: 167)
                .aspectRatio(contentMode: .fit)
        }
        .buttonStyle(PlainButtonStyle())
    }
}

struct ContentView: View {
    var body: some View {
        ToggleButton(onImage: "checkmark.circle.fill", offImage: "xmark.circle.fill")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

In this example, ToggleButton is a custom view that takes two parameters, onImage and offImage, which are the names of the images to display. The button toggles between these two images when clicked.

You can replace "checkmark.circle.fill" and "xmark.circle.fill" with the names of your actual image assets.

Make sure you have the images added to your asset catalog in Xcode with the correct names. If you are using system images (SF Symbols), you can directly use their names as shown."Invalid redeclaration of 'ContentView'"The error "Invalid redeclaration of 'ContentView'" occurs when you have multiple declarations of ContentView in your project. To resolve this, ensure that there is only one declaration of ContentView. Here is the updated code without duplicating ContentView:

import SwiftUI

struct ToggleButton: View {
    @State private var isOn: Bool = false
    
    let onImage: String
    let offImage: String
    
    var body: some View {
        Button(action: {
            isOn.toggle()
        }) {
            Image(systemName: isOn ? onImage : offImage)
                .resizable()
                .frame(width: 150, height: 167)
                .aspectRatio(contentMode: .fit)
        }
        .buttonStyle(PlainButtonStyle())
    }
}

struct ContentView: View {
    var body: some View {
        ToggleButton(onImage: "checkmark.circle.fill", offImage: "xmark.circle.fill")
    }
}

struct ToggleButton_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Ensure that you do not have multiple ContentView structures declared in your project. If you already have a ContentView defined elsewhere, you can either rename one of the views or integrate the ToggleButton into the existing ContentView.

If you want to keep the existing ContentView and just integrate the ToggleButton, here’s how you can do it:

import SwiftUI

struct ToggleButton: View {
    @State private var isOn: Bool = false
    
    let onImage: String
    let offImage: String
    
    var body: some View {
        Button(action: {
            isOn.toggle()
        }) {
            Image(systemName: isOn ? onImage : offImage)
                .resizable()
                .frame(width: 150, height: 167)
                .aspectRatio(contentMode: .fit)
        }
        .buttonStyle(PlainButtonStyle())
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            ToggleButton(onImage: "checkmark.circle.fill", offImage: "xmark.circle.fill")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

In this setup, the ContentView contains the ToggleButton within a VStack, allowing you to integrate more components if needed.In my app, I have ``` import SwiftUI

struct ContentView: View { var body: some View { GeometryReader { geometry in ZStack {

            //Image("ozten_An_orthogonal_head-on_photograph_of_a_lightsaber_handle_t_462e4d3b-4842-4a43-8112-ce5c6e5d554f")
            // Image("ozten_An_orthogonal_head-on_photograph_of_a_lightsaber_handle_t_1868cce8-940b-4cf8-83e7-f04eb40c4e13")
            // "grey_lightsaber" red_lightsaber
            Image("grey_lightsaber")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: geometry.size.width, height: geometry.size.height)
                .clipped()
            
            ToggleButton(onImage: "grey_lightsaber_buttons_off", offImage: "grey_lightsaber_buttons_on")
            
        }
    }
    .edgesIgnoringSafeArea(.all)
}

}

I want to absoluately position the button. I want the background "grey_lightsaber" to take up the full screen. What am I doing wrong?To absolutely position the button on top of the full-screen background image, you need to use the `position` modifier within a `GeometryReader` to calculate the appropriate position for your button. Here is how you can achieve that:

1. Ensure that the background image takes up the full screen.
2. Use the `position` modifier to place the button at the desired location.

Here’s how you can modify your code:

```swift
import SwiftUI

struct ToggleButton: View {
    @State private var isOn: Bool = false
    
    let onImage: String
    let offImage: String
    
    var body: some View {
        Button(action: {
            isOn.toggle()
        }) {
            Image(systemName: isOn ? onImage : offImage)
                .resizable()
                .frame(width: 150, height: 167)
                .aspectRatio(contentMode: .fit)
        }
        .buttonStyle(PlainButtonStyle())
    }
}

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                Image("grey_lightsaber")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: geometry.size.width, height: geometry.size.height)
                    .clipped()
                
                ToggleButton(onImage: "grey_lightsaber_buttons_off", offImage: "grey_lightsaber_buttons_on")
                    .position(x: geometry.size.width / 2, y: geometry.size.height / 2)
            }
        }
        .edgesIgnoringSafeArea(.all)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

In this code:

• The Image view is set to fill the entire screen using the GeometryReader.
• The ToggleButton is placed at the center of the screen using the position modifier. You can adjust the x and y values within the position modifier to place the button at the desired location on the screen.

If you want the button to be positioned somewhere else, you can adjust the x and y values accordingly. For example, to place it 100 points from the top and centered horizontally, you can use:

.position(x: geometry.size.width / 2, y: 100)
```Unsupported multimodal_textThe issue seems to be with the image names. The `Image(systemName:)` initializer is used for SF Symbols, which are built-in icons provided by Apple. If you want to use your custom images, you should use `Image(_:)` instead of `Image(systemName:)`.

Here’s the corrected code:

```swift
import SwiftUI

struct ToggleButton: View {
    @State private var isOn: Bool = false
    
    let onImage: String
    let offImage: String
    
    var body: some View {
        Button(action: {
            isOn.toggle()
        }) {
            Image(isOn ? onImage : offImage)
                .resizable()
                .frame(width: 150, height: 167)
                .aspectRatio(contentMode: .fit)
        }
        .buttonStyle(PlainButtonStyle())
    }
}

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                Image("grey_lightsaber")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: geometry.size.width, height: geometry.size.height)
                    .clipped()
                
                ToggleButton(onImage: "grey_lightsaber_buttons_off", offImage: "grey_lightsaber_buttons_on")
                    .position(x: geometry.size.width / 2, y: geometry.size.height / 2)
            }
        }
        .edgesIgnoringSafeArea(.all)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

In this code:

• Image(isOn ? onImage : offImage) is used to load custom images from your asset catalog.
• Ensure that the image assets ("grey_lightsaber", "grey_lightsaber_buttons_off", and "grey_lightsaber_buttons_on") are added to your Xcode project’s asset catalog.

Make sure that the image names match exactly with what is defined in your asset catalog, including any capitalization. If the images still don’t show up, you might want to double-check the asset catalog to ensure that the images are correctly imported and named.

ToggleButton con immagini SwiftUI created at Tue Jan 20 1970 20:49:30 GMT+0000 (Coordinated Universal Time)