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

Posted 2023-02-23

【中文标题】在 SwiftUI 中添加 Rectangle() 时单元格行自动调整大小损坏

【英文标题】：Cell row autosizing broken when add Rectangle() in SwiftUI

【发布时间】：2019-06-10 13:35:44

【问题描述】：

我无法将简单的Rectangle() 放置在水平堆栈中。 如果我添加它，Text() 会停止调整大小，如下所示：

如果我删除Rectangle()，就可以了：

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

有什么建议吗？

谢谢！

【问题讨论】：

您是否尝试过右键单击矩形以查看可用的修饰符？

developer.apple.com/documentation/swiftui/rectangle/… 这表示“如果高度为零，则生成的视图将采用此视图的大小调整行为。”看起来您需要更新矩形大小调整行为。

@Fogmeister 右键单击​​时，没有可用的修饰符。关于文档，我知道，我已经尝试了我找到的所有东西......

你试过调整矩形的 layoutPriority 吗？通过使用 SwiftUI，您确实处于最前沿。所以目前没有太多帮助。您是创建第一个 UI 的人的一部分。因此，您需要成为探索所有选项并让我们知道的人。要么，如果您需要其他人的帮助，请不要使用 SwiftUI：P

@Fogmeister 是的，但不起作用。使用 Image() 可以正常工作...

【参考方案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)
    

【讨论】：

那行不通。只需在其下方添加一个空格，无需重新调整Text()。感谢您的建议，是个不错的尝试！

@mhergon 我现在必须尝试一下，我有进展但不是最终解决方案，现在没有更多时间：/希望这会有所帮助:)

【参考方案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 错误。

【参考方案3】：

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

Flutter 为这样的情况提供了 Expanded 小部件：

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

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

【参考方案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()