Flutter - Row, Column 정렬 (MainAxisAlignment, CrossAxisAlignment 사용법) + 그외 꿀팁

Row는 기본적으로 위젯간의 수평적인 배치를,

Column은 위젯간의 수직적인 배치를 위해 사용한다.

 

A Column

A Row : child1 > B Column ---------------------------------------------------------------------------------- ----------------------------------------------------------------------------------

A Row : child2 > C Column ----------------------------------------------------------------------------------

 

예를 들어 화면을 위와 같이 구성하고 싶으면

 

A라는 큰 컬럼 안에 A라는 큰 로우와 하단의 위젯이 배치되겠고,

A Row의 첫번째 child에 B Column을 배치, A Row의 두번째 child에 C Column을 배치하는 식이겠다.

코드로는 대충 이런 식이지 않을까?

Column (  // 큰 Column = A Column
	children: [
    	Row (  // 큰 Row = A Row
        	children: [
            	Column ( // B Column
                	children: [
                    	'위젯1',
                        '위젯2',
                        '위젯3'
                    ]
                ),
                Column ( // C Column
                	children: [
                    	'위젯1',
                        '위젯2'
                    ]
                ) 
            ]
        )
    ]
)

 

Row에서는 MainAxis가 수평상의 정렬과 관련되고, CrossAxis가 수직상의 정렬과 관련된다.

한편 Column에서는 MainAxis가 수직상의 정렬과 관련되고, CrossAxis가 수평상의 정렬과 관련된다.

 

번외)

Container에서 Overflow되는 부분을 처리하는 식으로 화면을 만들고 싶을 때

"clipBehavior: Clip.hardEdge" 옵션을 이용하면 됨!

 

Overflow되는 처리는 아래 코드와 같이 처리할 수도 있다.

Transform.scale(
	scale: '확대할 수치',
    child: Transform.translate(
    	offset: const Offset('X축 이동 수치', 'Y축 이동 수치')
        ~
        )
 )

 

 

모든 내용은 노마드 코더의 무료 강의 수강 후 인상적인 내용만 기록 중입니다.