我有一个带有菜单样式的选取器,它显示一个带有图标和文本的标签。当对包含该选取器的任何视图应用填充时,选取器的行为就像没有足够的空间一样,即使有足够的空间,它也会运行到多行。
示例代码
struct ContentView: View {
let options = [
"Some Long Text"
]
private var selectedOption: Binding<String> =
.constant("Some Long Text")
var body: some View {
HStack {
Text("Some Text")
Picker("Work Type", selection: selectedOption) {
ForEach(self.options, id: \.self) {
Label($0, systemImage: "pencil.tip.crop.circle")
}
}.pickerStyle(.menu)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
VStack {
ContentView()
ContentView()
.padding()
}
}
}
2条答案
按热度按时间bqucvtff1#
在我看来,这似乎是预期的行为。(特别是在水平边缘)没有足够的空间在一行上呈现表单标签。如果您要变更屏幕大小,(例如使用iPad模拟器或使用横向模式)标签将具有足够的空间并显示在一行上。我在iPad模拟器上测试了这段代码,结果和预期的一样。
如果要强制标签文本在一行上呈现,请使用
fixedSize(horizontal:vertical:)
。尽管这可能会导致意外行为。ahy6op9u2#
这可能是SwiftUI中的一个布局错误。显然有足够的空间将其全部放在一行中,即使有填充。您可能需要向Apple提交错误报告。
但是,通过将
fixedSize()
修改器应用于Picker
,可以轻松地解决此问题:这将确保
Picker
不考虑外部尺寸要求,忽略建议的,只使用理想尺寸的渲染。请注意,这可能会导致意外的行为。例如,当用户在辅助功能设置中选择更大的字体大小时,
Picker
中的文本将永远不会断开,并且可能会呈现在屏幕外。因此,请确保考虑所有用例。PS:你也可以用
Menu
来代替.menu
风格的Picker
,当然,你不会免费得到选择行为,必须手动操作,但它没有这个布局bug。