主页 / coding / 问题 / 79305305
Accepted
Joris
Asked: 2024-12-24 18:06:28 +0800 CST

为什么我的列表行分隔符消失了？

  • 772

这是在 Xcode 16.2 中使用 iOS 18 SDK，构建目标 iOS 17。

我有一些非常简单的代码：

List {
    HStack {
        TextField("Some field", text: .constant("Hello"))
        Text("km")
    }
    Text("Hello")
}

当我运行它时，两个列表行之间的分隔符消失在TextField部分下方：

消失分隔符

然而，当我删除该Text("km")行时，一切都按预期工作：

List {
    HStack {
        TextField("Some field", text: .constant("Hello"))
    }
    Text("Hello")
}

正确的行为

我不知道这是怎么回事。有什么建议吗？

swiftui

2 个回答

  1. SwiftUI 的默认分隔符位置依赖于 List 的直接子项的布局信息。当您只有 HStack 视图时，布局系统可能没有足够的信息来可靠地确定在何处绘制分隔符，尤其是当 HStack 内容未完全跨越列表行的宽度时。

    你可以使用这段代码得到相同的行为

     let items = [
            Item(text: "Hello", unit: "km"),
            Item(text: "World", unit: "m"),
            Item(text: "Test", unit: "cm")
        ]
    var body: some View {
        ScrollView {
            VStack {
                ForEach(items) { item in
                    ItemRow(item: item)
                }
            }
            .padding()
        }
      
    }


struct Item: Identifiable {
    let id = UUID()
    let text: String
    let unit: String
}



struct ItemRow: View {
    let item: Item
    var body: some View {
        VStack {
            HStack {
                TextField("Some field", text: .constant(item.text))
                Text(item.unit)
            }
            Divider()
        }
    }
}
    • 0
  2. Best Answer

    SwiftUI 尝试自动将一行中的元素与分隔符对齐，但并不总是能成功。

    您可以使用修饰符手动指定希望分隔符与哪个元素对齐，如下所示alignmentGuide：

    List {
    HStack {
        TextField("Some field", text: .constant("Hello"))
            .alignmentGuide(.listRowSeparatorLeading) { $0[.leading] } // 👈 Telling that separators should be aligned with this component here

        Text("km")
    }

    Text("Hello")
}
    • 0

相关问题