SwiftUI水平滚轮Picker单元格尺寸适配问题求助

问题原因 #

你遇到的是wheel样式Picker旋转后，原生布局未正确识别内部视图旋转后的尺寸，导致单元格约束失效、内容重叠的问题，这在iOS 16.x版本中确实存在相关布局适配bug，并非代码逻辑问题，但可通过调整布局约束规避。

修复方案 #

核心思路是强制约束Picker单元格的尺寸，同时匹配外层Picker旋转后的容器大小，具体修改如下：

• 移除Picker内部多余的HStack，减少布局层级干扰
• 给图片设置明确的contentMode，确保缩放逻辑正确
• 给外层Picker设置匹配旋转后尺寸的frame
• 为Picker单元格添加fixedSize()，强制系统识别视图实际尺寸

修改后的代码 #

@ViewBuilder func customAvatarView() -> some View {
    List {
        ForEach(Array(sections.enumerated()), id: \.offset) { sectionIndex, element in
            VStack(spacing: 0) {
                Picker("\(element)", selection: $currentSelection[sectionIndex]) {
                    DynamicFetchView(predicate: NSPredicate(format: "userID == %@", Auth.auth().currentUser!.uid), sortDescriptors: []) { (shopItems: FetchedResults<ShopData>) in
                        ForEach(shopItems.filter { $0.category == element }, id: \.self) { shopItem in
                            if let image = UIImage(named: shopItem.image ?? "") {
                                Image(uiImage: image)
                                    .resizable()
                                    .contentMode(.fit)
                                    .frame(width: 150, height: 150)
                                    .rotationEffect(Angle(degrees: 90))
                                    .fixedSize()
                            }
                        }
                    }
                }
                .pickerStyle(.wheel)
                .frame(width: 150, height: 400)
                .rotationEffect(Angle(degrees: -90))
                .clipped()
                .compositingGroup()
            }
        }
    }
}

额外优化建议 #

• 如果图片比例不一致，可将.frame(width:150, height:150)改为只约束单一维度（比如仅设置width），配合.contentMode(.fit)避免拉伸变形
• 若仍有轻微重叠，可尝试给Picker添加.contentShape(Rectangle())，强制系统按矩形区域计算布局交互范围

内容的提问来源于stack exchange，提问作者uncleX