Flutter ListView 및 기능

안녕하세요, 이번 강의에서는 Android에서 FlutterListView와 기능Listview 비교를 다룰 것입니다. Android에서 ListView를 만들 때, 특히 이미지가 있는 목록을 만들 때 추가 모델 클래스가 필요했지만 Flutter에서 ListView를 만들 때는 모델 클래스가 필요하지 않습니다. 이를 위해 Flutter에서 목록 보기를 만드는 것은 매우 간단합니다.

먼저 텍스트로만 구성된 간단한ListView 구조를 살펴보고 예제를 만들어 보겠습니다.

그렇다면 우리가 ListView라고 부르는 구조는 무엇입니까?

ListView를 여러 요소가 있는 목록으로 생각할 수 있습니다. 이 목록은 기사만으로 구성될 수도 있고 혼합 데이터로 생성될 수도 있습니다. ListView는 여러 위젯으로 구성되어 있으므로 자식을 받습니다.

ListView(
  children: const [
    ListTile(
      title: Text("Baransel.dev"),
    ),
    ListTile(
      title: Text("Flutter"),
    ),
    ListTile(
      title: Text("Courses"),
    ),
  ],
)

ListView 위젯을 추가하여 위에서 본 ListTile 위젯 내부에 각 요소를 생성했습니다. 여기에서 제목 속성을 텍스트로 사용하면 다음과 같은 결과를 얻습니다.



물론 ListTile 에서 가장 많이 사용되는 위젯 중 하나인 ListView 에는 다른 기능도 있습니다.



제목을 추가하는 것처럼 subtitle 로 부제를 추가하여 설명할 수 있습니다.

ListTile(
  title: Text("Baransel.dev"),
  subtitle: Text("https://baransel.dev"),
),

원하는 경우 추가로 사용자 정의하고 기사의 시작 또는 끝에 아이콘을 배치할 수 있습니다.

ListView(
          children: const [
            ListTile(
              title: Text("Baransel.dev"),
              subtitle: Text("https://baransel.dev"),
              leading:
                  Icon(Icons.arrow_forward_ios_rounded), //icon in the beginning
            ),
            ListTile(
              title: Text("Flutter"),
              subtitle: Text("https://baransel.dev"),
              trailing: Icon(Icons.auto_awesome), //icon in the end
            ),
            ListTile(
              title: Text("Courses"),
              subtitle: Text("https://baransel.dev"),
              trailing: Icon(Icons.audiotrack), //icon in the end
            ),
          ],
        ),

자세한 내용은 내 블로그를 팔로우하십시오baransel.dev.