ios - 在 SwiftUI 中添加 Rectangle() 时单元格行自动调整大小损坏

Question

我无法Rectangle()在水平堆栈中定位简单。如果我添加它，Text()停止调整大小是这样的：

如果我删除Rectangle()，炒锅罚款：

我尝试更改 frame、relativeSize、layoutPriority 等等，但没有任何效果。我认为这是一个错误，但对于任何类型的几何类型（如 Circle、RoundedRectangle 等）都失败了。另一方面，Image()它工作正常。

有什么建议吗？

谢谢！

Answer 1

只是从我的脑海中写出来，可能是错误的，但是尝试在 VStack 中添加矩形，这样它就不会将单元格包裹在它周围。

VStack {
    Rectangle()
    Spacer()
}

让我知道它是否有效。

编辑*

必须尝试一下，并找到一个“有点”的解决方案，它可能会引导您正确答案，您只需将矩形放置在右上角。将此作为您的 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

最终解决方案！感谢@Markicevic 的基本想法

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)

    }

}

但是，我认为这不是最好的解决方案，它是一个 SwiftUI 错误。

Answer 3

这种行为的原因是 HStack 在布局时为其子级提供了无穷大作为可用宽度。因此，Text 没有理由以无限的可用宽度分成几行。

Flutter 为以下情况提供了 Expanded 小部件：

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

由于 SwiftUI 是基于 Flutter 的想法（我相信），它可能会提供类似的东西。

Answer 4

在 Xcode 11.4.1 上，下面的代码应该没有问题。

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