[Flutter basic] Row를 활용해 원하는 위치에 UI 그리기

Row는 UI를 세로로 배치하고 싶을떄 사용한다.

Column 과 유사하게 사용하고 설정값또한 비슷하다.

body: Container(
        margin: EdgeInsets.all(10),
        color: Colors.yellow,
        child: Row(
          children: [
            Container(
              height: 60,
              color: Colors.red,
              child: Text("Container1"),
            ),
            Container(
              height: 60,
              color: Colors.blue,
              child: Text("Container2"),
            ),
            Container(
              height: 60,
              color: Colors.green,
              child: Text("Container3"),
            ),
            
          ],
        ),
      ),

 

Row의 arguments들도 Coulmn들과 유사하다.

가장 중요한 AxisAlignment에대해 알아보자.

 

MainAixsSize는 Row 에서는 가로 길이를 의미한다.

Column과 유사하게 가로길이가 기본값으로 가장 크게 설정되어있다. (MainAxisSize.max)

그래서 Row를 감싸고 있는 Container 의 크기가 (노란색 컨테이너)

디바이스의 너비 만큼 설정 되어 있음을 볼수있다.

 

MainAxisAlignment는 가로 기준선상의 정렬을 의미한다.

Row는 세로로 위젯들을 배치하는 것이니 세로 가 Main이라고 생각하면 된다.

MainAxisAlignment.start는 가장 왼쪽으로 UI가 몰리고

end 는 가장 오르쪽으로 UI들이 몰릴것이다.

좌측 : end   / 우측 : spaceBetween

 

반대로 crossAxisAlignment는 가로기준선상 정렬이다.

위와같은 예는 자식 컨테이너들이 가로 기준선을 모두 차지하고 있으므로

노란색 컨테이너의 높이를 늘리고 진행해야 차이를 확인 할수 있다.

 

 

 

crossAxisAlignment 이 지정되지 않은 상태에서 이렇게 가로 기준선상 가운데에 정렬이 되어있다.

만약 이것을 위로 몰거나 아래로 몰고 싶다면 crossAxisAlignment 을 설정 해주면 된다.

 

나는 위로 몰아보도록 하겠다.

 body: Container(
        margin: EdgeInsets.all(10),
        color: Colors.yellow,
        height: 200,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container(
              height: 60,
              color: Colors.red,
              child: Text("Container1"),
            ),
            Container(
              height: 60,
              color: Colors.blue,
              child: Text("Container2"),
            ),
            Container(
              height: 60,
              color: Colors.green,
              child: Text("Container3"),
            ),
          ],
        ),
      ),