overview.
- ListView.builder 란?
- 예제 코드 - todo 리스트
<> 문서
https://api.flutter.dev/flutter/widgets/ListView-class.html
1. ListView.builder 란?
ListView 는 가장 일반적으로 사용되는 스크롤 위젯입니다. 스크롤 방향으로 자식을 차례로 표시합니다. 교차축에서 하위 항목은 ListView 를 채워야 합니다 .
null이 아닌 경우 itemExtent 는 하위 항목이 스크롤 방향으로 지정된 범위를 갖도록 강제합니다.
null이 아닌 경우 프로토타입Item은 하위 요소가 스크롤 방향에서 지정된 위젯과 동일한 범위를 갖도록 강제합니다.
itemExtent 또는 프로토타입Item을 지정 하는 것이 하위 항목이 자신의 범위를 결정하도록 하는 것보다 더 효율적입니다. 예를 들어 스크롤 위치가 급격하게 변경되는 경우 스크롤 기계는 하위 항목 범위에 대한 사전 지식을 활용하여 작업을 저장할 수 있기 때문입니다.
itemExtent 및 PrototypeItem을 모두 지정할 수는 없으며 둘 중 하나만 지정하거나 전혀 지정할 수 없습니다.
ListView를 구성하는 데에는 네 가지 옵션이 있습니다 .
- 기본 생성자는 자식의 명시적인 List<Widget>을 사용합니다. 이 생성자는 하위 수가 적은 목록 보기에 적합합니다. 목록 을 구성하려면 실제로 표시되는 하위 항목만이 아니라 목록 보기에 표시될 수 있는 모든 하위 항목에 대해 작업을 수행해야 하기 때문입니다.
- ListView.builder 생성자는 요청에 따라 하위 항목을 빌드하는 IndexedWidgetBuilder 를 사용합니다 . 이 생성자는 실제로 표시되는 하위 항목에 대해서만 빌더가 호출되므로 하위 항목 수가 많거나 무한한 목록 보기에 적합합니다.
- ListView.separated 생성자는 두 개의 IndexedWidgetBuilder 를 사용합니다 . 즉 , 요청 시 하위 항목을 빌드하고 유사하게 하위 항목 사이에 나타나는 구분 기호 하위를 빌드합니다 . 이 생성자는 고정된 수의 하위 항목이 있는 목록 보기에 적합합니다.itemBuilderseparatorBuilder
- ListView.custom 생성자 는 하위 모델의 추가 측면을 사용자 정의하는 기능을 제공하는 SliverChildDelegate 를 사용합니다 . 예를 들어 SliverChildDelegate 는 실제로 표시되지 않는 어린이의 크기를 추정하는 데 사용되는 알고리즘을 제어할 수 있습니다.
스크롤 뷰의 초기 스크롤 오프셋을 제어하려면 ScrollController.initialScrollOffset 속성 이 설정된 컨트롤러를 제공하세요 .
기본적으로 ListView는 MediaQuery 의 패딩 으로 표시된 부분적인 방해를 피하기 위해 목록의 스크롤 가능한 끝 부분을 자동으로 패딩합니다 . 이 동작을 방지하려면 0 패딩 속성으로 재정의하세요.
라고 합니다.
2. 예제 코드 - todo 리스트
Model
// Model 클래스
class TodoItem {
String title;
bool isDone;
TodoItem({required this.title, required this.isDone});
@override
String toString() {
return 'TodoItem{title: $title, isDone: $isDone}';
}
}
ViewModel
// ViewModel
import 'package:my_todo_mvvm/models/todo_item.dart';
class TodoListViewModel {
// 화면에 사용될 데이터
List<TodoItem> _items = []; // private
// getter
List<TodoItem> get items => _items;
// 리스트의 TodoItem 객체를 추가하는 메서드 만들기
void addItem(String title) {
_items.add(TodoItem(title: title, isDone: false));
}
// 반전
void toggleItem(TodoItem todo) {
todo.isDone = !todo.isDone;
}
}
View
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:my_todo_mvvm/view_models/todo_list_view_model.dart';
// View 클래스
class TodoListView extends StatefulWidget {
const TodoListView({super.key});
@override
State<TodoListView> createState() => _TodoListViewState();
} // end of class
class _TodoListViewState extends State<TodoListView> {
final TextEditingController _controller = TextEditingController();
final TodoListViewModel listViewModel = TodoListViewModel(); // ViewModel
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(15.0),
child: Column(
children: [
TextField(
controller: _controller,
decoration: InputDecoration(
hintText: "Enter todo item..",
suffix: IconButton(
icon: Icon(Icons.add),
onPressed: () {
setState(() {
// 화면을 재 빌드 - build() 재 호출
print('${_controller.text}');
listViewModel.addItem(_controller.text);
_controller.clear();
});
},
)),
),
// 리스트 시작
Expanded(
child: ListView.builder(
// ListView 를 총 몇개 만들 것이냐 ( 필수 )
itemCount: listViewModel.items.length,
// itemBuilder ( 필수 ) context 와 index 를 가져온다.
itemBuilder: (context, index) {
var item = listViewModel.items[index];
// 두개의 인수값을 받아서 위젯을 리턴 시키면 된다.
return ListTile(
title: Text(item.title),
// trailing - 오른쪽에 배치 , leading - 왼쪽에 배치 (중동 지역은 반대)
trailing: Checkbox(
value: item.isDone,
onChanged: (value) {
print('value $value');
// 화면을 재 빌드 - build() 재 호출
setState(() {
listViewModel.toggleItem(item);
});
},
),
);
},
),
)
],
),
);
}
}
화면 구현
'flutter & dart' 카테고리의 다른 글
flutter & dart - ListTile 위젯 (0) | 2024.04.01 |
---|---|
flutter & dart - RichText (0) | 2024.04.01 |
flutter & dart - TextEditingController (0) | 2024.03.21 |
flutter & dart - Flutter MVVM 패턴 (0) | 2024.03.19 |
flutter & dart - dart:convert 파싱 (parsing) (0) | 2024.03.15 |