Your Second iOS & SwiftUI App

So, you can delete images, now? And you’ve got a button to go through with it, on your confirmation dialog… How about another button …to launch the dialog when you actually need it?!

Your challenge is to add a delete button next to the “Update Image…” button you already have. And that’s what should make the dialog show up–not just navigating to the detail view!

For an extra challenge, see if you can make the Delete button only show up when there’s actually an image to delete.

That should pretty much take of everything you’ll need to do, to work with your books’ images. So have it, and come back to compare solutions with me!

Hello again. As always, I hope that went well for you. Here’s how I began: instead of relying on this constant binding…

.confirmationDialog(isPresented: .constant(true)) {

…I created another State variable, which looked very much like the showingImagePicker one we already had.

  @State var showingImagePicker = false
  @State var showingDialog = false

  var body: some View {

And then I used that, for the dialog modifier’s “isPresented” binding.

.confirmationDialoge(...., isPresented: $showingDialog) {

Before adding a new button, I embedded the existing one in an HStack.

        .scaledToFit()

        HStack {
          Button("Update Image…") {
            showingImagePicker = true
          }
          .padding()
        }
      }

And moved the padding to apply to the whole stack, not just the Update Image button.

            showingImagePicker = true
          }
        }
        .padding()

Then, I copied that button code, and pasted it above the original.

        HStack {
          Button("Update Image…") {
            showingImagePicker = true
          }

          Button("Update Image…") {
            showingImagePicker = true
          }

I changed the Text on that copy to “Delete Image”…

Button("Delete Image…") {

I thought that getting rid of the ellipsis seemed better for some reason too, so I did that.

Image") {

And switched the variable I was setting to true, to be showingDialog.

          Button("Delete Image") {
            showingDialog = true
          }

The buttons felt tight enough to be dangerous, to me, so I put a spacer in between.

            showingDialog = true
          }

          Spacer()

          Button("Update Image…") {

But that didn’t look very good, so I added another spacer on the left…

        HStack {
          Spacer()

          Button("Delete Image") {

…and on the right.

          Spacer()
        }
        .padding()

Then, to complete the extra challenge, making the Delete button only show up when there’s actually an image to delete, I thought about what I had just changed. I only needed this Delete button and top spacer if the image was not nil.

      HStack {
        if image != nil {
          Spacer()
          Button("Delete Image") { showingDialog = true }
        }

Now only that updateButton would render if there was no image. With that all set up, I went to ContentView, so I could send some books, and a library image binding, over to the Detail View.

And I live-previewed.After setting a book’s image, my “Delete” button showed up.

Cancel-ing didn’t do anything but dismiss the dialog.And the same for just tapping outside of the dialog. (Which is exactly what I wanted.)

But hitting Delete got rid of both the image, and the delete button!