반응형
250x250
Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Archives
Today
Total
관리 메뉴

폴크(FOLC)

Flutter App - ListView 본문

Flutter, Android/Flutter 사용법

Flutter App - ListView

folcjin 2022. 3. 17. 14:00
728x90
반응형

# 스크롤 위젯
   > 데이터를 순차적으로 표현

# 동작 방식 ( 총 4가지 )
   > default 생성자 - child 로 List<Widget> 을 호출하여 동작
      - 목록 보기에 표시될 수 있는 자식에 대해 작업을 수행
      -
데이터량이 작은 경우에 이용
   > 소스 코드
ListView(children: <Widget>[
Container(height: 50, color: Colors.amber[600], child: const Center(child: Text('Entry A')), ),
Container(height: 50, color: Colors.amber[500], child: const Center(child: Text('Entry B')), ),
],)

   > builder 생성자 - child 를 빌드하는 IndexedWidgetBuilder 를 호출하여 동작
      - 목록 보기에 표시되 고 있는 자식에 대해 작업을 수행 ( 빌더가 호출됨 )
      - 데이터량이 많은 경우에 이용
   > 소스 코드
final List<String> entries = <String>['A', 'B'];
final List<int> colorCodes = <int>[600, 500];
ListView.builder(itemCount: entries.length,
itemBuilder: (BuildContext context, int index) {
return Container(height: 50, color: Colors.amber[colorCodes[index]], child: Center(child: Text('Entry ${entries[index]}')),);
});

   > separated 생성자 - child 를 빌드하는 2개의 IndexedWidgetBuilder 를 호출하여 동작
      - 데이터 항목을 separatorBuilder 추가하고 마찬가지로 데이터 사이에 나타나는 구분 기호를 생성
      - 고정된 수의 데이터량이 있는 경우에 이용
   > 소스 코드
final List<String> entries = <String>['A', 'B'];
final List<int> colorCodes = <int>[600, 500];
ListView.separated(itemCount: entries.length,
itemBuilder: (BuildContext context, int index){
return Container(height: 50, color: Colors.amber[colorCodes[index]], child: Center(child: Text('Entry ${entries[index]}')),);
 },
separatorBuilder: (BuildContext context, int index) => const Divider(),
);

   > custom 생성자 - 사용자 지정할 수 있는 기능을 제공하는 SliverChildDelegate 를 호출하여 동작
     - 실제로 표시되지 않는 자식의 크기를 추정하는 데 사용되는 알고리즘 제어
   > 소스 코드
ListView(shrinkWrap: true, padding: const EdgeInsets.all(20.0),
children: const <Widget>[
Text("I'm dedicating every day to you"),
Text('Domestic life was never quite my style'), ],
)

# 추가 설정
   > 스크롤 뷰의 초기 스크롤 오프셋 제어
      - ScrollController.initialScrollOffset 속성에 값 설정
   > ListView 는 목록의 스크롤 가능한 말단을 자동으로 채움
      - MediaQuery 의 패딩이 나타내는 부분적인 방해를 방지

728x90
반응형
사업자 정보 표시
사업자 등록번호 : -- | TEL : --