SwiftUI中使用ViewThatFits实现等宽按钮自适应横竖布局的问题

嘿，我完全懂你的烦恼！这个问题的核心在于ViewThatFits的适配判断逻辑——当按钮里的文本允许换行时，系统会觉得HStack还能“装下”这些内容，所以不会自动切换到VStack布局。咱们只要让HStack里的按钮强制保持单行，就能触发预期的布局切换啦！

试试修改后的代码：

struct ContentView: View {
    var body: some View {
        ViewThatFits {
            HStack(spacing: 8) {
                Button { } label: {
                    Text("OK")
                        .lineLimit(1) // 强制文本单行显示
                        .frame(maxWidth: .infinity)
                }
                Button { } label: {
                    Text("Very long button 2")
                        .lineLimit(1) // 强制文本单行显示
                        .frame(maxWidth: .infinity)
                }
            }
            VStack(spacing: 8) {
                Button { } label: {
                    Text("OK")
                        .frame(maxWidth: .infinity)
                }
                Button { } label: {
                    Text("Very long button 2")
                        .frame(maxWidth: .infinity)
                }
            }
        }
        .frame(maxWidth: 200)
        .buttonStyle(.bordered) // 可选，让按钮样式更直观
    }
}

原理很简单：给每个按钮的文本加上lineLimit(1)后，HStack里的按钮就无法通过换行来压缩空间了。当容器宽度不足以容纳两个单行按钮并排时，ViewThatFits就会自动切换到VStack布局，完美实现你想要的“宽时并排、窄时竖排”的效果。

如果你还想避免按钮过窄，可以给按钮的frame加上最小宽度限制，比如：

.frame(minWidth: 100, maxWidth: .infinity)

这样当容器宽度小于两个最小宽度加间距时，就会触发布局切换，体验会更流畅。

内容来源于stack exchange