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
相关产品推荐
相关产品推荐

