SwiftUI 菜单破坏布局

Question

此示例 SwiftUI 应用程序 (Xcode 12.5.1) 由Menu和 按钮组成。点击按钮可在“短文本”和“更长文本”之间切换菜单标题。

不幸的是，布局无法正确执行。正如您所看到的，“更长的文本”被不必要地截断了。但是，一旦点击菜单标题并且菜单短暂出现，标题就会增长到适当的（未截断的）大小，问题就会消失：

这是代码：

struct ContentView: View {
    @State private var textIsLong = false

    var body: some View {
        VStack {
            Menu {
                Text("Menu Item")
            } label: {
                Text(textIsLong ? "Much Longer Text" : "Short Text")
            }
            .font(.system(size: 30))
            .foregroundColor(Color(UIColor.label))
            .lineLimit(1)

            Button("Toggle Title", action: { textIsLong.toggle()})
        }
    }
}

相反，将菜单替换为 可以Text(textIsLong ? "Much Longer Text" : "Short Text")消除该问题；文本永远不会被截断。

这只是 SwiftUI 布局错误吗？不管怎样，你能想出一个解决方法吗？

Answer 1

您可以通过将标签中的.frame()的设置为以下内容来解决截断和布局中断问题TextMenu

Menu {
    Text("Menu Item")
} label: {
    Text(textIsLong ? "Much Longer Text" : "Short Text")
        .frame(maxWidth: .infinity)  // making maxWidth infinity 
}