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 全体を再構築することは、特に画像が含まれる大規模なデータセットの場合に気になることです。
より深いレベルでの説明をいただければ幸いです。