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

问题描述

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

I'm working on a SwiftUI view whose purpose is to allow the user to enter an amount of dollars. I want a row of seven wheel-style Pickers, each of whose values are the digits 0 to 9.

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

The following code works, except that when I try to touch & drag a digit column to scroll through it, I find that my drag gesture causes not the Picker I'm touching to scroll, but rather a Picker several columns over to the right. To put it another way, the drag-to-scroll area for each Picker is offset quite a bit to the left of where the Picker column itself appears on the screen.

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

I've tried putting borders on the views, but everything seems to be in the right place. Any ideas what's causing this or how to fix it?

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)

        }
    }
}

推荐答案

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

Applying .clipped() to each .frame(...) solved the problem. Presumably the touch areas for these Picker wheels were being presented outside the frame area (which is used for layout but does not inherently constrain content to the frame bounds) and were overlapping in ways that caused the weird offset effect. Using .clipped() keeps SwiftUI from displaying/activating content outside the frame, and now the Picker wheels work correctly.

这篇关于SwiftUI 中的一排 Picker 轮子，为什么拖动滚动区域与屏幕上的 Picker 控件偏移?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！