时间戳

首页 > 解决方案 > SwiftUI 中的一排 Picker 轮子，为什么拖动滚动区域从屏幕上的 Picker 控件偏移？

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

问题描述

我正在开发一个 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)

        }
    }
}

标签： iosswiftuipicker

解决方案

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

推荐阅读