안 드 로 이 드 는 flutter 의 ListView 를 사용 하여 스크롤 목록 의 예제 코드 를 구현 합 니 다.
여기 서 표현 하 는 것 은 고정된 길이 의 용기 가 있 는 것 과 같 습 니 다.그 다음 에 초과 한 내용 은 보이 지 않 습 니 다.화면 을 위로 또는 아래로 미 끄 러 뜨 릴 때 만 창 밖 에 보이 지 않 는 내용 이 창 에 나타 납 니 다.웹 개발 시 용기 에 스타일 이 필요 합 니 다.
overflow: auto;
Flutter 로 이 루어 지 려 면 간단 합 니 다.Flutter 가 ListView 구성 요 소 를 제공 하기 때 문 입 니 다.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에 놓는다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Kotlin의 기초 - 2부지난 글에서는 Kotlin이 무엇인지, Kotlin의 특징, Kotlin에서 변수 및 데이터 유형을 선언하는 방법과 같은 Kotlin의 기본 개념에 대해 배웠습니다. 유형 변환은 데이터 변수의 한 유형을 다른 데이터...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.