중앙 정렬과 정렬 위젯

Flitter는 부모 컨테이너 내에서 자식 위젯의 위치를 제어하기 위한 두 가지 주요 위젯을 제공합니다: Center와 Align입니다.

Center 위젯

Center 위젯은 자식을 자신의 중앙에 배치합니다. 이는 Align에 Alignment.center를 적용한 것의 편리한 축약형입니다.

Center({
  child: Text("중앙 정렬된 콘텐츠")
})

Align 위젯

Align 위젯은 지정된 정렬에 따라 자식을 배치합니다. 이는 더 정밀한 위치 제어를 제공합니다.

Align({
  alignment: Alignment.topRight,
  child: Text("오른쪽 상단 콘텐츠")
})

Alignment 클래스

Alignment 클래스는 다음과 같은 미리 정의된 정렬 상수를 제공합니다:

• Alignment.topLeft - 왼쪽 상단
• Alignment.topCenter - 상단 중앙
• Alignment.topRight - 오른쪽 상단
• Alignment.centerLeft - 왼쪽 중앙
• Alignment.center - 중앙
• Alignment.centerRight - 오른쪽 중앙
• Alignment.bottomLeft - 왼쪽 하단
• Alignment.bottomCenter - 하단 중앙
• Alignment.bottomRight - 오른쪽 하단

모범 사례

1. 적절한 위젯 선택:

   • 단순 중앙 정렬에는 Center 사용
   • 다른 정렬이 필요할 때는 Align 사용
   • 추가 스타일링이 필요한 경우 alignment 속성이 있는 Container 고려

2. 부모 크기 고려사항:

   • 부모 위젯의 크기가 정의되어 있는지 확인
   • 정렬은 부모의 경계를 기준으로 작동함을 인지

3. 다른 위젯과의 조합:

   • 추가 스타일링을 위해 Container와 조합 가능
   • 겹치는 레이아웃을 위해 Stack 내에서 잘 작동

4. 성능:

   • 중앙 정렬 시 Align보다 Center 선호
   • 불필요한 정렬 위젯 중첩 피하기

일반적인 사용 사례

1. 중앙 정렬된 콘텐츠:

   Container({
     color: "lightblue",
     child: Center({
       child: Text("중앙 정렬된 콘텐츠")
     })
   })
   

2. 모서리 위치 지정:

   Container({
     child: Align({
       alignment: Alignment.topRight,
       child: Text("모서리 콘텐츠")
     })
   })
   

3. 복합 레이아웃:

   Stack({
     children: [
       Center({
         child: Text("중앙 콘텐츠")
       }),
       Align({
         alignment: Alignment.bottomRight,
         child: Text("하단 오른쪽 콘텐츠")
       })
     ]
   })
   

팁과 트릭

1. 반응형 정렬:

   • 화면 크기에 따라 다른 정렬을 사용하는 것을 고려
   • 반응형 레이아웃을 위해 MediaQuery와 조합

2. 정렬 디버깅:

   • 정렬 범위를 시각화하기 위해 색상 컨테이너 사용
   • 정렬 이해를 위해 디버그용 테두리 추가

3. 중첩 정렬:

   • 정렬 위젯은 복잡한 레이아웃을 위해 중첩될 수 있음
   • 과도한 중첩 피하기 위해 주의