Flutter 기초 - Widget상하 좌우 배치 (12)

 

Flutter 기초 - Widget상하 좌우 배치 (12)

 

Column과 Row는 수직 및 수평 방향으로 자식 위젯들을 정렬하고 배치하는데 사용된다.

 

1. Column

 - 자식들을 수직 방향으로 배열한다. 

mainAxisSize	Column높이를 결정한다. MainAxisSize.min MainAxisSize.max
mainAxisAlignment	주축(수평)에 대한 자식 위젯들의 정렬 방식을 결정한다. MainAxisAlignment.start MainAxisAlignment.end MainAxisAlignment.center MainAxisAlignment.spaceBetween
crosAxisAlignment	교차 축(수직)에 대한 자식 위젯들의 정렬 방식으로 결정한다. CrossAxisAlignment.start CrossAxisAlignment.end CrossAxisAlignment.center CrossAxisAlignment.stretch

 

2. Row

 - 자식들을 수평 방향으로 배열한다.

mainAxisSize	Row의 너비를 결정한다. MainAxisSize.min MainAxisSize.max
mainAxisAlignment	주축(수평)에 대한 자식 위젯들의 정렬 방식을 결정한다.
crossAxisAlignment	교차축(수직)에 대한 자식 위젯들의 정렬 방식을 결정한다.

 

Container(
  width: double.infinity,  // 가로 방향으로 무한대의 너비를 가짐
  //child: Row(
  child: Column(
    mainAxisSize: MainAxisSize.max,  // 수직 방향으로 가능한 모든 공간을 차지
    mainAxisAlignment: MainAxisAlignment.center,  // 수직 방향 중앙에 자식 위젯 배치
    crossAxisAlignment: CrossAxisAlignment.center,  // 수평 방향 중앙에 자식 위젯 배치
    children: [
      Container(
        width: 100,
        height: 80,
        color: Colors.red,
        child: Text('Container1'),
      ),
      Container(
        width: 100,
        height: 80,
        color: Colors.green,
        child: Text('Container2'),
      ),
      Container(
        width: 100,
        height: 80,
        color: Colors.blue,
        child: Text('Container3'),
      ),
    ],
  ),
);