Flutter

[Flutter] ListView.separated 주석 해석

mjjayce 2025. 5. 8. 13:00

scroll_view.dart의  ListView.separated

 

 /// Creates a fixed-length scrollable linear array of list "items" separated
  /// by list item "separators".
  ///
  /// This constructor is appropriate for list views with a large number of
  /// item and separator children because the builders are only called for
  /// the children that are actually visible.
  ///
  /// The `itemBuilder` callback will be called with indices greater than
  /// or equal to zero and less than `itemCount`.
  ///
  /// Separators only appear between list items: separator 0 appears after item
  /// 0 and the last separator appears before the last item.
  ///
  /// The `separatorBuilder` callback will be called with indices greater than
  /// or equal to zero and less than `itemCount - 1`.
  ///
  /// The `itemBuilder` and `separatorBuilder` callbacks should always
  /// actually create widget instances when called. Avoid using a builder that
  /// returns a previously-constructed widget; if the list view's children are
  /// created in advance, or all at once when the [ListView] itself is created,
  /// it is more efficient to use the [ListView] constructor.
  ///
  /// {@macro flutter.widgets.ListView.builder.itemBuilder}
  ///
  /// {@macro flutter.widgets.PageView.findChildIndexCallback}
  ///
  /// {@tool snippet}
  ///
  /// This example shows how to create [ListView] whose [ListTile] list items
  /// are separated by [Divider]s.
  ///
  /// ```dart
  /// ListView.separated(
  ///   itemCount: 25,
  ///   separatorBuilder: (BuildContext context, int index) => const Divider(),
  ///   itemBuilder: (BuildContext context, int index) {
  ///     return ListTile(
  ///       title: Text('item $index'),
  ///     );
  ///   },
  /// )
  /// ```
  /// {@end-tool}
  ///
  /// The `addAutomaticKeepAlives` argument corresponds to the
  /// [SliverChildBuilderDelegate.addAutomaticKeepAlives] property. The
  /// `addRepaintBoundaries` argument corresponds to the
  /// [SliverChildBuilderDelegate.addRepaintBoundaries] property. The
  /// `addSemanticIndexes` argument corresponds to the
  /// [SliverChildBuilderDelegate.addSemanticIndexes] property. None may be
  /// null.
  ListView.separated({
    super.key,
    super.scrollDirection,
    super.reverse,
    super.controller,
    super.primary,
    super.physics,
    super.shrinkWrap,
    super.padding,
    required NullableIndexedWidgetBuilder itemBuilder,
    ChildIndexGetter? findChildIndexCallback,
    required IndexedWidgetBuilder separatorBuilder,
    required int itemCount,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    super.cacheExtent,
    super.dragStartBehavior,
    super.keyboardDismissBehavior,
    super.restorationId,
    super.clipBehavior,
    super.hitTestBehavior,
  }) : assert(itemCount >= 0),
       itemExtent = null,
       itemExtentBuilder = null,
       prototypeItem = null,
       childrenDelegate = SliverChildBuilderDelegate(
         (BuildContext context, int index) {
           final int itemIndex = index ~/ 2;
           if (index.isEven) {
             return itemBuilder(context, itemIndex);
           }
           return separatorBuilder(context, itemIndex);
         },
         findChildIndexCallback: findChildIndexCallback,
         childCount: _computeActualChildCount(itemCount),
         addAutomaticKeepAlives: addAutomaticKeepAlives,
         addRepaintBoundaries: addRepaintBoundaries,
         addSemanticIndexes: addSemanticIndexes,
         semanticIndexCallback: (Widget widget, int index) {
           return index.isEven ? index ~/ 2 : null;
         },
       ),
       super(semanticChildCount: itemCount);

 

주석 해석

 

// "separators"로 구분된 "items"로 고정된 길이의 스크롤 가능한 선형 배열 형태 리스트를 생성합니다.

// 이 생성자는 많은 수의 item과 separator를 가지는 리스트 뷰에 적합합니다.

// 빌더는 실제로 화면에 보이는 children에 대해서만 호출되기 때문입니다.

// 'itemBuilder' 콜백은 0 이상 itemCount 미만의 인덱스로 호출됩니다.

// separator는 리스트 아이템 사이에만 나타납니다: separator 0 은 item 0 후에 나타나고, 마지막 separator는 마지막 아이템 이전에 나타납니다.

// 'seperatorBuilder' 콜백은 0 이상 'itemCount - 1' 미만의 인덱스로 호출됩니다.

// itemBuilder와 separatorBuilder 콜백은 호출될 때 항상 실제 위젯 인스턴스를 생성해야 합니다.

// 이미 생성된 위젯을 반환하는 빌더를 사용하는 것은 피해야 합니다.

// 만약 리스트 뷰의 자식들이 미리 생성되거나, 리스트뷰가 생성될 때 모두 한 번에 생성된다면, 기본 ListView 생성자를 사용하는 것이 더 효율적입니다. 

// 예시는 ListTile리스트 아이템들이 Divider로 구분된 ListView를 만드는 방법을 보여줍니다.

 

 

ListView.seperated 필수 인자

itemCount : 리스트 아이템 총 개수

itemBuilder : 각 리스트 아이템을 생성하는 함수

separatorBuilder : 각 아이템 사이에 넣을 구분자 위젯을 생성하는 함수