Cell row autosizing broken when add Rectangle() in SwiftUI - ios

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!

Answer 1

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)
}

Answer 2

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.

Answer 3

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.

Answer 4

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()
}
}