안 드 로 이 드 는 flutter 의 ListView 를 사용 하여 스크롤 목록 의 예제 코드 를 구현 합 니 다.

현재 앱 을 엽 니 다.예 를 들 어 톱기사,웨 이 보 등 은 모두 긴 목록 이 있 습 니 다.우리 가 계속 미 끄 러 지면 서 창 안의 내용 도 계속 업 데 이 트 됩 니 다.오늘 은 Flutter 로 이 효 과 를 실현 해 보 겠 습 니 다.

여기 서 표현 하 는 것 은 고정된 길이 의 용기 가 있 는 것 과 같 습 니 다.그 다음 에 초과 한 내용 은 보이 지 않 습 니 다.화면 을 위로 또는 아래로 미 끄 러 뜨 릴 때 만 창 밖 에 보이 지 않 는 내용 이 창 에 나타 납 니 다.웹 개발 시 용기 에 스타일 이 필요 합 니 다.

overflow: auto;

Flutter 로 이 루어 지 려 면 간단 합 니 다.Flutter 가 ListView 구성 요 소 를 제공 하기 때 문 입 니 다.
ListView 는 주로 다음 과 같은 몇 가지 사용 방식 이 있 습 니 다.

ListView

ListView.builder

ListView.separated

ListView.custom

ListView
ListView 는 가장 간단 하고 직접적인 방식 으로 간단 하 며 적용 되 는 장면 도 간단 하 다.내용 이 적은 경우 에 만 적 용 됩 니 다.모든 아 이 템 을 한꺼번에 렌 더 링 하기 때문에 아 이 템 의 수량 이 많 을 때 카드 가 걸 리 기 쉬 워 미끄럼 이 원활 하지 않 습 니 다.아래 아 이 템 의 크기 를 늘 린 다음 체험 효 과 를 비교 해 보 세 요.

class ListViewDemo extends StatelessWidget {
 final _items = List<Widget>.generate(10,
   (i) => Container(padding: EdgeInsets.all(16.0), child: Text("Item $i")));

 @override
 Widget build(BuildContext context) {
  return ListView(
   children: _items,
  );
 }
}

ListView.builder()
구조 함수 builder 는 두 개의 인자itemCount와itemBuilder를 입력 해 야 합 니 다.전 자 는 목록 의 수 를 규정 하고 후 자 는 모든 목록 을 어떻게 과장 하 는 지 결정 한다.ListView 와 다른 점 은 게 으 른 로 딩 입 니 다.1000 개의 목록 이 있 으 면 초기 에 렌 더 링 할 때 모든 것 이 렌 더 링 되 지 않 고 특정한 수량의 item 만 있 습 니 다.이것 은 성능 과 사용자 체험 에 있어 좋 은 향상 입 니 다.ListView 와 ListView.builder 로 1000 개의 목록 을 렌 더 링 할 때 차이 가 있 는 지 비교 할 수 있 습 니 다.

class ListViewDemo extends StatelessWidget {
 final _items = List<String>.generate(1000, (i) => "Item $i");

 @override
 Widget build(BuildContext context) {
  return ListView.builder(
   itemCount: 1000,
   itemBuilder: (context, idx) {
    return Container(
     padding: EdgeInsets.all(16.0),
     child: Text(_items[idx]),
    );
   },
  );
 }
}

ListView.separated()
separated 는 builder 에 비해 하나의 인자separatorBuilder가 더 많아 서 목록 의 각 요소 의 간격 을 어떻게 렌 더 링 하 는 지 제어 합 니 다.예 를 들 어 목록 의 모든 item 사이 에 분할 선 이 필요 합 니 다.아래 와 같이 Divider 구성 요 소 를 추가 할 수 있 습 니 다.

class ListViewDemo extends StatelessWidget {
 final _items = List<String>.generate(1000, (i) => "Item $i");

 @override
 Widget build(BuildContext context) {
  return ListView.separated(
   itemCount: 1000,
   itemBuilder: (context, idx) {
    return Container(
     padding: EdgeInsets.all(16.0),
     child: Text(_items[idx]),
    );
   },
   separatorBuilder: (context, idx) {
    return Divider();
   },
  );
 }
}

ListView.custom()
custom,이름 처럼 사용자 정의 합 니 다.필요 한 매개 변 수 는childrenDelegate이 고SliverChildDelegate을 실현 한 구성 요소,예 를 들 어SliverChildListDelegate와SliverChildBuilderDelegate를 전달 하 는 것 입 니 다.SliverChildListDelegate는 ListView 와 같은children을 받 고SliverChildBuilderDelegate는 ListView.builder 와 같은 유형의 함 수 를 받는다.
일반적으로 앞의 세 가 지 는 우리 의 일상적인 사용 수 요 를 만족 시 킬 수 있 으 며 사용자 정의 가 필요 없다.
요약 하면 위 에서 주로 ListView 의 몇 가지 구조 함수 와 용법 을 토론 하고 흔히 볼 수 있 는 스크롤 목록 을 어떻게 실현 하 는 지 토론 했다.
완 성 된 코드 를 볼 수 있 습 니 다list_view.dart.
마지막.
필 자 는 최근 에 flutter 를 공부 하면 서 자신의 학습 과정 을 지속 적 으로 기록 하고github에 놓는다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.