[Flutter basic] Column 을 이용해 원하는 위치에 UI 그리기

Column 사용해 원하는 위치에 UI 그리기

 

Column 은 쉽게 세로로 UI를 그릴때 사용된다.

그리고 싶은 UI의 영역을 잡았을때 영역이 위 아래로 나뉜다면 

그 나뉜 두개의 영역을 Column 안에 두면 된다.

 

body: Container(
        margin: EdgeInsets.all(10),
        child: Column(
          children: [
            Container(
              height: 30,
              width: 200,
              color: Colors.red,
              child: Text("Container1"),
            ),
            Container(
              height: 60,
              width: 200,
              color: Colors.blue,
              margin: EdgeInsets.only(top: 20),
              child: Text("Container2"),
            ),
          ],
        ),
      ),

 

위와같이 2개의 컨테이너를 Column - children 안에 넣어주면 된다.

children은 배열 형식으로 여러 위젯들이 들어갈수 있다.

 

 

Column 에는 다음과 같은 arguments들이 있다.

children 안에는 아까 사용했듯이 Column 안에 들어갈 위젯들을 넣으면되고

가장 많이 쓰는 MainAxisAlignment / CrossAxisAlignment를 설명해 보려한다.

Column 을 그릴때 MainAxis란 바로 세로 방향을 의미한다.

반대로 CrossAxis는 가로방향을 의미한다.

 

나중에 설명할 Row 에서는 반대로 MainAxis 가 가로 방향이고

CrossAxis가 세로 방향이다.

 

쉽게 Column은 말 그대로 UI를 세로 방향으로 그리는 방법이기 떄문에

Main 방향이 세로 방향이라고 생각 하면 쉽다.

 

 

 

먼저 MainAxisSize를 보면 MainAxisSize.max 라고 기본값이 정해져 있다.

이말은 Column 이 세로방향으로 가장 큰 크기를 그릴것 이라는것이다.

아까 그린 UI에서 부모 Container에 색깔을 지정해주면

Column 의 사이즈 떄문에 가장 큰 크기를(디바이스 높이) 가졌음을 볼수 있다.

body: Container(
        margin: EdgeInsets.all(10),
        color: Colors.yellow,
        child: Column(
          children: [
            Container(
              height: 30,
              width: 200,
              color: Colors.red,
              child: Text("Container1"),
            ),
            Container(
              height: 60,
              width: 200,
              color: Colors.blue,
              margin: EdgeInsets.only(top: 20),
              child: Text("Container2"),
            ),
          ],
        ),
      ),

 

 

AxisAlignment는 UI를 그리는데 아주 많이 쓰이므로 잘 활용해야한다.

 

 

MainAxisAlignment는
세로의 기준에서 children들의 정렬을 어떻게 할지에 대한 설정값이다.

6가지의 방법이 있는데 

위젯들을 세로 기준선에서 어떻게 그릴지에 대한 선택값이다.

start면 시작 부분에 end는 끝부분에 center는 가운데 

spaceBetween은 위젯(children) 들을 각각 띄어서 그려준다.

 

start가 기본값으로 들어가있으므로 위에 그렸던 UI 처럼 빨간,파란 컨테이너들이 위로 몰렸음을 확인할수 있다.

나는 이 둘의 사이를  띄우기 위해 SpaceBetween을 사용해보겠다.

 

450

SpaceBetween을 쓰면 둘 사이에 간격을 가능한한 많이 줄것이다.

만약 Column안에 들어간 children 위젯이 3개라면 혹은 4개라면 역시

각각 위젯의 간격들이 들어갈 것이다.(가능한 가장 큰 간격)

 

 

반대로 CrossAxisAlignment 은 가로의 기준선에서 위젯을 그리는 방법이다.

지금같은 경우는 가로의 기준에서 Container가 가장 큰 영역을 맡고 있기 떄문에

부모의 width를 넓히고 테스트 해보도록 하겠다.

body: Container(
        margin: EdgeInsets.all(10),
        color: Colors.yellow,
        width: 400,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container(
              height: 30,
              width: 200,
              color: Colors.red,
              child: Text("Container1"),
            ),
            Container(
              height: 60,
              width: 200,
              color: Colors.blue,
              margin: EdgeInsets.only(top: 20),
              child: Text("Container2"),
            ),
            Container(
              height: 60,
              width: 200,
              color: Colors.green,
              margin: EdgeInsets.only(top: 20),
              child: Text("Container3"),
            ),
            Container(
              height: 60,
              width: 200,
              color: Colors.pink,
              margin: EdgeInsets.only(top: 20),
              child: Text("Container4"),
            ),
          ],
        ),
      ),

 

450

crossAxisAlignment를 지정을 안하니 가운데로 왔음을 볼수있다.

만약내가 이 자식 컨테이너들을 왼쪽으로 몰거나(start) 오른쪽으로 몰거나(end) 가운데로 두고싶을때(center)

crossAxisAlignment 지정을 해주면 된다!

 

그런데 crossAxisAlignment 선택값 옵션중에 stretch라는 것도 있다.

이는 children 위젯들의 가로 크기를 늘려버린다.

위젯의 크기가 더 작게 지정되어있어도 (지금처럼) 무시되고 가로영역 모두를 차지한다.

          crossAxisAlignment: CrossAxisAlignment.stretch,