본문 바로가기
Flutter/Flutter FAQ

Flutter 플러터에서 shrinkWrap 속성은 무엇을 하는가요?, What does the shrinkWrap property do in Flutter?

by 베타코드 2023. 6. 1.
반응형

질문


Flutter에 새로 왔고 이 기술을 배우기를 매우 열망합니다. ListView에서 shrinkWrap 속성의 작동 방식을 이해할 수 없습니다. Flutter 문서를 이해할 수 없었습니다.


답변


ListView (그리고 GridView, PageViewCustomScrollView)는 일반적으로 부모 요소가 제공하는 사용 가능한 공간을 모두 채우려고 시도합니다. 그러나 목록 항목이 더 적은 공간을 필요로 할 때에도 마찬가지입니다.

shrinkWrap: true를 사용하면 ListView가 필요한 공간만 차지하도록이 동작을 변경할 수 있습니다(항목이 더 많을 때에도 스크롤링됩니다).

다음 예제를 확인하세요:

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: Container(
            margin: EdgeInsets.all(32),
            decoration: BoxDecoration(border: Border.all(color: Colors.red)),
            child: ListView(
              shrinkWrap: false,
              children: <Widget>[
                ListTile(title: Text('Item 1')),
                ListTile(title: Text('Item 2')),
                ListTile(title: Text('Item 3')),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

shrinkWrap: false를 사용할 때:

without shrinkWrap

shrinkWrap: true를 사용할 때:

with shrinkWrap

AlertDialog에서 이것을 사용할 수 있습니다: 항목이 적을 때는 대화 상자를 가능한 한 작게 만듭니다. 항목이 많을 때는 화면 높이를 채우고 목록을 스크롤할 수 있도록 합니다:

Dialog

Dialog

반응형

댓글