From 01414d96be14ce268eb93eeef6118d7d38d5bf66 Mon Sep 17 00:00:00 2001 From: Thibault Deckers Date: Thu, 2 Jan 2020 01:33:58 +0900 Subject: [PATCH] removed keys from slivers to fix rendering order issue --- lib/model/image_collection.dart | 15 +++-- lib/widgets/album/collection_section.dart | 70 +++++++++++---------- lib/widgets/album/thumbnail_collection.dart | 6 +- 3 files changed, 44 insertions(+), 47 deletions(-) diff --git a/lib/model/image_collection.dart b/lib/model/image_collection.dart index b327246ce..e0b1b5f31 100644 --- a/lib/model/image_collection.dart +++ b/lib/model/image_collection.dart @@ -8,7 +8,7 @@ import 'package:path/path.dart'; class ImageCollection with ChangeNotifier { final List _rawEntries; - Map> sections = {}; + Map> sections = Map.unmodifiable({}); GroupFactor groupFactor = GroupFactor.month; SortFactor sortFactor = SortFactor.date; List sortedAlbums = List.unmodifiable(const Iterable.empty()); @@ -48,23 +48,22 @@ class ImageCollection with ChangeNotifier { case SortFactor.date: switch (groupFactor) { case GroupFactor.album: - sections = groupBy(_rawEntries, (entry) => entry.directory); + sections = Map.unmodifiable(groupBy(_rawEntries, (entry) => entry.directory)); break; case GroupFactor.month: - sections = groupBy(_rawEntries, (entry) => entry.monthTaken); + sections = Map.unmodifiable(groupBy(_rawEntries, (entry) => entry.monthTaken)); break; case GroupFactor.day: - sections = groupBy(_rawEntries, (entry) => entry.dayTaken); + sections = Map.unmodifiable(groupBy(_rawEntries, (entry) => entry.dayTaken)); break; } break; case SortFactor.size: - sections = Map.fromEntries([ - MapEntry('All', _rawEntries), - ]); + sections = Map.unmodifiable(Map.fromEntries([ + MapEntry(null, _rawEntries), + ])); break; } - debugPrint('$runtimeType updateSections notifyListeners'); notifyListeners(); } diff --git a/lib/widgets/album/collection_section.dart b/lib/widgets/album/collection_section.dart index a301087d8..4b75e9ae3 100644 --- a/lib/widgets/album/collection_section.dart +++ b/lib/widgets/album/collection_section.dart @@ -11,56 +11,58 @@ import 'package:provider/provider.dart'; class SectionSliver extends StatelessWidget { final ImageCollection collection; - final Map> sections; final dynamic sectionKey; + static const columnCount = 4; + const SectionSliver({ Key key, @required this.collection, - @required this.sections, @required this.sectionKey, }) : super(key: key); @override Widget build(BuildContext context) { - const columnCount = 4; + final sections = collection.sections; + + final sliver = SliverGrid( + delegate: SliverChildBuilderDelegate( + // TODO TLAD find out why thumbnails are rebuilt (with `initState`) + (context, index) { + final sectionEntries = sections[sectionKey]; + if (index >= sectionEntries.length) return null; + final entry = sectionEntries[index]; + return GestureDetector( + key: ValueKey(entry.uri), + onTap: () => _showFullscreen(context, entry), + child: Selector( + selector: (c, mq) => mq.size.width, + builder: (c, mqWidth, child) { + return Thumbnail( + entry: entry, + extent: mqWidth / columnCount, + ); + }, + ), + ); + }, + childCount: sections[sectionKey].length, + addAutomaticKeepAlives: false, + addRepaintBoundaries: true, + ), + // TODO TLAD custom SliverGridDelegate / SliverGridLayout to lerp between columnCount + gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( + crossAxisCount: columnCount, + ), + ); + return SliverStickyHeader( header: SectionHeader( collection: collection, sections: sections, sectionKey: sectionKey, ), - sliver: SliverGrid( - delegate: SliverChildBuilderDelegate( - // TODO TLAD find out why thumbnails are rebuilt (with `initState`) when: - // - config change (show/hide status bar) - (context, index) { - final sectionEntries = sections[sectionKey]; - if (index >= sectionEntries.length) return null; - final entry = sectionEntries[index]; - return GestureDetector( - key: ValueKey(entry.uri), - onTap: () => _showFullscreen(context, entry), - child: Selector( - selector: (c, mq) => mq.size.width, - builder: (c, mqWidth, child) { - return Thumbnail( - entry: entry, - extent: mqWidth / columnCount, - ); - }, - ), - ); - }, - childCount: sections[sectionKey].length, - addAutomaticKeepAlives: false, - addRepaintBoundaries: true, - ), - // TODO TLAD custom SliverGridDelegate / SliverGridLayout to lerp between columnCount - gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( - crossAxisCount: columnCount, - ), - ), + sliver: sliver, overlapsContent: false, ); } diff --git a/lib/widgets/album/thumbnail_collection.dart b/lib/widgets/album/thumbnail_collection.dart index 41c851e5a..6d502a204 100644 --- a/lib/widgets/album/thumbnail_collection.dart +++ b/lib/widgets/album/thumbnail_collection.dart @@ -34,11 +34,7 @@ class ThumbnailCollection extends StatelessWidget { slivers: [ if (appBar != null) appBar, ...sectionKeys.map((sectionKey) => SectionSliver( - // need key to prevent section header mismatch - // but it should not be unique key, otherwise sections are rebuilt when changing page - key: ValueKey(sectionKey), collection: collection, - sections: sections, sectionKey: sectionKey, )), SliverToBoxAdapter( @@ -59,7 +55,7 @@ class ThumbnailCollection extends StatelessWidget { return DraggableScrollbar.arrows( controller: _scrollController, padding: EdgeInsets.only( - // top padding to adjust scroll thumb + // padding to get scroll thumb below app bar, above nav bar top: topPadding, bottom: mqViewInsetsBottom, ),