쥐수의 공부노트
Flutter - Column, Row 테이블 구성 본문
Container 위젯
Container 위젯은 HTML의 div 태그 용도처럼 광범위하게 쓰인다.
속성은 margin, border, padding, child(content) 등을 가진다.
Row 위젯
Row 위젯은 한 행에 여러가지 열의 위젯들을 배치할 때 사용한다.
children 속성에 배열 형태로 위젯들을 지정 가능
여러가지 속성 중 많이 쓰이는 것으로는 mainAxisAlignment이다.
row 메인축의 정렬을 지정할 수 있어서, start(시작 정렬), end(끝 정렬), spaceAround(맨앞과 맨뒤를 포함하여 동일한 공간을 주는 정렬),
spaceBetween(요소 사이에만 동일한 공간을 주는 정렬),spaceEvenly(모든 부분에 동일한 공간을 주는 정렬)등이 있다.
Column 위젯
Row 위젯이 가로행에 여러 열을 배치하는 것이였다면, Column 위젯은 한 열에 여러 행을 배치하는 목적으로 쓰인다.
가로 행을 정렬하기 위해 crossAxisAlignment를 사용한다.
mainAxisAlignment와 CrossAxisAlignment의 차이
이 둘은 서로 Row와 Column에서 반대로 쓰인다.
Row에서는 MainAxis = 가로 행, CrossAxis = 세로 열
Column에서는 MainAxis = 세로 열, CrossAxis = 가로 행
중요하니 계속 공부하며 인지하기!
해당 글의 전체 코드 : https://github.com/land-waters/flutter-study/blob/chap02/flutter_application_1/lib/main.dart
'flutter-study' 카테고리의 다른 글
Flutter - ListView 효율적으로 사용하기 (0) | 2024.07.02 |
---|---|
Flutter - ListView 사용하기 (0) | 2024.07.01 |
Flutter - GestureDetector 사용하여 터치 감지하기 (0) | 2024.07.01 |
Flutter - Stack을 사용하여 여러 위젯 중첩하기 (0) | 2024.07.01 |
Flutter - Hello World 출력 및 Scaffold 뼈대 구성 (0) | 2024.07.01 |