ListView

tpids·2024년 9월 20일

Flutter

목록 보기
32/40

VerticalListView.dart

import 'package:flutter/material.dart';

// 가상의 데이터 1~100 들어 있는 list
List<int> intList = List<int>.generate(100, (index) => index++);

// 기본 세로형 listview

class ExVerticalListView extends StatelessWidget {
  const ExVerticalListView({super.key});

  @override
  Widget build(BuildContext context) {
    print(intList);
    return Scaffold(
      body: SafeArea(
          child: ListView.builder(
            // itemCount 는 필수는 아니지만 데이터 개수가 넘어갔을 시 에러가 남
              itemCount: intList.length,
              itemBuilder: (_, index){
                // 한번에 모든 화면을 그리지 않음
                // 화면 표시 스크롤 내리면 추가로 표시
                print(index);
                // return type widget --> 화면 구성
                // 하나의 타일에 어떠한 화면을 구성할지 작성
                return Column(
                  children: [
                    Container(
                      // decoration: ,
                      height: 50,
                      color: Colors.grey[200],
                      child: Text("${intList[index]}"),
                    ),
                  ],
                );
              }
          )
      ),
    );
  }
}

HorizontalListView.dart

import 'package:flutter/material.dart';
import 'package:flutter_listview/verticalListview.dart';

class ExHorizontalListView extends StatelessWidget {
  const ExHorizontalListView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: ListView.builder(
            // 가로를 만들기 위한 방법
            scrollDirection: Axis.horizontal,

              itemCount: intList.length,
              itemBuilder: (_, index){

                return Container(
                  height: 120,
                  child: Text("${intList[index]}"),
                );
              })
      ),
    );
  }
}

profile
개발자

0개의 댓글