플러터 위젯 정리 _body

정태희·2021년 8월 30일
0

Flutter 위젯 정리

목록 보기
2/2
post-thumbnail

1. 머리글

Flutter에서 자주 사용하는 Widget과 매개변수(쉽게말해 옵션)을 정리해보자.
이번에는 앱의 body에서 각 Widget을 배치하고 정렬하는 Widget들을 정리한다.

2. Row

'children'안의 '자식들'을 가로배치하는 상자.

Row(
  mainAxisAlignment: ,  // Row에 배치될 Wiget들의 기본축(가로)정렬방식 <enum>
  mainAxisSize: ,       // Row의 기본축(가로)크기 <enum>
  crossAxisAlignment: , // Row에 배치될 Widget들의 반대축(세로)정렬방식 <enum>
  children: [],         // Row에 배치될 Widget들의 List <Widget>[]
)

3. Column

'children'안의 '자식들'을 세로배치하는 상자.

Column(
  mainAxisAlignment: ,  // Column에 배치될 Wiget들의 기본축(세로)정렬방식 <enum>
  mainAxisSize: ,       // Column의 기본축(세로)크기 <enum>
  crossAxisAlignment: , // Column에 배치될 Widget들의 반대축(세로)정렬방식 <enum>
  children: [],         // Column에 배치될 Widget들의 List <Widget>[]
)

4. SingleChildScrollView

하나의 자식에게 스크롤기능을 부여하는 상자.

SingleChildScrollView(
  padding: ,          // 자식에게 적용될 Padding. <EdgeInsetsGeometry>
  primary: ,          // 부모의 PrimaryScrollController와 연결된 기본 스크롤 뷰인지 여부.
  scrollDirection: ,  // 스크롤할 방향. <Axis>
  physics: ,          // 스크롤 가능한 Widget의 물리적 특성. <ScrollPhysics>
  child: ,            // 스크롤 기능을 부여할 자식. <Widget>
),

5. ListView

선형으로 정렬되어 스크롤 가능한 Widget목록.

SingleChildScrollView + Column을 사용하면, 자식들을 모두 랜더링한다.
반면에, ListView를 사용하면 화면에 보여지는 갯수의 자식들만 우선적으로 랜더링을 하고, 나머지는 스크롤을 기다린다.

ListView(
  padding: ,          // 자식에게 적용될 Padding. <EdgeInsetsGeometry>
  primary: ,          // 부모의 PrimaryScrollController와 연결된 기본 스크롤 뷰인지 여부.
  scrollDirection: ,  // 스크롤할 방향. <Axis>
  physics: ,          // 스크롤 가능한 Widget의 물리적 특성. <ScrollPhysics>
  children: [],       // ListView에 배치될 Widget들의 List <Widget>[]
)

6. 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>[]
)
profile
웹/앱 개발자??

0개의 댓글