在 SwiftUI 中添加 Rectangle() 时单元格行自动调整大小中断

Question

我在水平堆叠中定位简单的 Rectangle() 时遇到问题。如果我添加它，Text() 将停止像这样调整大小：

如果我删除 Rectangle()，炒锅很好：

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

有什么建议吗？

谢谢！

Answer 1

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

VStack {
    Rectangle()
    Spacer()
}

如果有效请告诉我。

编辑*

不得不尝试一下，找到一个 "kinda" 解决方案，它可能会引导您正确答案，您只需将矩形放在右上角即可。将其设为您的 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 在布局时为其子项提供了无限大的可用宽度。因此，文本没有理由以无限的可用宽度分成多行。

Flutter 为这种情况提供了 Expanded widget：

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

在 SwiftUI 中添加 Rectangle() 时单元格行自动调整大小中断

Cell row autosizing broken when add Rectangle() in SwiftUI

ios

swiftui

xcode11