Cell row autosizing broken when add Rectangle() in SwiftUI

Question

I'm having trouble positioning a simple Rectangle() in a horizontal stack. If I add it, the Text() stops resizing like this:

If I remove the Rectangle(), woks fine:

I tried changing frame, relativeSize, layoutPriority and much more, but nothing works. I think that is a bug, but fails with any type of geometric types like Circle, RoundedRectangle, etc. On the other hand, with an Image() it works fine.

Any suggestion?

Thanks!

Have you tried right clicking on the rectangle to see what modifiers you have available? — Fogmeister, Jun 10 '19 at 13:48
https://developer.apple.com/documentation/swiftui/rectangle/3286707-frame This says "If height is nil, the resulting view assumes this view’s sizing behavior." Looks like you need to update the rectangles sizing behaviour. — Fogmeister, Jun 10 '19 at 13:50
@Fogmeister When right clicking, no modifiers are available. And about the documentation, I know, I've tried everything I've found... — mhergon, Jun 10 '19 at 14:18
Have you tried adjusting the layoutPriority for the rectangle? You are literally on the bleeding edge by using SwiftUI. So there isn't much help out there at the moment. You are part of the people creating the first UIs. So you need to be the ones exploring all the options and letting us know. Either that, or don't use SwiftUI if you want help from others :P — Fogmeister, Jun 10 '19 at 14:20
@Fogmeister yes, and doesn't work. With an Image() works fine... — mhergon, Jun 10 '19 at 14:21

Markicevic · Accepted Answer · 2019-06-10T15:01:50.527

Just writing out of my head, could be wrong, but try to add rectangle in VStack so that it does not wrap cell around it.

VStack {
    Rectangle()
    Spacer()
}

Let me know if it works.

Edit*

Had to try it out, and find a "kinda" solution, it may lead you to correct answer, you just have to position rectangle in top right corner. Make this your RowItem.

ZStack {
        Rectangle()
            .foregroundColor(Color.red)
            .frame(width: 10, height: 10)

        Text("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.")
        .lineLimit(nil)
        .layoutPriority(999)
        .padding(.horizontal, 20)
    }

That doesn't work. Simply add a space below it without readjusting the `Text()`. Thanks for suggestion, was a good option to try! — mhergon, Jun 10 '19 at 14:28
@mhergon I had to try it out now, i had progress but not final solution, do not have more time right now :/ Hope this helps :) — Markicevic, Jun 10 '19 at 15:02

score 2 · Answer 2 · answered Jun 10 '19 at 15:23

Final solution! Thanks @Markicevic for the base idea

struct RowItem: View {

    var body: some View {

        ZStack(alignment: .leading) {
            Rectangle()
                .foregroundColor(.red)
                .frame(width: 10)

            HStack {
                Text("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.")
                    .lineLimit(nil)

            }
            .layoutPriority(1)
            .padding(.horizontal, 20)

        }
        .background(Color.white)
        .cornerRadius(5.0)
        .shadow(color: Color.black.opacity(0.3), radius: 4.0, x: 0.0, y: 3.0)

    }

}

However, I think it's not the best solution and it's a SwiftUI error.

score 0 · Answer 3 · answered Jun 25 '19 at 15:39

The reason for such behavior is that HStack provides infinity as available width for its children while laying out. And so, there no reason for Text to break into several lines in infinite available width.

Flutter provides Expanded widget for cases like this:

Row(
    // mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      RaisedButton(
          child: Text('data'), 
          onPressed: () {}
      ),
      Expanded(child: Text(s))
    ],
  )

Since SwiftUI is based on Flutter's ideas (I beleave) it may provide something similar.

score 0 · Answer 4 · answered Apr 28 '20 at 04:56

On Xcode 11.4.1 the code bellow should work no problem.

struct ContentView: View {
    var body: some View {
        List {
            ForEach(0..<10) { _ in
                RowCell()
            }
        }
    }
}

struct RowCell: View {
    var body: some View {
        HStack(spacing: 5.0) {
            Rectangle()
                .foregroundColor(.red)
                .frame(width: 10)

            Text("Sed ut persipiciatis unde omnis iste natur error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eque ipsa quake ab illo inventore veritas et quasi architetto beata vitae dicta sunt explicabo.")
        }
        .background(Color.white)
        .cornerRadius(3)
        .shadow(color: Color.black.opacity(0.3), radius: 4, x: 0, y: 3)
    }
}

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

Cell row autosizing broken when add Rectangle() in SwiftUI

4 Answers4