iOS15 - SwiftUI WheelPicker 可滚动外框和剪切区域破坏其他界面

问题描述

我在 HStack 中包含两个 WheelPicker，分别是小时"和分钟".每个 Picker 都设置在一个框架内(宽度:50，高度:30)并额外裁剪.

I have two WheelPickers contained inside a HStack for 'hour' and 'min'.Each Picker is set within a frame(width: 50, height: 30) and additionally clipped.

在 iOS14 中，它的行为符合预期，我可以滚动小时"选择器来更改小时和分钟"选择器来更改分钟.

In iOS14, it behaved as expected and I could scrolled the 'hour' picker to change the hour and 'minute' picker to change the mins.

然而在 iOS15 中，分钟"轮选择器扩展到超过 50 帧宽度并重叠到小时"选择器中；如果我在小时"选择器上滚动，分钟" 值会发生变化(而不是小时"值)，如果我在分钟"选择器上滚动，它会按预期更改分钟".如果我触摸小时"选择器外的最左侧，则小时"值会发生变化.

HOWEVER in iOS15, the 'minute' wheelpicker is extended beyond the frame width of 50 and overlapped into the 'hour' picker; if I scroll on the 'hour' picker, the 'mins' value changes (instead of 'hour' value), if I scroll on 'minute' picker, it changes the 'mins' as expected. If I touch on the far left outside the 'hour' picker, then the 'hour' value changes.

有人遇到同样的问题吗?有什么解决方法吗?

Anyone has the same issue and any workaround for this issue?

我遇到了一种添加mask(rectangle()"的解决方法并尝试了它，但它在 iOS15 上不起作用.

I came across a workaround to add 'mask(rectangle()' and tried it, but it did not work on iOS15.

    @State private var hour: Int = 0
    @State private var minute: Int = 0


    var body: some View {

        VStack {

            HStack (alignment: .center, spacing: 3) {

                NumberPicker("", selection: $hour
                                 , startValue: 0
                                 , endValue: 23
                                 , pickerSize: CGSize(width: 50, height: 30)
                )

                Text("hr")

                NumberPicker("", selection: $minute
                                 , startValue: 0
                                 , endValue: 59
                                 , pickerSize: CGSize(width: 50, height: 30)
                )

                Text("min")

            } // HStack

        } // VStack

    }

}

struct NumberPicker: View {

    let startValue: Int
    let endValue: Int
    let pickerSize: CGSize
    let title: String

    @Binding var selection: Int
    @State var value: Int = 0

    init(_ title: String = ""
         , selection: Binding<Int>
         , startValue: Int = 0
         , endValue: Int
         , pickerSize: CGSize = CGSize(width: 50, height: 30)
    ) {
        self._selection = selection
        self.title = title
        self.startValue = startValue
        self.endValue = (endValue + 1)
        self.pickerSize = pickerSize

        self._value = State(initialValue: selection.wrappedValue)
    }


    var body: some View {

        Picker(title, selection: $value) {

            ForEach(startValue..<endValue, id: .self) { currentValue in

                Text("(currentValue)")
                    .tag(currentValue)
            }
        }
        .pickerStyle(WheelPickerStyle())
        .fixedSize(horizontal: true, vertical: true)
        .frame(width: pickerSize.width, height: pickerSize.height)
        .clipped(antialiased: true)
    }
}

推荐答案

在 NumberPicker 中尝试在 clipped(...) 之前添加 compositingGroup> 如:

In NumberPicker try adding compositingGroup just before clipped(...) as:

.compositingGroup()
.clipped(antialiased: true)

这篇关于iOS15 - SwiftUI WheelPicker 可滚动外框和剪切区域破坏其他界面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！