인프런 커뮤니티 질문&답변
작성한 질문수
Column의 가로(crossAxis) 크기 관련
작성
·
287
0
영상에서 의문이 드는 부분이 있어서 문의드립니다.
제가 제대로 공부하지 않고 질문드리는 것일 수도 있어서 걱정되네요..
Container(
color: Colors.black,
width: MediaQuery.of(context).size.width,
child: Column(
...
),
)에서 Container의 width를 변경한 것인데 왜 Column의 가로크기가 변한 건가요?..
저는 width를 늘리면,화면만 검정색으로 칠해지고 Column 영역을 같을 것이라 생각했습니다.
Column의 crossAxis는 부모 위젯에 종속적이여서 그런건가요?
하지만 만약 그렇다면 자식의 크기가 부모 위젯에 종속적이라면 Scaffold 영역 크기는 화면 전체이기 때문에
Scaffold(
backgroundColor: Colors.black,
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
color: Colors.yellow,
height: 50,
width: 50,
)
],
),
);이런 코드의 Column의 가로 길이는 화면 전체의 가로 길이여야 하는게 아닌가요..
답변 1
0
코드팩토리
지식공유자
안녕하세요!
좋은 질문입니다.
Column과 Row는 원래 반대축에서 최대 크기를 차지하려는 습성이 있습니다.
주축은 mainAxisSize로 변경이 가능한 사항이지만 반대축은 불가합니다.
Scaffold와 Container의 차이는 최소 크기에 있습니다.
아래 코드를 이용해서 최소 크기를 출력해보면 Scaffold의 높이와 너비가 모두 0이 나옵니다.
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (_, constraint){
print(constraint.minHeight);
print(constraint.minWidth);
return Container();
},
),
);
}
}Container에 크기를 준다음 마찬가지로 출력을 해본다면 실제 최대 너비가 나오는걸 볼 수 있습니다 (제경우 428)
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: double.infinity,
child: LayoutBuilder(
builder: (_, constraint){
print(constraint.minHeight);
print(constraint.minWidth);
return Container();
},
),
),
);
}
}결국 Scaffold의 경우 최소 높이와 너비가 0이기 때문에 늘어나는게 강제되지 않고 Container의 경우 최소크기가 지정되기 때문에 지정된 크기만큼 Column이 늘어나게됩니다!
궁금했던 점이 완벽하게 해결되었습니다ㅎㅎ 감사합니다!