3
class ListItem extends StatefulWidget {
  final Product product;

  ListItem(this.bloc, this.product);

  @override
  _ListItemState createState() => _ListItemState(product);
}

class _ListItemState extends State<ListItem> {
  Product product;
  _ListItemState(this.product);

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(product.title),
      trailing: LikeIcon(
        id: product.id,
        isFavourite: product.isFavorite,
        likeStatusHandler: toggleLikeStatus,
      ),
    );
  }
}

class LikeIcon extends StatefulWidget {
  final int id;
  final bool isFavourite;
  final Function(int) likeStatusHandler;

  LikeIcon({
    @required this.id,
    @required this.isFavourite,
    @required this.likeStatusHandler,
  });

  @override
  _LikeIconState createState() => _LikeIconState(isFavourite);
}

class _LikeIconState extends State<LikeIcon> {
  bool isFavourite;

  _LikeIconState(isFavourite) {
    this.isFavourite = isFavourite;
  }

  @override
  Widget build(BuildContext context) {
    return _favouriteWidget();
  }
}

最初に、ListItem ウィジェットを StatelessWidget として作成し、LikeIcon ウィジェットを StatefulWidget として作成しました。これは、Like アイコンの有効/無効状態を制御します。そこで直面した問題は、リストをスクロールすると、like の状態が失われることでした。

後で ListItem 自体を StatefulWidget として作成し、問題を解決しました。しかし、ログを見ると、スクロールするたびに ListItem が再構築されている (build メソッドが呼び出されている) ことに気付きました。

ListItem が StatelessWidget の場合、ビルド メソッドはスクロール時に呼び出されません。スクロールするたびに ListItem 全体を再構築することは、特に画像が含まれる大規模なデータセットの場合に気になることです。

より深いレベルでの説明をいただければ幸いです。

4

0 に答える 0