[SwiftUI] Grid속성

 

 

 

 

Grid의 속성에 대해서 자세히 알아보자.

 

Grid의 종류 : LazyHGrid, LazyVGrid

속성 : fixed, flexible, adaptive

 

 

LazyVGrid

데이터를 수직으로 나열하고자 할 때 사용합니다.

수직으로 나열하기 때문에 column을 사용합니다. column은 세로 한 줄을 의미합니다.

var body: some View {
    LazyVGrid(columns: columns) {
        ForEach(0..<10){num in
            Image(systemName: "person")
                .resizable()
                .aspectRatio(contentMode: .fit)
        }
    }
}

 

위의 코드는 columns라는 프로퍼티에 그 속성을 담고 있습니다. 데이터를 어떻게 보여줄지에 대한 속성을 지정해야 합니다. 

columns 프로퍼티에 담을 속성은 크게 세가지가 있습니다.

 

fixed

데이터의 크기를 고정해서 보여줍니다.

예시 코드는 데이터의 크기를 50으로 고정하였습니다.

var columns: [GridItem] {
    [GridItem(.fixed(50))]
}

 

보시다시피 column은 세로 한 줄을 의미합니다. 여러줄을 나타내고 싶다면  []에 GridItem()을 여러개 입력하면 됩니다.

세줄, 네줄을 나타내고 싶으면 GridItem을 더 추가하면 되겠죠 ?!

var columns: [GridItem] {
    [GridItem(.fixed(50)),
     GridItem(.fixed(50))]
}

 

column마다 데이터의 크기를 다르게 나타낼 수 있습니다.

var columns: [GridItem] {
    [GridItem(.fixed(30)),
     GridItem(.fixed(50))]
}

 

 

flexible

이름대로 데이터의 크기를 유연하게 조절합니다.

minimum값과 maximum값을 가지는데 기본적으로 maximum값을 따릅니다. 그렇기 때문에 minimum값을 생략해도 됩니다!

var columns: [GridItem] {
    //[GridItem(.flexible(minimum: 10,maximum: 200))]
    [GridItem(.flexible(maximum: 200))]
}

 

여러줄로 만들면 유연하게 크기를 조절합니다. 최소한으로 줄입니다.

var columns: [GridItem] {
    [GridItem(.flexible(maximum: 200)),
     GridItem(.flexible(maximum: 200)),
     GridItem(.flexible(maximum: 200)),
     GridItem(.flexible(maximum: 200))]
}

 

 

adaptive

크기를 유연하게 조절한다는 점에서 flexible과 유사하지만 명확한 차이가 있습니다.

우선 adaptive는 minimum값을 따른다는 것입니다. (그렇기 때문에 maximum값의 생략이 가능합니다.)

또, adaptive는 GridItem속성이 하나라도 화면에 최대한 많은 데이터를 보여주기 위해 여러줄에 거쳐 데이터를 보여줍니다.

var columns: [GridItem] {
    //[GridItem(.adaptive(minimum: 50, maximum: 200))]
    [GridItem(.adaptive(minimum: 50))]
}

 

daptive는 내가 지정한 컬럼의 갯수와 무관하게 여러줄에 거쳐 데이터가 작성되기 때문에 아래와 같은 코드는 큰 의미가 없습니다.

컬럼에 크기를 지정할 수 없고 view의 크기를 갯수만큼 일정하게 칸을 나누어 데이터에 속성을 적용시킵니다.

var columns: [GridItem] {
    [GridItem(.adaptive(minimum: 50)),
     GridItem(.adaptive(minimum: 10)),
     GridItem(.adaptive(minimum: 30)),
     GridItem(.adaptive(minimum: 50))]
}

 

 

---

 

LazyHGrid

데이터를 수평으로 나열하고자 할 때 사용합니다.

수평으로 나열하기 때문에 rows를 사용합니다. rows는 데이터 한 줄을 의미합니다.

LazyHGrid(rows: rows) {
    ForEach(0..<50){num in
        Image(systemName: "person")
            .resizable()
            .aspectRatio(contentMode: .fit)
    }
}

 

위의 코드는 rows라는 프로퍼티에 그 속성을 담고 있습니다. 데이터를 어떻게 보여줄지에 대한 속성을 지정해야 합니다. 

VGrid의 columns과 동일하게 rows도 세가지 속성을 사용할 수 있습니다.

 

fixed

var rows: [GridItem] {
    [GridItem(.fixed(50))]
}

 

기본적으로 rows는 가로 한 줄로 데이터를 나타냅니다.

VGrid와 마찬가지로 여러줄을 나타내고 싶다면  []에 GridItem()을 여러개 입력하면 됩니다.

var rows: [GridItem] {
    [GridItem(.fixed(50)),
     GridItem(.fixed(50))]
}

 

row마다 다른 크기로 데이터를 나타낼 수도 있습니다.

var rows: [GridItem] {
    [GridItem(.fixed(30)),
     GridItem(.fixed(20)),
     GridItem(.fixed(10))]
}

 

 

flexible

var rows: [GridItem] {
    [GridItem(.flexible(maximum: 200))]
}

 

5줄을 다 보여주기 위해 크기를 유연하게 조절합니다.

var rows: [GridItem] {
    [GridItem(.flexible(maximum: 200)),
     GridItem(.flexible(maximum: 200)),
     GridItem(.flexible(maximum: 200)),
     GridItem(.flexible(maximum: 200)),
     GridItem(.flexible(maximum: 200))]
}

 

 

adaptive

가로줄의 갯수가 내가 지정한 것과 상관없이 최대한 많은 데이터를 보여줄 수 있도록 나열합니다.

var rows: [GridItem] {
    [GridItem(.adaptive(minimum: 50))]
}