SwiftUI: Can't call .frame inside ForEach loop

Question

TL;DR: How does one modify content inside a ForEach structure?

The following is a self-contained Playground, in which the call to frame() is OK in a plain body method, but is a syntax error when wrapped in a ZStack/ForEach loop.

import UIKit
import SwiftUI

struct Item: Identifiable {
    var id = UUID()
    var name: String
    init(_ name:String) { self.name = name }
}

let items = [
    Item("a"), Item("b"), Item("c")
]

struct ContentView: View {    
    var body: some View {
        return Image("imageName")
            .resizable()
            .frame(width:0, height:0)          // This compiles.
    }

   var body2: some View {
        ZStack {
            ForEach(items) { item -> Image in   // Return type required...
            let i = item                        // ...because of this line.
            return Image(i.name)
                    .resizable()                // Parens required.
                    .frame(width: 0, height: 0) // Compile error.
            }
        }
    }
}

Note the line let i = item. It is standing in for code in my app that performs some calculations. The fact that the ForEach closure is not a single expression caused the compiler to complain

Unable to infer complex closure return type; add explicit type to disambiguate.

which motivated my adding the return type. But that brings about the topic of this question, the compiler error:

Cannot convert return expression of type 'some View' to return type 'Image'

It appears that the return value of the frame() call is not an Image but a ModifiedContent<SwiftUI.Image, SwiftUI._FrameLayout>.

I have discovered (thanks to commenters!) I can get around this by (somehow) reducing the ForEach closure to a single expression, which renders inferrable the return type, which I can then remove. Is this my only recourse?

Answer 1

As far as I can tell, this may just be a limitation of Swift, analogous to or part of this type-inference issue: Why can't the Swift compiler infer this closure's type?

My workaround has been to add functionality to the Item struct. Now every calculation needed inside the ForEach closure is provided by the item instance, in-line to the Image initializer, like this:

var body3: some View {
        ZStack {
            ForEach(items) { item in        // No return type specified.

            // let (width, height) = ...    // Remove pre-calculations that
                                            // confused the compiler.
            Image(item.name)
                .resizable()
                .frame(
                    width : item.width,     // All needed data are
                    height: item.height     // provided in closure param.
                )
            }
        }
    }
}

I will grant that this is more idiomatically functional, though I prefer the clarity of a few well-chosen assignments preceding the call. (If the calculations for the assignments are side-effect-free, then it is essentially SSA-style, which should pass the FP smell test.)

So I call this an “answer”, even a “solution”, although I can still whinge about the unhelpful error messages. But that is a known issue, and smarter people than me are already on that.

Answer 2

Now the mesh, I'll have to think about. But getting that first error to go away requires conforming Item with identifiable.

struct Item: Identifiable {
  var id = UUID()
  var name: String
  var size: CGSize = .zero
}

I also had to write a custom modifier for using the item to create a frame. We'll likely want to use CGRect for the mesh creation, have some way to mess with the origin of the image.

extension View {
  func frame(with size: CGSize) -> some View {
    frame(width: size.width, height: size.height)
  }
}

Then your body will look something like this.

var body: some View {
  ZStack {
    ForEach(items) { item in
      Image(item.name).resizable().frame(with: item.size)
    }
  }
}

Answer 3

This is here

ForEach(items) { item -> Image in

you explicitly specify that closure returns Image, but frame returns some View, so type mismatch and compiler error.

Use just as below and it will work

ForEach(items) { item in