Skip to content

Commit

Permalink
fix: image clipping
Browse files Browse the repository at this point in the history
  • Loading branch information
@appdevelpo
appdevelpo committed Mar 2, 2024
1 parent e308997 commit 7028d66
Show file tree
Hide file tree
Showing 5 changed files with 212 additions and 99 deletions.
76 changes: 56 additions & 20 deletions lib/controllers/watch/comic_controller.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import 'package:miru_app/models/index.dart';
import 'package:miru_app/controllers/watch/reader_controller.dart';
import 'package:miru_app/data/services/database_service.dart';
import 'package:miru_app/utils/log.dart';
import 'package:miru_app/views/widgets/watch/playlist.dart';
import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
import 'package:extended_image/extended_image.dart';
import 'package:miru_app/utils/miru_storage.dart';
Expand Down Expand Up @@ -48,7 +49,8 @@ class ComicController extends ReaderController<ExtensionMangaWatch> {
final positionedindex = 0.obs;
final scrollController = ScrollController();
final RxDouble height = (-1.0).obs;

late final List<List<GlobalKey>> keys =
List.generate(playList.length, (index) => []);
@override
void onInit() async {
_initSetting();
Expand Down Expand Up @@ -87,7 +89,9 @@ class ComicController extends ReaderController<ExtensionMangaWatch> {
isShowControlPanel.value = false;
});
ever(readType, (callback) {
_jumpToPage(currentGlobalProgress.value);
if (items.isNotEmpty) {
_jumpToPage(currentGlobalProgress.value);
}
// 保存设置
DatabaseService.setMangaReaderType(
super.detailUrl,
Expand Down Expand Up @@ -121,7 +125,8 @@ class ComicController extends ReaderController<ExtensionMangaWatch> {
_jumpToPage(callback);
});

ever(currentGlobalProgress, (callback) {
ever(currentGlobalProgress, (callback) async {
await Future.delayed(const Duration(milliseconds: 50));
if (updateSlider.value) {
progress.value = callback;
}
Expand Down Expand Up @@ -167,9 +172,9 @@ class ComicController extends ReaderController<ExtensionMangaWatch> {
hideControlPanel();
}
// 現在位置
final pos =
scrollController.offset - scrollController.position.minScrollExtent;
currentGlobalProgress.value = pos ~/ height.value;
// final pos =
// scrollController.offset - scrollController.position.minScrollExtent;
// currentGlobalProgress.value = pos ~/ height.value;
}

@override
Expand All @@ -184,6 +189,8 @@ class ComicController extends ReaderController<ExtensionMangaWatch> {
await runtime.watch(playList[targetIndex].url);
items[targetIndex] = updatedData.urls as List<String>;
itemlength[targetIndex] = updatedData.urls.length;
keys[targetIndex] =
List.generate(updatedData.urls.length, (index) => GlobalKey());
isScrollEnd.value = false;
} catch (e) {
error.value = e.toString();
Expand Down Expand Up @@ -231,15 +238,24 @@ class ComicController extends ReaderController<ExtensionMangaWatch> {

_jumpToPage(int page) async {
if (readType.value == MangaReadMode.webTonn) {
// final local = globalToLocalProgress(page);
// final localpage = local[0];
// final chap = local[1];
// if (keys[chap][localpage].currentContext == null) {
// return;
// }
// Scrollable.ensureVisible(keys[chap][localpage].currentContext!,
// alignment: 0.0, duration: const Duration(milliseconds: 10));
// if (itemScrollController.isAttached) {
// itemScrollController.jumpTo(
// index: page,
// );
// }
if (scrollController.hasClients) {
scrollController.jumpTo(
scrollController.position.minScrollExtent + page * height.value);
}
// if (scrollController.hasClients) {
// scrollController.jumpTo(
// scrollController.position.minScrollExtent + page * height.value);
// }

return;
}
if (pageController.value.hasClients) {
Expand All @@ -258,15 +274,23 @@ class ComicController extends ReaderController<ExtensionMangaWatch> {
curve: Curves.ease,
);
} else {
if (keys[index.value][currentLocalProgress.value + 1].currentContext ==
null) {
return;
}
Scrollable.ensureVisible(
keys[index.value][currentLocalProgress.value + 1].currentContext!,
alignment: 0.0,
duration: const Duration(milliseconds: 300));
// scrollOffsetController.animateScroll(
// duration: const Duration(milliseconds: 100),
// curve: Curves.ease,
// offset: 200.0,
// );
scrollController.animateTo(
scrollController.offset + scrollController.position.viewportDimension,
duration: const Duration(milliseconds: 300),
curve: Curves.ease);
// scrollController.animateTo(
// scrollController.offset + scrollController.position.viewportDimension,
// duration: const Duration(milliseconds: 300),
// curve: Curves.ease);
}
}

Expand All @@ -279,10 +303,18 @@ class ComicController extends ReaderController<ExtensionMangaWatch> {
curve: Curves.ease,
);
} else {
scrollController.animateTo(
scrollController.offset - scrollController.position.viewportDimension,
duration: const Duration(milliseconds: 300),
curve: Curves.ease);
if (keys[index.value][currentLocalProgress.value - 1].currentContext ==
null) {
return;
}
Scrollable.ensureVisible(
keys[index.value][currentLocalProgress.value - 1].currentContext!,
alignment: 0.0,
duration: const Duration(milliseconds: 300));
// scrollController.animateTo(
// scrollController.offset - scrollController.position.viewportDimension,
// duration: const Duration(milliseconds: 300),
// curve: Curves.ease);
}
}

Expand Down Expand Up @@ -312,8 +344,12 @@ class ComicController extends ReaderController<ExtensionMangaWatch> {
error.value = '';
watchData.value =
await runtime.watch(cuurentPlayUrl) as ExtensionMangaWatch;
itemlength[index.value] = (watchData.value as dynamic)?.urls.length;
items[index.value] = (watchData.value as dynamic)?.urls;
itemlength[index.value] = watchData.value!.urls.length;
items[index.value] = watchData.value!.urls;
keys[index.value] = List.generate(
watchData.value!.urls.length,
(index) => GlobalKey(),
);
positionedindex.value = index.value;
} catch (e) {
error.value = e.toString();
Expand Down
94 changes: 73 additions & 21 deletions lib/views/pages/watch/reader/comic/comic_reader_content.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import 'dart:io';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:fluent_ui/fluent_ui.dart' as fluent;
import 'package:inview_notifier_list/inview_notifier_list.dart';
import 'package:miru_app/models/index.dart';
import 'package:miru_app/controllers/watch/comic_controller.dart';
import 'package:miru_app/utils/i18n.dart';
Expand Down Expand Up @@ -117,18 +118,30 @@ class _ComicReaderContentState extends State<ComicReaderContent> {
final width = MediaQuery.of(context).size.width;
final height = MediaQuery.of(context).size.height;
_c.height.value = height;
final listPrev = _c.items
.sublist(0, _c.positionedindex.value)
.expand((element) => element)
.toList()
.reversed
.toList();
final listNext = _c.items
.sublist(_c.positionedindex.value + 1)
.expand((element) => element)
.toList();
final keyPrev = _c.keys
.sublist(0, _c.positionedindex.value)
.expand((element) => element)
.toList()
.reversed
.toList();
final keyNext = _c.keys
.sublist(_c.positionedindex.value + 1)
.expand((element) => element)
.toList();
return Obx(
() {
//切成三份，中間固定在同個index(positionedindex) 之後，做出分割
final listPrev = _c.items
.sublist(0, _c.positionedindex.value)
.reversed
.expand((element) => element.reversed)
.toList();
final listNext = _c.items
.sublist(_c.positionedindex.value + 1)
.expand((element) => element)
.toList();

return SizedBox(
width: width,
height: height,
Expand All @@ -146,9 +159,13 @@ class _ComicReaderContentState extends State<ComicReaderContent> {
}
},
child: InteractiveViewer(
minScale: .5,
scaleEnabled: _c.isZoom.value,
child: CustomScrollView(
child: InViewNotifierCustomScrollView(
isInViewPortCondition: (double deltaTop, double deltaBottom,
double viewPortDimension) {
return deltaTop < 0.5 * viewPortDimension &&
deltaBottom > 0.5 * viewPortDimension;
},
controller: _c.scrollController,
physics: _c.isZoom.value
? const NeverScrollableScrollPhysics()
Expand Down Expand Up @@ -186,33 +203,67 @@ class _ComicReaderContentState extends State<ComicReaderContent> {
// )
// ]
[
SliverFixedExtentList(
itemExtent: height,
SliverList(
// itemExtent: height,
delegate: SliverChildBuilderDelegate(
(context, index) {
final url = listPrev[index];
return imageBuilder(url);
return InViewNotifierWidget(
key: keyPrev[index],
id: (listPrev.length - index).toString(),
builder: (context, isRendered, widget) {
if (isRendered) {
// logger.info(listPrev.length - index);
_c.currentGlobalProgress.value =
listPrev.length - index;
}
return imageBuilder(url);
});
},
childCount: listPrev.length,
),
),
//設為中心點
SliverFixedExtentList.builder(
itemExtent: height,
SliverList.builder(
// itemExtent: height,
key: _centerKey,
itemBuilder: (context, index) {
final img = _c.items[_c.positionedindex.value];
final url = img[index];
return imageBuilder(url);
return InViewNotifierWidget(
key: _c.keys[_c.positionedindex.value][index],
id: (index + listPrev.length + 1).toString(),
builder: (context, isRendered, widget) {
if (isRendered) {
// logger.info(index + listPrev.length + 1);
_c.currentGlobalProgress.value =
index + listPrev.length;
}
return imageBuilder(url);
});
},
itemCount: _c.itemlength[_c.positionedindex.value],
),
SliverFixedExtentList(
itemExtent: height,
SliverList(
// itemExtent: height,
delegate: SliverChildBuilderDelegate(
(context, index) {
final url = listNext[index];
return imageBuilder(url);
return InViewNotifierWidget(
key: keyNext[index],
id: index.toString(),
builder: (context, isRendered, widget) {
if (isRendered) {
// logger.info(index +
// listPrev.length +
// _c.itemlength[_c.positionedindex.value] +
// 1);
_c.currentGlobalProgress.value = index +
listPrev.length +
_c.itemlength[_c.positionedindex.value];
}
return imageBuilder(url);
});
},
childCount: listNext.length,
),
Expand Down Expand Up @@ -395,12 +446,13 @@ class _ComicReaderContentState extends State<ComicReaderContent> {
: null,
child: CacheNetWorkImagePic(
url,

// postFrameCallback: (context) {
// RenderBox renderBox =
// context.currentContext!.findRenderObject() as RenderBox;
// logger.info('renderBox.size: ${renderBox.size}');
// },
fit: BoxFit.cover,
fit: BoxFit.fitWidth,
placeholder: _buildPlaceholder(context),
headers: _c.watchData.value?.headers,
initGestureConfigHandler: (state) {
Expand Down
Loading

0 comments on commit 7028d66

Please sign in to comment.