SwiftUI 中的一排 Picker ***，为啥拖动滚动区域从屏幕上的 Picker 控件偏移？

Posted 2023-02-23

【中文标题】SwiftUI 中的一排 Picker ***，为啥拖动滚动区域从屏幕上的 Picker 控件偏移？

【英文标题】：Row of Picker wheels in SwiftUI, why are drag-to-scroll areas offset from Picker controls on screen?SwiftUI 中的一排 Picker ***，为什么拖动滚动区域从屏幕上的 Picker 控件偏移？

【发布时间】：2019-10-17 17:40:16

【问题描述】：

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

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

我尝试在视图上设置边框，但一切似乎都在正确的位置。任何想法是什么导致了这个或如何解决它？

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)

        
    

【参考方案1】：

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

【讨论】：

在这上面浪费了 2 个小时 - 谢谢。你应该标记正确的答案