일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- UNO
- java
- aduino
- stream
- mfc
- Overloading
- Read
- Barcode
- Binary
- compare
- wpf
- length
- inheritance
- Pointer
- Class
- file access
- flutter
- Android
- parameter
- public
- SERIAL
- digitalRead
- sensor
- memory
- atmega328
- Unity
- Contour
- APP
- Encapusulation
- preprocessing
- Today
- Total
폴크(FOLC)
Flutter App - ListView 본문
# 스크롤 위젯
> 데이터를 순차적으로 표현
# 동작 방식 ( 총 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 의 패딩이 나타내는 부분적인 방해를 방지
'Flutter, Android > Flutter 사용법' 카테고리의 다른 글
Flutter App - 데이터 전달 ( 외부 요청 ) (0) | 2021.11.10 |
---|---|
Android Studio - 개발 환경 구성(Portable) (0) | 2021.11.06 |
Flutter App - 예외처리5 (0) | 2021.11.05 |
Flutter App - 동일 Code Format 적용 (0) | 2021.11.03 |
Flutter App - 자주 이용 되는 툴 (0) | 2021.10.31 |