플러터 listView와 sliverList 으로 리스트 그리기

Front는 과연 무엇일까 하는 생각이 들었다.

심플하게 말하자면 데이터를 보기 좋게 뿌려주는 것이다. 그것을 UI라고 한다.

그 중에 가장 기본이 되는 것은 어떻게 반복되는 형식을 front에 뿌려주는 것인가 일 것이다.

 

flutter의 sliverList와 ListView가 기본적으로 많이 사용되는 리스트 위젯일 것이다. 

이들은 index는 0부터 시작해서 정해진 아이템(자식)의 숫자만큼 반복할 것이다.

 

아래를 보면 listview.build메서드의 프로퍼티에 itemCount를 전달한다. 그러면 build메서드는 이렇게 전달받은 카운트 만큼 반복을 하며 itembuilder에 넣은 함수에 index를 전달할 것이다.  

 

sliverList역시 딜리게이션에 context와 index를 전달 하는 함수를 만들고

이렇게 전달받은 바뀐 index를 가지고 위젯을 만들어낸다.

 

builder에 보여지는 만큼 위젯이 만들어지는 기능을 지니고 있다.

. 

//자바스크립트였으면 이렇게 했을 것이다.(레이지로딩이 없다면)
for(let index = 0; index < 10; index++){
	console.log(index)
}

//혹은 vuejs
<li v-for="i in 10">
	<div>{i}</div>
</li>


------------------------------
// 플러터 listView
// 열개의 자식들 itemCount에 리스팅할 자식의 갯수 넣음
ListView.builder(
  itemCount: 10,
  itemBuilder: (BuildContext ctxt, int index) {
  return new Text(index.toString());
}),


//플러터 sliverList

SliverList(
  delegate: SliverChildBuilderDelegate(
  (BuildContext context, int index) {
    return Card(
      margin: EdgeInsets.all(15),
      child: Container(
        color: Colors.blue[100 * (index % 9 + 1)],
        height: 80,
        alignment: Alignment.center,
        child: Text(
          "Item $index",
          style: TextStyle(fontSize: 30),
          ),
        ),
    );
  },
  childCount: 10, // 10 list item <-listCount 와 같음
  ),
),