[swift] forEach로 동적 UI list불러오기

위와 같이, 좌측(숫자 이미지 리스트) 우측(하트 이미지 리스트) 처럼

무엇인가를 가변적으로 나열해야 할 때,
화면에 forEach를 이용해서 뿌려주고 또 변경하는 방법입니다.

	
struct exView: View{
    private struct scoreImg:Identifiable {
          public var id = UUID()
          var num: Int
    }
    @State private var scoreImgList:[scoreImg] = []
    
    var body: some View {
        VStack{
            ForEach (scoreImgList) { item in
            	Image("score_num\(item.num)")
            }
        }
     }                   
}

struct로 구조를 만들고(scoreImg) 타입을 선언합니다. 

@State에 scoreImgList라는 변수를 만들어

scoreImg의 구조로 저장하겠다고 선언합니다. 

그 다음, 뷰 단(body...View...)에서, ForEach를 동작시키면~~

State의 값이 아무것도 없으니까 아무것도 안나오겠죠 ^^;;

저는 사전에 score_num0이라는 이미지를 넣어두었습니다.

 

@State private var scoreImgList:[scoreImg] = [scoreImg(num:0)]

@State부분에 다음과 같이 초기화를 할 수 있습니다. 

 

@State private var scoreImgList:[scoreImg] = [
	scoreImg(num:0),
    scoreImg(num:7),
    scoreImg(num:3)
 ]

리스트이기 때문에, 여러개의 값을 저장할 수 있습니다. 

이렇게 넣어두면 score_num0, score_num7, score_num3이 화면에 보여지겠죠

 

	scoreImgList.removeAll() //모든 값 삭제
	scoreImgList.append(scoreImg(num: 7)) //배열 가장 뒤에 append
	scoreImgList[1].num = 8 //1번 배열 값 변경
	scoreImgList.insert(scoreImg(num:7), at: 0) //0번배열에 7값 insert

컨트롤러 단에서 다음과 같은 문법으로 배열의 값을 빼거나 변경하거나, 추가할 수 있습니다.

(저는 버튼을 만들어서 action에 바인딩을 걸어주었습니다)

 

var body: some View {
  VStack{
    ForEach (scoreImgList) { item in
    	Image("score_num\(item.num)")
    }
  }.onAppear(){
  //뷰가 나타날때 동작    
  }
}       

정말 처음이어서, 당장 다른 복잡한것 안 거치고 확인하고 싶다!
그러면 Stack 뒤에 onAppear을 붙여서 동작을 확인할 수 있습니다. 
저도 처음엔 onAppear로 많이 테스트를 했습니다.