image scale
This commit is contained in:
@ -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)),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
@ -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,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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')),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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(
|
||||
|
Reference in New Issue
Block a user