플러터 배치, 정렬 위젯 정리

플러터 배치, 정렬 위젯 정리

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>[]
)

© 2023. All rights reserved.

by SoftyChoo