image scale

This commit is contained in:
quantulr
2023-02-12 23:39:41 +08:00
parent b2e52d0539
commit 9261d482cf
7 changed files with 110 additions and 52 deletions

View File

@ -29,10 +29,13 @@ class _ImageDetailState extends ConsumerState<ImageDetail> {
return null;
}
double? dx;
double? dy;
// double dx=0;
double _scale = 1;
Offset offsetBeforeDrag = const Offset(0, 0);
Offset origin = const Offset(0, 0);
double ox = 0;
@override
Widget build(BuildContext context) {
String id = GoRouterState.of(context).queryParams["id"] ?? "";
@ -40,34 +43,80 @@ class _ImageDetailState extends ConsumerState<ImageDetail> {
width: double.infinity,
height: double.infinity,
color: Colors.white,
// TODO: 缩放组件溢出
// TODO: 拖动
child: Stack(
alignment: Alignment.center,
children: [
Positioned(
left: dx,
top: dy,
// left: dx,
child: GestureDetector(
onTapDown: (TapDownDetails details) {
print("tap start");
print(details.globalPosition.dx);
offsetBeforeDrag = details.globalPosition;
},
child: Draggable(
onDragUpdate: (drag) {
print(drag);
// setState(() {
// dx = drag.localPosition.dx;
// dy = drag.localPosition.dy;
// });
onDragUpdate: (details) {
print("on drag update");
print(details.globalPosition.dx - offsetBeforeDrag.dx);
// print(details.localPosition - offsetBeforeDrag);
// print(offsetBeforeDrag.dx - details.localPosition.dx);
// print(offsetBeforeDrag.dy - details.localPosition.dy);
//
setState(() {
origin = (offsetBeforeDrag - details.localPosition);
// /
// (_scale - 1);
});
},
feedback: const SizedBox(),
child: FutureBuilder(
future: loadImage(id),
builder: (BuildContext context, snapshot) {
if (snapshot.hasData) {
// return ClipRect(
// child: SizedBox(
// width: double.infinity,
// height: double.infinity,
// child: Transform.scale(
// origin: Offset(0, 0),
// scale: _scale,
// child: Image.network(
// "${dio.options.baseUrl}/image/${snapshot.data?.file_path}",
// loadingBuilder: (BuildContext context, child,
// loadingProgress) {
// if (loadingProgress == null) {
// return child;
// }
// return Center(
// child: CircularProgressIndicator(
// value: loadingProgress.expectedTotalBytes !=
// null
// ? loadingProgress
// .cumulativeBytesLoaded /
// loadingProgress.expectedTotalBytes!
// : null,
// ),
// );
// }),
// ),
// ),
// );
return Image.network(
"${dio.options.baseUrl}/image/${snapshot.data?.file_path}",
loadingBuilder:
(BuildContext context, child, loadingProgress) {
if (loadingProgress == null) {
return Transform.scale(
scale: _scale,
child: child,
return ClipRect(
child: SizedBox(
width: double.infinity,
height: double.infinity,
child: Transform.scale(
origin: Offset(166, 0),
scale: _scale,
child: child),
),
);
}
return Center(
@ -85,7 +134,9 @@ class _ImageDetailState extends ConsumerState<ImageDetail> {
}
return CircularProgressIndicator();
}),
)),
),
),
),
Positioned(
bottom: 10,
child: Card(
@ -105,19 +156,31 @@ class _ImageDetailState extends ConsumerState<ImageDetail> {
},
icon: const Icon(Icons.delete)),
IconButton(
onPressed: () {
setState(() {
_scale -= 0.1;
});
},
onPressed: _scale > 0.2
? () {
setState(() {
_scale -= 1;
});
}
: null,
icon: const Icon(Icons.remove_circle_outline)),
IconButton(
onPressed: _scale < 10
? () {
setState(() {
_scale += 1;
});
}
: null,
icon: const Icon(Icons.add_circle_outline)),
IconButton(
onPressed: () {
setState(() {
_scale += 0.1;
// _scale += 0.1;
ox += 100 / 2;
});
},
icon: const Icon(Icons.add_circle_outline)),
icon: const Icon(Icons.chevron_left)),
],
),
),

View File

@ -12,8 +12,11 @@ class Gallery extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
UniqueKey key = ref.watch(uniqueIdProvider);
return ImageGrid(
key: key,
return Container(
color: Colors.white,
child: ImageGrid(
key: key,
),
);
}
}

View File

@ -7,12 +7,15 @@ class Profile extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
return Center(
child: ElevatedButton(
onPressed: () {
ref.watch(tokenProvider.notifier).removeToken();
},
child: const Text('quit')),
return Container(
color: Colors.white,
child: Center(
child: ElevatedButton(
onPressed: () {
ref.watch(tokenProvider.notifier).removeToken();
},
child: const Text('quit')),
),
);
}
}

View File

@ -27,10 +27,8 @@ class MyMaterialRouterConfig {
GoRoute(
path: "/",
name: "相册",
pageBuilder: (BuildContext context, GoRouterState state) =>
const NoTransitionPage(
child: Gallery(),
),
builder: (BuildContext context, GoRouterState state) =>
const Gallery(),
redirect: (BuildContext context, GoRouterState state) {
if (token == null || token.isEmpty) {
return '/login';
@ -47,8 +45,8 @@ class MyMaterialRouterConfig {
GoRoute(
path: "/profile",
name: "个人资料",
pageBuilder: (BuildContext context, GoRouterState state) =>
const NoTransitionPage(child: Profile())),
builder: (BuildContext context, GoRouterState state) =>
const Profile()),
],
),
GoRoute(