opt: image preview

Signed-off-by: bggRGjQaUbCoE <githubaccount56556@proton.me>
This commit is contained in:
bggRGjQaUbCoE
2024-12-08 19:02:10 +08:00
parent ce89a5fdb9
commit 22f668245d
7 changed files with 119 additions and 68 deletions

View File

@@ -1,6 +1,5 @@
import 'package:PiliPalaX/common/widgets/network_img_layer.dart'; import 'package:PiliPalaX/common/widgets/network_img_layer.dart';
import 'package:PiliPalaX/models/dynamics/article_content_model.dart'; import 'package:PiliPalaX/models/dynamics/article_content_model.dart';
import 'package:PiliPalaX/pages/preview/view.dart';
import 'package:PiliPalaX/utils/extension.dart'; import 'package:PiliPalaX/utils/extension.dart';
import 'package:cached_network_image/cached_network_image.dart'; import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
@@ -58,16 +57,20 @@ Widget articleContent({
return LayoutBuilder( return LayoutBuilder(
builder: (_, constraints) => GestureDetector( builder: (_, constraints) => GestureDetector(
onTap: () { onTap: () {
showDialog( context.imageView(
useSafeArea: false,
context: context,
builder: (context) {
return ImagePreview(
initialPage: imgList.indexOf(item.pic!.pics!.first.url!), initialPage: imgList.indexOf(item.pic!.pics!.first.url!),
imgList: imgList, imgList: imgList,
); );
}, // showDialog(
); // useSafeArea: false,
// context: context,
// builder: (context) {
// return ImagePreview(
// initialPage: imgList.indexOf(item.pic!.pics!.first.url!),
// imgList: imgList,
// );
// },
// );
}, },
child: NetworkImgLayer( child: NetworkImgLayer(
width: constraints.maxWidth, width: constraints.maxWidth,

View File

@@ -1,4 +1,4 @@
import 'package:PiliPalaX/pages/preview/view.dart'; import 'package:PiliPalaX/utils/extension.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart'; import 'package:flutter_html/flutter_html.dart';
import 'network_img_layer.dart'; import 'network_img_layer.dart';
@@ -47,16 +47,19 @@ Widget htmlRender({
// ); // );
return GestureDetector( return GestureDetector(
onTap: () { onTap: () {
showDialog( context.imageView(
useSafeArea: false,
context: context,
builder: (context) {
return ImagePreview(
initialPage: 0,
imgList: [imgUrl], imgList: [imgUrl],
); );
}, // showDialog(
); // useSafeArea: false,
// context: context,
// builder: (context) {
// return ImagePreview(
// initialPage: 0,
// imgList: [imgUrl],
// );
// },
// );
}, },
child: NetworkImgLayer( child: NetworkImgLayer(
width: isEmote ? 22 : constrainedWidth, width: isEmote ? 22 : constrainedWidth,

View File

@@ -3,7 +3,7 @@ import 'dart:math';
import 'package:PiliPalaX/common/widgets/badge.dart'; import 'package:PiliPalaX/common/widgets/badge.dart';
import 'package:PiliPalaX/common/widgets/network_img_layer.dart'; import 'package:PiliPalaX/common/widgets/network_img_layer.dart';
import 'package:PiliPalaX/common/widgets/nine_grid_view.dart'; import 'package:PiliPalaX/common/widgets/nine_grid_view.dart';
import 'package:PiliPalaX/pages/preview/view.dart'; import 'package:PiliPalaX/utils/extension.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
class ImageModel { class ImageModel {
@@ -55,16 +55,20 @@ Widget image(
itemCount: picArr.length, itemCount: picArr.length,
itemBuilder: (context, index) => GestureDetector( itemBuilder: (context, index) => GestureDetector(
onTap: () { onTap: () {
showDialog( context.imageView(
useSafeArea: false,
context: context,
builder: (context) {
return ImagePreview(
initialPage: index, initialPage: index,
imgList: picArr.map((item) => item.url).toList(), imgList: picArr.map((item) => item.url).toList(),
); );
}, // showDialog(
); // useSafeArea: false,
// context: context,
// builder: (context) {
// return ImagePreview(
// initialPage: index,
// imgList: picArr.map((item) => item.url).toList(),
// );
// },
// );
}, },
child: Stack( child: Stack(
children: [ children: [

View File

@@ -1,9 +1,6 @@
import 'dart:ui';
import 'package:PiliPalaX/common/widgets/network_img_layer.dart'; import 'package:PiliPalaX/common/widgets/network_img_layer.dart';
import 'package:PiliPalaX/models/space/card.dart' as space; import 'package:PiliPalaX/models/space/card.dart' as space;
import 'package:PiliPalaX/models/space/images.dart' as space; import 'package:PiliPalaX/models/space/images.dart' as space;
import 'package:PiliPalaX/pages/preview/view.dart';
import 'package:PiliPalaX/utils/extension.dart'; import 'package:PiliPalaX/utils/extension.dart';
import 'package:PiliPalaX/utils/storage.dart'; import 'package:PiliPalaX/utils/storage.dart';
import 'package:PiliPalaX/utils/utils.dart'; import 'package:PiliPalaX/utils/utils.dart';
@@ -74,16 +71,19 @@ class UserInfoCard extends StatelessWidget {
: images.imgUrl?.http2https; : images.imgUrl?.http2https;
return GestureDetector( return GestureDetector(
onTap: () { onTap: () {
showDialog( context.imageView(
useSafeArea: false,
context: context,
builder: (context) {
return ImagePreview(
initialPage: 0,
imgList: [imgUrl ?? ''], imgList: [imgUrl ?? ''],
); );
}, // showDialog(
); // useSafeArea: false,
// context: context,
// builder: (context) {
// return ImagePreview(
// initialPage: 0,
// imgList: [imgUrl ?? ''],
// );
// },
// );
}, },
child: CachedNetworkImage( child: CachedNetworkImage(
imageUrl: imgUrl ?? '', imageUrl: imgUrl ?? '',
@@ -418,16 +418,19 @@ class UserInfoCard extends StatelessWidget {
_buildAvatar(BuildContext context) => GestureDetector( _buildAvatar(BuildContext context) => GestureDetector(
onTap: () { onTap: () {
showDialog( context.imageView(
useSafeArea: false,
context: context,
builder: (context) {
return ImagePreview(
initialPage: 0,
imgList: [card.face ?? ''], imgList: [card.face ?? ''],
); );
}, // showDialog(
); // useSafeArea: false,
// context: context,
// builder: (context) {
// return ImagePreview(
// initialPage: 0,
// imgList: [card.face ?? ''],
// );
// },
// );
}, },
child: Container( child: Container(
decoration: BoxDecoration( decoration: BoxDecoration(

View File

@@ -1,4 +1,4 @@
import 'package:PiliPalaX/pages/preview/view.dart'; import 'package:PiliPalaX/utils/extension.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:PiliPalaX/common/widgets/network_img_layer.dart'; import 'package:PiliPalaX/common/widgets/network_img_layer.dart';
@@ -27,15 +27,20 @@ class ProfilePanel extends StatelessWidget {
child: Stack( child: Stack(
children: [ children: [
GestureDetector( GestureDetector(
onTap: () => showDialog( onTap: () => context.imageView(
useSafeArea: false, imgList: [
context: context,
builder: (context) {
return ImagePreview(initialPage: 0, imgList: [
!loadingStatus ? memberInfo.face : ctr.face.value !loadingStatus ? memberInfo.face : ctr.face.value
]); ],
},
), ),
// showDialog(
// useSafeArea: false,
// context: context,
// builder: (context) {
// return ImagePreview(initialPage: 0, imgList: [
// !loadingStatus ? memberInfo.face : ctr.face.value
// ]);
// },
// ),
child: NetworkImgLayer( child: NetworkImgLayer(
width: 90, width: 90,
height: 90, height: 90,

View File

@@ -16,12 +16,12 @@ import 'package:status_bar_control/status_bar_control.dart';
typedef DoubleClickAnimationListener = void Function(); typedef DoubleClickAnimationListener = void Function();
class ImagePreview extends StatefulWidget { class ImagePreview extends StatefulWidget {
final int initialPage; final int? initialPage;
final List<String> imgList; final List<String>? imgList;
const ImagePreview({ const ImagePreview({
super.key, super.key,
required this.initialPage, this.initialPage,
required this.imgList, this.imgList,
}); });
@override @override
@@ -44,16 +44,22 @@ class _ImagePreviewState extends State<ImagePreview>
void initState() { void initState() {
super.initState(); super.initState();
_imgList = widget.imgList.map((url) => url.http2https).toList(); _imgList = widget.imgList?.map((url) => url.http2https).toList() ??
(Get.arguments['imgList'] as List<String>)
.map((url) => url.http2https)
.toList();
_thumbList = List.generate(_imgList.length, (_) => true); _thumbList = List.generate(_imgList.length, (_) => true);
_quality = _quality =
GStorage.setting.get(SettingBoxKey.previewQuality, defaultValue: 80); GStorage.setting.get(SettingBoxKey.previewQuality, defaultValue: 80);
_previewController.initialPage.value = widget.initialPage; _previewController.initialPage.value =
_previewController.currentPage.value = widget.initialPage + 1; widget.initialPage ?? Get.arguments['initialPage'];
_previewController.currentPage.value =
(widget.initialPage ?? Get.arguments['initialPage']) + 1;
_previewController.imgList.value = _imgList; _previewController.imgList.value = _imgList;
_previewController.currentImgUrl = _imgList[widget.initialPage]; _previewController.currentImgUrl =
_imgList[widget.initialPage ?? Get.arguments['initialPage']];
// animationController = AnimationController( // animationController = AnimationController(
// vsync: this, duration: const Duration(milliseconds: 400)); // vsync: this, duration: const Duration(milliseconds: 400));
setStatusBar(); setStatusBar();

View File

@@ -1,5 +1,7 @@
import 'package:PiliPalaX/pages/preview/view.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:get/get_navigation/src/dialog/dialog_route.dart';
extension ImageExtension on num { extension ImageExtension on num {
int cacheSize(BuildContext context) { int cacheSize(BuildContext context) {
@@ -61,4 +63,29 @@ extension BuildContextExt on BuildContext {
? const Color(0xFFFF6699) ? const Color(0xFFFF6699)
: const Color(0xFFD44E7D); : const Color(0xFFD44E7D);
} }
void imageView({
int? initialPage,
required List<String> imgList,
}) {
Navigator.of(this).push(
GetDialogRoute(
pageBuilder: (buildContext, animation, secondaryAnimation) {
return ImagePreview(
initialPage: initialPage ?? 0,
imgList: imgList,
);
},
transitionDuration: const Duration(milliseconds: 300),
transitionBuilder: (context, animation, secondaryAnimation, child) {
var tween = Tween(begin: 0.0, end: 1.0)
.chain(CurveTween(curve: Curves.linear));
return FadeTransition(
opacity: animation.drive(tween),
child: child,
);
},
),
);
}
} }