플러터 배치, 정렬 위젯 정리
Flutter에서 자주 사용하는 Widget과 매개변수를 간단히 정리해보겠다.
Row
‘children’안의 ‘자식들’을 가로배치하는 상자.
Row(
mainAxisAlignment: , // Row에 배치될 Wiget들의 기본축(가로)정렬방식 <enum>
mainAxisSize: , // Row의 기본축(가로)크기 <enum>
crossAxisAlignment: , // Row에 배치될 Widget들의 반대축(세로)정렬방식 <enum>
children: [], // Row에 배치될 Widget들의 List <Widget>[]
)
Column
‘children’안의 ‘자식들’을 세로배치하는 상자
Column(
mainAxisAlignment: , // Column에 배치될 Wiget들의 기본축(세로)정렬방식 <enum>
mainAxisSize: , // Column의 기본축(세로)크기 <enum>
crossAxisAlignment: , // Column에 배치될 Widget들의 반대축(세로)정렬방식 <enum>
children: [], // Column에 배치될 Widget들의 List <Widget>[]
)
SingleChildScrollView
하나의 자식에게 스크롤기능을 부여하는 상자
SingleChildScrollView(
padding: , // 자식에게 적용될 Padding. <EdgeInsetsGeometry>
primary: , // 부모의 PrimaryScrollController와 연결된 기본 스크롤 뷰인지 여부.
scrollDirection: , // 스크롤할 방향. <Axis>
physics: , // 스크롤 가능한 Widget의 물리적 특성. <ScrollPhysics>
child: , // 스크롤 기능을 부여할 자식. <Widget>
),
ListView
선형으로 정렬되어 스크롤 가능한 Widget목록
SingleChildScrollView + Column을 사용하면, 자식들을 모두 랜더링 하는 반면에, ListView를 사용하면 화면에 보여지는 개수의 자식들만 우선적으로 랜더링을 하고, 나머지는 스크롤을 기다린다.
ListView(
padding: , // 자식에게 적용될 Padding. <EdgeInsetsGeometry>
primary: , // 부모의 PrimaryScrollController와 연결된 기본 스크롤 뷰인지 여부.
scrollDirection: , // 스크롤할 방향. <Axis>
physics: , // 스크롤 가능한 Widget의 물리적 특성. <ScrollPhysics>
children: [], // ListView에 배치될 Widget들의 List <Widget>[]
)
GridView
스크롤 가능한 바둑판식 Widget배열
// 사용자 정의 SliverGridDelegate를 사용해 스크롤 가능한 바둑판식 Widget배열.
GridView(
padding: , // 자식에게 적용될 Padding. <EdgeInsetsGeometry>
primary: , // 부모의 PrimaryScrollController와 연결된 기본 스크롤 뷰인지 여부.
scrollDirection: , // 스크롤할 방향. <Axis>
physics: , // 스크롤 가능한 Widget의 물리적 특성. <ScrollPhysics>
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: , // GridView에 배치될 Widget들의 갯수 <int>
crossAxisSpacing: , // GridView에 배치될 Widget간의 열방향 Padding
mainAxisSpacing: , // GridView에 배치될 Widget간의 행방향 Padding
childAspectRatio: , // GridView에 배치될 Widget들의 width / height 비율 <double>
),
children: [], // GridView에 배치될 Widget들의 List <Widget>[]
),
// .count를 사용해 고정된 수의 타일이 있는 스크롤 가능한 바둑판식 Widget배열.
GridView.count(
padding: , // 자식에게 적용될 Padding. <EdgeInsetsGeometry>
primary: , // 부모의 PrimaryScrollController와 연결된 기본 스크롤 뷰인지 여부.
scrollDirection: , // 스크롤할 방향. <Axis>
physics: , // 스크롤 가능한 Widget의 물리적 특성. <ScrollPhysics>
crossAxisSpacing: , // GridView에 배치될 Widget간의 열방향 Padding
mainAxisSpacing: , // GridView에 배치될 Widget간의 행방향 Padding
crossAxisCount: , // GridView에 배치될 Widget들의 갯수 <int>
childAspectRatio: , // GridView에 배치될 Widget들의 width / height 비율 <double>
children: [], // GridView에 배치될 Widget들의 List <Widget>[]
)