ios - SwiftUI 中的一排 Picker 轮，为什么拖动滚动区域与屏幕上的 Picker 控件偏移？

Question

我正在开发一个 SwiftUI View ，其目的是允许用户输入美元金额。我想要一排七个轮式选取器，每个值都是数字 0 到 9。

以下代码有效，除了，当我尝试触摸并拖动数字列以滚动它时，我发现我的拖动手势不会导致我触摸的选取器滚动，而是而是选择器在右侧的几列。换句话说，每个选取器的拖动滚动区域相对选取器列本身在屏幕上显示的位置向左偏移了相当多。

我尝试在 View 上设置边框，但一切似乎都在正确的位置。有什么想法导致此问题或如何解决它吗？

import SwiftUI

struct CurrencyPickerView: View {

    @State private var centsDigit: Int = 0
    @State private var tenCentsDigit: Int = 0
    @State private var onesDigit: Int = 0
    @State private var tensDigit: Int = 0
    @State private var hundredsDigit: Int = 0
    @State private var thousandsDigit: Int = 0
    @State private var tenThousandsDigit: Int = 0

    var body: some View {
        let pickerWidth = CGFloat(20)
        return HStack {
            Picker(selection: $tenThousandsDigit, label: EmptyView()) {
                ForEach((0...9), id: \.self) { ix in
                    Text("\(ix)").tag(ix)
                }
            }.frame(width: pickerWidth)

            Picker(selection: $thousandsDigit, label: EmptyView()) {
                ForEach((0...9), id: \.self) { ix in
                    Text("\(ix)").tag(ix)
                }
            }.frame(width: pickerWidth)

            Picker(selection: $hundredsDigit, label: EmptyView()) {
                ForEach((0...9), id: \.self) { ix in
                    Text("\(ix)").tag(ix)
                }
            }.frame(width: pickerWidth)

            Picker(selection: $tensDigit, label: EmptyView()) {
                ForEach((0...9), id: \.self) { ix in
                    Text("\(ix)").tag(ix)
                }
            }.frame(width: pickerWidth)

            Picker(selection: $onesDigit, label: EmptyView()) {
                ForEach((0...9), id: \.self) { ix in
                    Text("\(ix)").tag(ix)
                }
            }.frame(width: pickerWidth)

            Text(".")

            Picker(selection: $tenCentsDigit, label: EmptyView()) {
                ForEach((0...9), id: \.self) { ix in
                    Text("\(ix)").tag(ix)
                }
            }.frame(width: pickerWidth)

            Picker(selection: $centsDigit, label: EmptyView()) {
                ForEach((0...9), id: \.self) { ix in
                    Text("\(ix)").tag(ix)
                }
            }.frame(width: pickerWidth)

        }
    }
}

Answer 1

将 .clipped() 应用于每个 .frame(...) 解决了这个问题。据推测，这些拾取器轮的触摸区域呈现在框架区域之外(用于布局，但本身并不将内容限制在框架边界内)，并且以导致奇怪的偏移效果的方式重叠。使用 .clipped() 可以防止 SwiftUI 显示/激活框架外的内容，现在选取器轮可以正常工作。