SWIFTUI - Picker视图、触摸/可滚动区域即使在使用clipped()之后也仍然不在框架内。

Question

SWIFTUI我有一个选择器视图(轮式)，我将它的框架剪裁到屏幕的一半宽，在UI中你可以看到它的一半，但滚动区域在该框架之外仍然是可操作的。如何才能移除该外部区域，使其不可滚动？

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() 
}

Answer 1

在.clipped()之后添加.compositingGroup()

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()  }    

Answer 2

添加这个extension对我有用：

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

Answer 3

使用.scaleEffect()对我很有用。请检查Clickable area of SwiftUI Picker overlapping