Skip to content

Commit

Permalink
Feat: 缩略栏增加个同步滚动开关
Browse files Browse the repository at this point in the history
  • Loading branch information
@honjow
honjow committed Jul 29, 2021
1 parent 9ee4b0f commit e2a6bc3
Show file tree
Hide file tree
Showing 8 changed files with 307 additions and 236 deletions.
3 changes: 2 additions & 1 deletion lib/common/parser/image_page_parser.dart
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import 'package:fehviewer/const/const.dart';
import 'package:fehviewer/models/index.dart';
import 'package:fehviewer/utils/logger.dart';
import 'package:html/dom.dart';
import 'package:html/parser.dart' show parse;

Expand All @@ -24,7 +25,7 @@ GalleryImage paraImage(String htmlText, String href) {
.group(1) ??
'';

// logger.v('para_sourceId: $_sourceId ');
logger.v('para_sourceId: $_sourceId ');

final GalleryImage _reImage = kDefGalleryImage.copyWith(
imageUrl: imageUrl,
Expand Down
34 changes: 23 additions & 11 deletions lib/pages/gallery/controller/gallery_page_controller.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,7 @@ class GalleryPageController extends GetxController

/// 添加缩略图对象
void addAllImages(List<GalleryImage> galleryImages) {
logger.d(
logger5.d(
'addAllPreview ${galleryImages.first.ser}~${galleryImages.last.ser} ');

for (final GalleryImage _image in galleryImages) {
Expand Down Expand Up @@ -487,28 +487,37 @@ class GalleryPageController extends GetxController
}
}

// 直接请求目的index所在的缩略图页
final Map<int, Future<List<GalleryImage>>> _mapLoadImagesForSer = {};

/// 直接请求目的index所在的缩略图页
Future<void> loadImagesForSer(int ser, {CancelToken? cancelToken}) async {
// TODO(w): 优化重复触发

// 计算index所在的页码
final int flen = firstPageImage.length;
if (filecount <= flen) {
return;
}

final int page = (ser - 1) ~/ flen;
logger.v('ser:$ser 所在页码为$page');
logger.d('ser:$ser 所在页码为$page');

final List<GalleryImage> _moreImageList = await Api.getGalleryImage(
galleryItem.url!,
page: page,
cancelToken: cancelToken,
refresh: isRefresh, // 刷新画廊后加载缩略图不能从缓存读取，否则在改变每页数量后加载画廊会出错
);
_mapLoadImagesForSer.putIfAbsent(
page,
() => Api.getGalleryImage(
galleryItem.url!,
page: page,
cancelToken: cancelToken,
refresh: isRefresh, // 刷新画廊后加载缩略图不能从缓存读取，否则在改变每页数量后加载画廊会出错
));

final List<GalleryImage> _moreImageList = await _mapLoadImagesForSer[page]!;

addAllImages(_moreImageList);
if (Get.isRegistered<AllPreviewsPageController>()) {
Get.find<AllPreviewsPageController>().update();
}
_mapLoadImagesForSer.remove(page);
}

// 按顺序翻页加载缩略图对象
Expand Down Expand Up @@ -566,7 +575,7 @@ class GalleryPageController extends GetxController
sourceId: _sourceId,
);

// logger.v('fetch _image ${_image.toJson()}');
logger.v('fetch _image ${_image.toJson()}');

// 换源加载
if (changeSource) {
Expand All @@ -579,8 +588,11 @@ class GalleryPageController extends GetxController
imageWidth: _image.imageWidth,
imageHeight: _image.imageHeight,
);

logger.v('_imageCopyWith ${_imageCopyWith.toJson()}');

uptImageBySer(ser: itemSer, image: _imageCopyWith);
return _image;
return _imageCopyWith;
} catch (_) {
rethrow;
}
Expand Down
6 changes: 3 additions & 3 deletions lib/pages/image_view/view/view_image.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,9 +88,9 @@ class _ViewImageState extends State<ViewImage>
refresh: refresh,
changeSource: changeSource,
);
if (image != null) {
_pageController.uptImageBySer(ser: image.ser, image: image);
}
// if (image != null) {
// _pageController.uptImageBySer(ser: image.ser, image: image);
// }

return image;
}
Expand Down
54 changes: 38 additions & 16 deletions lib/pages/image_view_ext/controller/view_ext_contorller.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ const String idViewColumnModeIcon = 'ViewColumnModeIcon';
const String idThumbnailListView = 'ThumbnailListView';
const String idShowThumbListIcon = 'ShowThumbListIcon';
const String idAutoReadIcon = 'AutoReadIcon';
const String idIconBar = 'IconBar';

/// 支持在线以及本地（已下载）阅读的组件
class ViewExtController extends GetxController {
Expand Down Expand Up @@ -159,7 +160,7 @@ class ViewExtController extends GetxController {
);
}

// 页码切换时的回调
// 横向页码切换时的回调
void handOnPageChanged(int pageIndex) {
// 根据 columnMode 的不同设置不同的 currentItemIndex 值
switch (vState.columnMode) {
Expand Down Expand Up @@ -200,6 +201,9 @@ class ViewExtController extends GetxController {
vState.sliderValue = vState.currentItemIndex.toDouble();
}
update([idViewTopBar, idViewPageSlider]);
if (vState.syncThumbList) {
thumbScrollTo();
}
}

/// 切换单页双页模式
Expand Down Expand Up @@ -241,6 +245,8 @@ class ViewExtController extends GetxController {
update([idShowThumbListIcon, idViewBottomBar, idThumbnailListView]);
}

final Map<int, Future<void>> _mapFetchGalleryPriviewPage = {};

/// 拉取图片信息
Future<GalleryImage?> fetchThumb(
int itemSer, {
Expand All @@ -250,9 +256,11 @@ class ViewExtController extends GetxController {
final GalleryImage? tImage = _galleryPageController.imageMap[itemSer];
if (tImage == null) {
logger.d('ser:$itemSer 所在页尚未获取， 开始获取');
_mapFetchGalleryPriviewPage.putIfAbsent(
itemSer, () => _galleryPageController.loadImagesForSer(itemSer));

// 直接获取需要的ser所在页
await _galleryPageController.loadImagesForSer(itemSer);
await _mapFetchGalleryPriviewPage[itemSer];
}

final GalleryImage? image = _galleryPageController.imageMap[itemSer];
Expand Down Expand Up @@ -293,9 +301,6 @@ class ViewExtController extends GetxController {
refresh: refresh,
changeSource: changeSource,
);
if (image != null) {
_galleryPageController.uptImageBySer(ser: image.ser, image: image);
}

return image;
}
Expand Down Expand Up @@ -366,7 +371,7 @@ class ViewExtController extends GetxController {
}

Future<void> tapLeft() async {
logger.d('${vState.viewMode} tap left');
logger.v('${vState.viewMode} tap left');
vState.fade = false;
if (vState.viewMode == ViewMode.LeftToRight && vState.pageIndex > 0) {
pageController.jumpToPage(vState.pageIndex - 1);
Expand All @@ -385,7 +390,7 @@ class ViewExtController extends GetxController {
}

Future<void> tapRight() async {
logger.d('${vState.viewMode} tap right');
logger.v('${vState.viewMode} tap right');
vState.fade = false;
if (vState.viewMode == ViewMode.LeftToRight &&
vState.pageIndex < vState.filecount) {
Expand All @@ -409,7 +414,7 @@ class ViewExtController extends GetxController {
jumpToPage(value.round());
if ((value.round() - curIndex).abs() > 20) {
Future.delayed(const Duration(milliseconds: 200))
.then((value) => reIndexThumb());
.then((value) => thumbScrollTo());
}
}

Expand All @@ -426,6 +431,10 @@ class ViewExtController extends GetxController {
void handOnSliderChanged(double value) {
vState.sliderValue = value;
update([idViewPageSlider]);

if (vState.syncThumbList) {
thumbScrollTo(index: value.round());
}
}

void share(BuildContext context) {
Expand Down Expand Up @@ -635,6 +644,9 @@ class ViewExtController extends GetxController {
vState.currentItemIndex = vState.tempIndex;
vState.sliderValue = vState.currentItemIndex / 1.0;
update([idViewTopBar, idViewPageSlider]);
if (vState.syncThumbList) {
thumbScrollTo();
}
});
}
}
Expand Down Expand Up @@ -663,12 +675,14 @@ class ViewExtController extends GetxController {
}
}

void reIndexThumb() {
thumbScrollController.scrollTo(
index: vState.currentItemIndex,
duration: const Duration(milliseconds: 300),
curve: Curves.ease,
);
final thrThumbScrollTo =
Throttling(duration: const Duration(milliseconds: 100));
void thumbScrollTo({int? index}) {
thrThumbScrollTo.throttle(() => thumbScrollController.scrollTo(
index: index ?? vState.currentItemIndex,
duration: const Duration(milliseconds: 100),
curve: Curves.ease,
));
}

Future<void> _toPage({int? index}) async {
Expand Down Expand Up @@ -720,13 +734,21 @@ class ViewExtController extends GetxController {

Future<void> handOnViewModeChanged(ViewMode val) async {
final itemIndex = vState.currentItemIndex;
update([idImagePageView, idViewBottomBar]);
await Future.delayed(Duration(milliseconds: 50));
update([idImagePageView, idViewBottomBar, idIconBar]);
await Future.delayed(const Duration(milliseconds: 50));
if (val == ViewMode.topToBottom) {
itemScrollController.jumpTo(index: itemIndex);
} else {
vState.currentItemIndex = itemIndex;
pageController.jumpToPage(vState.pageIndex);
}
}

void switchSyncThumb() {
vState.syncThumbList = !vState.syncThumbList;
if (vState.syncThumbList) {
thumbScrollTo();
}
update([idThumbnailListView]);
}
}
1 change: 1 addition & 0 deletions lib/pages/image_view_ext/controller/view_ext_state.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,4 +182,5 @@ class ViewExtState {

bool showThumbList = false;
int mindThumbIndex = 0;
bool syncThumbList = false;
}
Loading

0 comments on commit e2a6bc3

Please sign in to comment.