SwiftUI中HStack内容过长时如何实现多行按钮布局？

问题说明 #

在ContentView中用HStack展示按钮列表时，按钮数量过多会超出显示范围，需要实现按钮自动换行的效果。

原代码 #

import SwiftUI

struct ContentView: View {
   @StateObject var vm = SpeakingVM()
   var speakingModel: SpeakingModel
   var body: some View {
       
       HStack(spacing:20){
           ForEach(speakingModel.sentence.indices) { index  in
               Button(action: {
               }, label: {
                   Text(speakingModel.sentence[index].definition)
                       .padding(.vertical,10)
                       .padding(.horizontal)
                       .background(Capsule().stroke(Color.blue))
                       .lineLimit(1)

               })

                   }

}.frame(width: UIScreen.main.bounds.width - 30, height: UIScreen.main.bounds.height / 3)
   }
   }

struct ContentView_Previews: PreviewProvider {
   static var previews: some View {
       ContentView(speakingModel:  SpeakingModel(sentence: [SpeakingModel.Word(definition: "Météo"),SpeakingModel.Word(definition: "Cheval"),SpeakingModel.Word(definition: "Ascenceur")], sentenceInFrench: "Quel temps fait-il ?"))
   }
}

当前效果与期望效果 #

• 当前效果：
• 期望效果：

实现方法 #

方法1：使用LazyVGrid实现自适应换行（兼容iOS 14+） #

将原代码中的HStack替换为LazyVGrid，通过设置自适应列宽让按钮自动换行：

import SwiftUI

struct ContentView: View {
   @StateObject var vm = SpeakingVM()
   var speakingModel: SpeakingModel
   // 定义自适应列，最小宽度可根据按钮内容调整
   private let adaptiveColumns = [GridItem(.adaptive(minimum: 80), spacing: 20)]
   
   var body: some View {
       LazyVGrid(columns: adaptiveColumns, spacing: 20) {
           ForEach(speakingModel.sentence.indices) { index  in
               Button(action: {
                   // 按钮点击逻辑
               }, label: {
                   Text(speakingModel.sentence[index].definition)
                       .padding(.vertical,10)
                       .padding(.horizontal)
                       .background(Capsule().stroke(Color.blue))
                       .lineLimit(1)
               })
           }
       }
       .frame(width: UIScreen.main.bounds.width - 30, height: UIScreen.main.bounds.height / 3)
   }
}

struct ContentView_Previews: PreviewProvider {
   static var previews: some View {
       ContentView(speakingModel:  SpeakingModel(sentence: [SpeakingModel.Word(definition: "Météo"),SpeakingModel.Word(definition: "Cheval"),SpeakingModel.Word(definition: "Ascenceur")], sentenceInFrench: "Quel temps fait-il ?"))
   }
}

方法2：使用iOS 16+原生WrapLayout #

如果项目仅需兼容iOS 16及以上版本，可直接用SwiftUI原生的流式布局组件：

import SwiftUI

struct ContentView: View {
   @StateObject var vm = SpeakingVM()
   var speakingModel: SpeakingModel
   
   var body: some View {
       WrapLayout(spacing: 20) {
           ForEach(speakingModel.sentence.indices) { index  in
               Button(action: {
                   // 按钮点击逻辑
               }, label: {
                   Text(speakingModel.sentence[index].definition)
                       .padding(.vertical,10)
                       .padding(.horizontal)
                       .background(Capsule().stroke(Color.blue))
                       .lineLimit(1)
               })
           }
       }
       .frame(width: UIScreen.main.bounds.width - 30, height: UIScreen.main.bounds.height / 3)
   }
}

说明 #

• 方法1中GridItem(.adaptive(minimum: 80))会根据容器宽度自动计算列数，超出时自动换行，可根据按钮内容调整minimum值适配需求。
• 方法2的WrapLayout是iOS 16新增的原生组件，专为流式换行场景设计，代码更简洁直观。

内容的提问来源于stack exchange，提问作者readytotakeoof