Flutter ListView의 쿼리

Sep 18 2020

나는 목록보기에 대해 배우고 있으며 하나는 ListView 빌더를 사용하고 다른 하나는 Listview를 사용하는 두 개의 다트 파일이 있습니다. 둘 다 동일한 결과를 출력합니다. 나는 listview 가이드를 따르고 있습니다.https://pusher.com/tutorials/flutter-listviews

다음은 listview에 대한 내 쿼리입니다.

  1. 실제로 데이터가 API에서 오는 것을 이해하고 아래 옵션 중 어떤 옵션이 사용되며 그 이유를 알고 싶었습니다.
  2. 컨테이너, 텍스트와 같은 위젯이 listView 내에서 자식이 될 수 있다는 것을 이해하는 것이 맞습니까?
  3. 옵션 1에서 ListView 자식은 _buildListItemsFromLocation () 함수입니다. 이것이 좋은 방법입니까, 아니면 _buildListItemsFromLocation () 코드를 별도의 dart 파일로 이동해야합니까?

옵션 1 : ListView

class LocationListView extends StatefulWidget {
  @override
  _LocationListViewState createState() => _LocationListViewState();
}

class _LocationListViewState extends State<LocationListView> {

  List<Container> _buildListItemsFromLocation() {
    int index = 0;
    return locationData.map((location) {
      var container = Container(
          child: Row(
            children: [
              Container(
                margin: EdgeInsets.all(10.0),
                child: Image(
                  image: AssetImage(location.imagePath),
                  width: 100.0,
                  height: 100.0,
                  fit: BoxFit.cover,
                ),
              ),
              Container(
                child: Text(location.name),
              )
            ],
          ),
      );
      return container;
    }).toList();
  }

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


옵션 2-ListView.builder

class LocationList extends StatefulWidget {
  @override
  _LocationListState createState() => _LocationListState();
}

class _LocationListState extends State<LocationList> {

  @override
  Widget build(BuildContext context) {
        return ListView.builder(
          itemCount: locationData.length,
          itemBuilder: (context, index) {
            
            return Row(
              children: [
                Container(
                  margin: EdgeInsets.all(10.0),
                  child: Image(
                    image: AssetImage(locationData[index].imagePath),
                    width: 100.0,
                    height: 100.0,
                    fit: BoxFit.cover,
                  ),
                ),
                Container(
                  child: Text(locationData[index].name),
                )
              ],
            );
        }
        );
      }
  }


답변

2 Souvenir Sep 18 2020 at 09:04
  1. 방법 2는 이해하기 쉽고 위에서 아래로 순서대로 따라 가기 때문에 코드를 읽기 쉽기 때문에 사용합니다.
  2. 모든 위젯은 다른 위젯의 하위가 될 수 있습니다. 사용 방법과 용도에 따라 다릅니다.
  3. 많은 사람들이 앱의 성능에 영향을 미치기 때문에 위와 같이 분할하지 말고 다른 클래스를 만든 다음 다시 호출해야한다고 말합니다. 많이 사용하지만 한 화면에서만 사용하는 경우에는 본인과 동일한 방법을 사용할 수 있습니다. 대답은 결함이있을 수 있으며 자신에게 줄 것이 없습니다.
1 Autocrab Sep 18 2020 at 09:01
  1. 미리 목록 크기를 모르는 경우 빌더를 통해 생성

1.1 목록을 만들고 요소 수가 10 개 또는 12 개를 넘지 않는다는 것을 알고 있다면 ListViewexample1에서 만들 수 있습니다.

  1. 모든 위젯은 ListView. 편의를 위해 ListTile선행, 후행, 제목, 부제 위젯을 포함하는라는 위젯이 있습니다.
  2. 괜찮아