Flutter for SwiftUI Devs - Aligning components horizontally & vertically

 Aligning components horizontally 

SwiftUI에서는 stack view가 layout에 큰 부분을 차지한다.

1. HStack은 horizontal stack이고,
2. VStack은 vertical stack이다.

Image와 text을 수직으로 두고 싶을 때, 아래와 같이 HStack을 이용하면 된다.

HStack {
  Image(systemName: "globe")
  Text("Hello, world!")
}

 

Flutter는 대신에 Row를 사용한다.

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: const [
    Icon(CupertinoIcons.globe),
    Text('Hello, world!'),
  ],
),

Row 위젯은 children parameter에 List<Widget>을 필요로 한다. 내가 사용하고 싶은 widget들을 나열하면 된다. mainAxisAlignment는 children을 어떻게 배치할지 Flutter에게 알려주는 property인데, 그중 위의 코드에서처럼 MainAxisAlignment.center는 main axis에 대해 가운데 정렬하도록 한다. Row 내부에서 main axis는 horizaontal axis이다.

 

즉, Row의 children에 있는 widget들을 수직으로 나열할 때, 가운데 정렬하게 되는 것이다.

 

 

---

 Aligning components vertically 

반대로 components를 수직으로 정렬하는 방법에 대해 알아보자.

 

SwiftUI에서는 VStack을 이용한다.

VStack {
  Image(systemName: "globe")
  Text("Hello, world!")
}

 

Flutter에서는 Column을 이용한다.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: const [
    Icon(CupertinoIcons.globe),
    Text('Hello, world!'),
  ],
),

여기서 main axis는 vertical axis가 되는 것이다.

---

Components를 수평, 수직으로 두는 방법을 비교해 보았다.

Flutter for SwiftUI Developers