将填充应用于具有菜单样式的SwiftUI选取器将导致多行文本

lb3vh1jj  于 2022-11-21  发布在  Swift
关注(0)|答案(2)|浏览(133)

我有一个带有菜单样式的选取器,它显示一个带有图标和文本的标签。当对包含该选取器的任何视图应用填充时,选取器的行为就像没有足够的空间一样,即使有足够的空间,它也会运行到多行。
示例代码

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

bqucvtff

bqucvtff1#

在我看来,这似乎是预期的行为。(特别是在水平边缘)没有足够的空间在一行上呈现表单标签。如果您要变更屏幕大小,(例如使用iPad模拟器或使用横向模式)标签将具有足够的空间并显示在一行上。我在iPad模拟器上测试了这段代码,结果和预期的一样。
如果要强制标签文本在一行上呈现,请使用fixedSize(horizontal:vertical:)。尽管这可能会导致意外行为。

Picker("Work Type", selection: selectedOption) {
    ForEach(self.options, id: \.self) {
        Label($0, systemImage: "pencil.tip.crop.circle")
    }
}
.pickerStyle(.menu)
.fixedSize(horizontal: true, vertical: false)
ahy6op9u

ahy6op9u2#

这可能是SwiftUI中的一个布局错误。显然有足够的空间将其全部放在一行中,即使有填充。您可能需要向Apple提交错误报告。
但是,通过将fixedSize()修改器应用于Picker,可以轻松地解决此问题:

Picker("Work Type", selection: selectedOption) {
    // ...
}
.pickerStyle(.menu)
.fixedSize(horizontal: true, vertical: false)

这将确保Picker不考虑外部尺寸要求,忽略建议的,只使用理想尺寸的渲染。
请注意,这可能会导致意外的行为。例如,当用户在辅助功能设置中选择更大的字体大小时,Picker中的文本将永远不会断开,并且可能会呈现在屏幕外。因此,请确保考虑所有用例。
PS:你也可以用Menu来代替.menu风格的Picker,当然,你不会免费得到选择行为,必须手动操作,但它没有这个布局bug。

相关问题