SWIFTUI - Picker view touch/scroll-able area is still out of frame even after using clipped()

Question

SWIFTUI I have a picker view(wheel type) and I clipped() its frame to half width of the screen, and from the UI you can see its half but the scrollable area is still actionable outside that frame. How can I remove that outer area to not be scrollable?

HStack(spacing: 0) {
    Picker(selection: self.$viewModel.selectedFrameworkIndex, label: Text("")) {
    ForEach(0 ..< viewModel.Categories.count) {
        Text(self.viewModel.Categories[$0])
            .foregroundColor((self.colorScheme == .dark) ? Color.white : Color.black)
         }
    }
    .frame(width: width / 2) // width is width of my screen
    .clipped() 
}

Works fine with Xcode 11.4 / iOS 13.4 with replicated code. Maybe the reason is somewhere else. What (where from) is `width`? Would you show more your code? — Asperi, Jun 19 '20 at 04:02
I think you don't need to use `clipped` method as long as setting frame is correct. Nevertheless you want to force the touch event enabled in the frame area, just try to append `.contentShape(Rectangle())` right after `clipped`. It sets the hit testing area explicitly. — Kyokook Hwang, Jun 20 '20 at 02:57

score 8 · Accepted Answer · answered Jun 26 '20 at 22:24

8

Add .compositingGroup() after .clipped()

HStack(spacing: 0) {
Picker(selection: self.$viewModel.selectedFrameworkIndex, label: Text("")) {
ForEach(0 ..< viewModel.Categories.count) {
    Text(self.viewModel.Categories[$0])
        .foregroundColor((self.colorScheme == .dark) ? Color.white : Color.black)
     }
}
.frame(width: width / 2) // width is width of my screen
.clipped() 
.compositingGroup()  }

answered Jun 26 '20 at 22:24

Reed

944
7
15

10

No longer works on iOS 15.1 – Shawn Koh Nov 25 '21 at 19:14
Any solution for iOS 15.1+ – Christopher Francisco Feb 19 '22 at 18:27

score 1 · Answer 2 · edited Jun 21 '22 at 22:19

1

Adding this extension worked for me:

extension UIPickerView {
    open override var intrinsicContentSize: CGSize {
        return CGSize(width: UIView.noIntrinsicMetric, height: super.intrinsicContentSize.height)
    }
}

edited Jun 21 '22 at 22:19

Timmy

4,098
2
14
34

answered Jun 18 '22 at 22:29

Objective C

21
1
5

score 0 · Answer 3 · edited Jun 21 '22 at 07:20

0

Using .scaleEffect() works well for me. Please check Clickable area of SwiftUI Picker overlapping

edited Jun 21 '22 at 07:20

Timmy

4,098
2
14
34

answered Jun 18 '22 at 17:45

kutay

51
3

SWIFTUI - Picker view touch/scroll-able area is still out of frame even after using clipped()

3 Answers3