如何在 SwiftUI HStack 中隐藏剪切视图

Question

SwiftUI 是否有可能在一行中仅显示尽可能多的（固定大小）视图而不进行裁剪，例如剪切视图的某些部分。

\n

布局示例

\n

 ----------------------------------------- \n|                                         |\n|  -------     -------     -------     -------     -------\n| | VIEW1 |   | VIEW2 |   | VIEW3 |   | VIEW4 |   | VIEW5 |\n|  -------     -------     -------     -------     -------\n|                                         |\n -----------------------------------------\n

\n

在此示例中VIEW5应隐藏，因为它相对于父视图完全超出范围。\n这可以通过.clipped().

\n

VIEW4也应该完全隐藏！\n因为如果要显示它，则必须将其切断。\n所有其他视图都应正常渲染。

\n

SwiftUI 布局

\n

最初的尝试存在以下问题：

\n

\n
• 由于 的宽度itemView比外部 的宽度大得多VStack，因此前缘未对齐 => \xe2\x98\x91\xef\xb8\x8f解决方案
\n
• \xe2\x9d\x8c即使最后一个视图没有完全显示在屏幕上，它也可能是可见的。应该避免这种情况。
\n

\n

 ----------------------------------------- \n|                                         |\n|  -------     -------     -------     -------     -------\n| | VIEW1 |   | VIEW2 |   | VIEW3 |   | VIEW4 |   | VIEW5 |\n|  -------     -------     -------     -------     -------\n|                                         |\n -----------------------------------------\n

\n

\n

Answer 1

使用在框架上对齐的剪辑HStack（使用 Xcode 12.1 / iOS 14.1 测试）

private var itemView: some View {
    HStack {
        ForEach(items, id: \.self) { item in
            Text(item)
                .lineLimit(1)
                .fixedSize()
                .padding(.all, 5)
                .font(.body)
                .background(Color.blue)
                .foregroundColor(Color.white)
                .cornerRadius(5)
        }
    }
    .frame(maxWidth: 350, alignment: .leading)
    .clipped()
}