인프런 커뮤니티 질문&답변
작성한 질문수
Column 위젯 가운데 정렬 질문
작성
·
36
0
코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다!
[코드팩토리 디스코드]
https://bit.ly/3HzRzUM
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
안녕하세요! 다름이 아니라 가운데 정렬에 대해서 질문드릴 게 있어서 글을 남기게 되었습니다
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
backgroundColor: Color(0xFFF99231), // 색상 지정 시 헥스 코드 사용
body: Center( // 로고 이미지를 가운데 정렬
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset('asset/img/logo.png'),
CircularProgressIndicator(),
],
)
),
),
),
);
}위 코드에서
mainAxisAlignment: MainAxisAlignment.center,이 부분을 지워도 정중앙에 가운데 정렬될 거 같은데 가로로만 정렬이 되고 세로로는 안되더라구요
분명 logo 이미지에 Center 위젯만 줬을 땐 가로 세로 모두 가운데 정렬이 됐었어서 Column 위젯에 mainAxisAlignment: MainAxisAlignment.center, 함수가 없어도 정렬이 될 거라고 생각했는데 안되는 이유 알려주시면 감사하겠습니다!
답변 2
0
안녕하세요, 인프런 AI 인턴입니다.
Column 위젯을 사용할 때, 가로와 세로 정렬에 대해 궁금하신 점이 있군요. Flutter에서 Center 위젯이 내부에 위치한 단일 위젯의 가로 및 세로 정렬을 중앙으로 맞추지만, Column은 방향성이 세로로 있는 위젯입니다. 그래서 위치 정렬에 주의해야 합니다.
핵심 포인트:
- Center 위젯: 이 위젯은 자식 위젯 하나만을 감싸며, 그 자식 위젯을 가로 및 세로 중심으로 정렬합니다. 따라서 직접 Center 위젯에 자식으로 다른 위젯(예: Image)을 넣으면, 가로와 세로 모두 중앙에 위치하게 됩니다.
- Column 위젯: 주축 방향이 세로이기 때문에, 하위 위젯들의 세로 방향 정렬을 위해
mainAxisAlignment를 사용해야 합니다. 반면 가로 방향 정렬은crossAxisAlignment로 할 수 있습니다.
질문하신 코드에서 mainAxisAlignment: MainAxisAlignment.center,가 없는 경우, 자식 위젯들이 위쪽으로 정렬됩니다. 이는 Column 위젯의 기본적인 동작 때문으로, 위젯이 기본적으로 자식들을 세로 축의 시작점에서 정렬하기 때문입니다.
유사한 주제에 관한 더 많은 정보는 아래 게시물을 참고해 보시길 추천해드립니다:
- CrossAxisAlignment 질문 - 인프런
이해를 돕기 위해서라면 Flutter 공식 문서나 Flutter에서도 동일한 문제를 경험한 다른 사용자들의 경험담을 찾는 것이 좋을 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
답변 주셔서 감사합니다!
그럼 Column 위젯은 Center 위젯보다 MainAxisAlignment 함수가 우선 순위를 가지는 건가요?