You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

iOS端纯SwiftUI如何调整wheel样式Picker的行高?

解决方案

方案1:iOS 16.4+ 原生支持(推荐)

从iOS 16.4版本开始,SwiftUI 新增了pickerRowHeight(_:)修饰符,专门用于调整滚轮样式Picker的行高,纯SwiftUI实现,无需额外适配。你直接按需调整行高数值即可,通常比字号大30-40就能避免文字重叠。
修改后的代码如下:

struct ContentView: View {
    @State private var selectedNum = 0
    var body: some View {
        Picker("", selection: self.$selectedNum) {
            Text("1").font(.system(size: 80))
            Text("2").font(.system(size: 80))
            Text("3").font(.system(size: 80))
            Text("4").font(.system(size: 80))
            Text("5").font(.system(size: 80))
            Text("6").font(.system(size: 80))
        }
        .pickerStyle(.wheel)
        .pickerRowHeight(120)
    }
}

方案2:兼容更低iOS版本的实现

如果需要支持iOS 16.4以下的版本,可以通过同时调整Picker整体高度和单个选项高度实现效果:

  • 给Picker设置足够的整体高度,避免容器挤压内部选项
  • 给每个选项设置固定高度,匹配字号需求
    两个高度数值需要配套调整,整体高度要大于等于单行高度乘以可见选项数量,否则内部还是会被压缩导致重叠。
    修改后的代码如下:
struct ContentView: View {
    @State private var selectedNum = 0
    var body: some View {
        Picker("", selection: self.$selectedNum) {
            Text("1").font(.system(size: 80)).frame(height: 100)
            Text("2").font(.system(size: 80)).frame(height: 100)
            Text("3").font(.system(size: 80)).frame(height: 100)
            Text("4").font(.system(size: 80)).frame(height: 100)
            Text("5").font(.system(size: 80)).frame(height: 100)
            Text("6").font(.system(size: 80)).frame(height: 100)
        }
        .pickerStyle(.wheel)
        .frame(height: 500)
    }
}

内容的提问来源于stack exchange,提问作者DanielRM

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.29 03:48:02