SwiftUI Grid - Hstack을 여러줄로 래핑

Hstack에서 불러온 데이터를 스마트폰 폭에 맞게 여러줄로 래핑하는 방법

 

 

 

import SwiftUI

 

struct ContentView: View {

    

    let words = ["Youtube","FaceBook","Google","Naver","Daum","link","Yahoo","Apple","Samsung","LG","Ford","Safeway","HomeDepot","Ikea","LondonDrug","HStack in multiple lines using SwiftUI"]

    

    //let words = Lorem.worlds(100).split(separator: " ").map{String($0)}

    

    var body: some View {

        VStack {

            TagsView(items: words)

        }

    }

}

 

struct ContentView_Previews: PreviewProvider {

    static var previews: some View {

        ContentView()

    }

}

 

struct TagsView: View{

 

    let items: [String]

    var groupedItems: [[String]] = [[String]]()

    let screenWidth = UIScreen.main.bounds.width

    

    init(items: [String]){

        self.items = items

        self.groupedItems = createGroupedItems(items)

        

    }

    

    private func createGroupedItems(_ items: [String]) -> [[String]]{

        

        var groupedItems: [[String]] = [[String]]()

        var tempItems: [String] = [String]()

        var width:CGFloat = 0

        

        for word in items{

            let label = UILabel()

            label.text = word

            label.sizeToFit()

            

            let labelwidth = label.frame.size.width + 32

            

            if(width + labelwidth + 32) < screenWidth{

                width += labelwidth

                tempItems.append(word)

            } else {

                width = labelwidth

                groupedItems.append(tempItems)

                tempItems.removeAll()

                tempItems.append(word)

            }

        }

        

        groupedItems.append(tempItems)

        return groupedItems

    }

    

 

    var body: some View{

        ScrollView{

            VStack(alignment: .leading){

                ForEach(groupedItems, id:\.self){subItmes in

                    HStack{

                        ForEach(subItmes, id:\.self){word in

                            Text(word)

                                .fixedSize()

                                .padding()

                                .background(Color.blue)

                                .foregroundColor(.white)

                                .clipShape(RoundedRectangle(cornerRadius: 10.0, style: .continuous))

                        }

                    }

                }

                Spacer()

            }

        }

    }

}