cxc/momo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

image detail

Browse Source
This commit is contained in:
quantulr
2023-02-11 22:29:33 +08:00
parent 5f5f2554eb
commit b2e52d0539
6 changed files with 201 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
lib/material/app.dart
View File

@ -1,7 +1,6 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:momo/material/router.dart';
import 'package:momo/provider/rerender.dart';
import 'package:momo/provider/token.dart';
import 'package:shared_preferences/shared_preferences.dart';
@ -17,9 +16,9 @@ class MyMaterialApp extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
String? token = ref.watch(tokenProvider);
UniqueKey uniqueKey = ref.watch(uniqueIdProvider);
// UniqueKey uniqueKey = ref.watch(uniqueIdProvider);
MyMaterialRouterConfig myMaterialRouterConfig =
MyMaterialRouterConfig(token,uniqueKey);
MyMaterialRouterConfig(token);
return MaterialApp.router(
routerConfig: myMaterialRouterConfig.router,

121
lib/material/detail.dart
View File

@ -1,18 +1,129 @@
import 'package:dio/dio.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:momo/models/image_resp.dart';
import 'package:momo/provider/rerender.dart';
import 'package:momo/request/http_client.dart';
class ImageDetail extends StatefulWidget {
class ImageDetail extends ConsumerStatefulWidget {
const ImageDetail({Key? key}) : super(key: key);
@override
State<ImageDetail> createState() => _ImageDetailState();
ConsumerState<ImageDetail> createState() => _ImageDetailState();
}
class _ImageDetailState extends State<ImageDetail> {
class _ImageDetailState extends ConsumerState<ImageDetail> {
Future<ImageResp?> loadImage(id) async {
try {
var resp = await dio.get("/image/detail/$id");
return ImageResp.fromJson(resp.data);
} catch (e) {
if (e is DioError) {
if (kDebugMode) {
print(e.response?.data);
}
}
}
return null;
}
double? dx;
double? dy;
double _scale = 1;
@override
Widget build(BuildContext context) {
return Center(
child: Text(GoRouterState.of(context).queryParams["id"] ?? ""),
String id = GoRouterState.of(context).queryParams["id"] ?? "";
return Container(
width: double.infinity,
height: double.infinity,
color: Colors.white,
// TODO: 缩放组件溢出
child: Stack(
alignment: Alignment.center,
children: [
Positioned(
left: dx,
top: dy,
child: Draggable(
onDragUpdate: (drag) {
print(drag);
// setState(() {
// dx = drag.localPosition.dx;
// dy = drag.localPosition.dy;
// });
},
feedback: const SizedBox(),
child: FutureBuilder(
future: loadImage(id),
builder: (BuildContext context, snapshot) {
if (snapshot.hasData) {
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 Center(
child: CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes != null
? loadingProgress.cumulativeBytesLoaded /
loadingProgress.expectedTotalBytes!
: null,
),
);
});
} else if (snapshot.hasError) {
print(snapshot.error);
return ErrorWidget("err");
}
return CircularProgressIndicator();
}),
)),
Positioned(
bottom: 10,
child: Card(
// decoration: BoxDecoration(),
elevation: 30,
// color: Colors.pinkAccent,
child: Padding(
padding: const EdgeInsets.fromLTRB(20, 5, 20, 5),
child: Row(
children: [
IconButton(
onPressed: () {
dio.delete("/image/delete/$id").then((resp) {
ref.read(uniqueIdProvider.notifier).updateId();
context.go("/");
});
},
icon: const Icon(Icons.delete)),
IconButton(
onPressed: () {
setState(() {
_scale -= 0.1;
});
},
icon: const Icon(Icons.remove_circle_outline)),
IconButton(
onPressed: () {
setState(() {
_scale += 0.1;
});
},
icon: const Icon(Icons.add_circle_outline)),
],
),
),
)),
],
),
);
}
}

54
lib/material/gallery.dart
View File

@ -3,17 +3,29 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:momo/models/image_list_resp.dart';
import 'package:momo/models/image_resp.dart';
import 'package:momo/provider/gallery.dart';
import 'package:momo/provider/rerender.dart';
import 'package:momo/request/http_client.dart';
class Gallery extends ConsumerStatefulWidget {
class Gallery extends ConsumerWidget {
const Gallery({Key? key}) : super(key: key);
@override
ConsumerState<Gallery> createState() => _GalleryState();
Widget build(BuildContext context, WidgetRef ref) {
UniqueKey key = ref.watch(uniqueIdProvider);
return ImageGrid(
key: key,
);
}
}
class _GalleryState extends ConsumerState<Gallery> {
class ImageGrid extends StatefulWidget {
const ImageGrid({Key? key}) : super(key: key);
@override
State<ImageGrid> createState() => _ImageGridState();
}
class _ImageGridState extends State<ImageGrid> {
late ScrollController _scrollController;
List<ImageResp> imageList = [];
@ -42,20 +54,12 @@ class _GalleryState extends ConsumerState<Gallery> {
}
}
void resetState() {
imageList = [];
pageNum = 1;
hasMore = true;
loading = false;
ref.read(galleryProvider.notifier).clearImage();
}
@override
void initState() {
// TODO: implement initState
super.initState();
print("init");
// ref.read(galleryProvider.notifier).clearImage();
_scrollController = ScrollController(initialScrollOffset: 5.0)
..addListener(() {
if (_scrollController.offset >=
@ -72,7 +76,6 @@ class _GalleryState extends ConsumerState<Gallery> {
@override
Widget build(BuildContext context) {
print("build gallery");
return GridView.builder(
itemCount: imageList.length,
controller: _scrollController,
@ -95,28 +98,5 @@ class _GalleryState extends ConsumerState<Gallery> {
),
);
});
// final imageList = ref.watch(galleryProvider);
// return GridView.builder(
// itemCount: imageList.length,
// controller: _scrollController,
// gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
// crossAxisCount: MediaQuery.of(context).size.width > 640 ? 5 : 3),
// itemBuilder: (BuildContext context, int index) {
// return InkWell(
// onTap: () {
// context.go(Uri(
// path: "/detail",
// queryParameters: {"id": "${imageList[index].id}"})
// .toString());
// },
// child: Image.network(
// "${dio.options.baseUrl}/image/thumbnail/${imageList[index].file_path}",
// fit: BoxFit.cover,
// errorBuilder: (BuildContext context, o, err) {
// return const Icon(Icons.error_outline);
// },
// ),
// );
// });
}
}

103
lib/material/home.dart
View File

@ -18,6 +18,8 @@ class HomePage extends ConsumerStatefulWidget {
class _HomePageState extends ConsumerState<HomePage> {
int selectedIndex = 0;
bool uploading = false;
double uploadProgress = 0;
final tabList = [
{"path": "/", "title": "相册"},
{"path": "/profile", "title": "用户资料"},
@ -45,48 +47,69 @@ class _HomePageState extends ConsumerState<HomePage> {
),
elevation: 10,
),
floatingActionButton: selectedIndex == 0
? FloatingActionButton(
onPressed: () async {
FilePickerResult? result =
await FilePicker.platform.pickFiles(type: FileType.image);
floatingActionButton:
selectedIndex == 0 && GoRouterState.of(context).fullpath == "/"
? (!uploading
? FloatingActionButton(
onPressed: () async {
FilePickerResult? result = await FilePicker.platform
.pickFiles(type: FileType.image);
if (result != null) {
String? filePath = result.files.first.path;
if (filePath == null) {
return;
}
String? mimeType = lookupMimeType(filePath);
FormData data = FormData.fromMap({
"pic": await MultipartFile.fromFile(filePath,
filename: result.files.first.name,
contentType: MediaType(mimeType!.split("/").first,
mimeType.split("/").last))
});
await dio.post("/image/upload", data: data).then((value) {
ref.read(uniqueIdProvider.notifier).updateId();
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
Icon(
Icons.check_circle,
color: Colors.white,
),
SizedBox(
width: 10,
),
Text("上传成功")
],
if (result != null) {
String? filePath = result.files.first.path;
if (filePath == null) {
return;
}
String? mimeType = lookupMimeType(filePath);
FormData data = FormData.fromMap({
"pic": await MultipartFile.fromFile(filePath,
filename: result.files.first.name,
contentType: MediaType(
mimeType!.split("/").first,
mimeType.split("/").last))
});
setState(() {
uploading = true;
});
await dio.post("/image/upload", data: data,
onSendProgress: (sended, total) {
print("$sended / $total");
setState(() {
uploadProgress = sended / total;
});
}).then((value) {
setState(() {
uploading = false;
});
ref.read(uniqueIdProvider.notifier).updateId();
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
Icon(
Icons.check_circle,
color: Colors.white,
),
SizedBox(
width: 10,
),
Text("上传成功")
],
),
backgroundColor: Colors.lightGreen,
));
});
} else {}
},
child: const Icon(Icons.add),
)
: FloatingActionButton(
onPressed: null,
child: CircularProgressIndicator(
value: uploadProgress,
),
backgroundColor: Colors.lightGreen,
));
});
} else {}
},
child: const Icon(Icons.add),
)
: null,
))
: null,
body: Row(
children: [
MediaQuery.of(context).size.width > 640

7
lib/material/router.dart
View File

@ -12,7 +12,7 @@ class MyMaterialRouterConfig {
final GlobalKey<NavigatorState> _rootNavigatorKey =
GlobalKey<NavigatorState>();
MyMaterialRouterConfig(String? token, UniqueKey uniqueKey) {
MyMaterialRouterConfig(String? token) {
router = GoRouter(
navigatorKey: _rootNavigatorKey,
initialLocation: "/",
@ -41,9 +41,8 @@ class MyMaterialRouterConfig {
GoRoute(
path: "detail",
name: "图片详情",
pageBuilder:
(BuildContext context, GoRouterState state) =>
const NoTransitionPage(child: ImageDetail())),
builder: (BuildContext context, GoRouterState state) =>
const ImageDetail())
]),
GoRoute(
path: "/profile",

1
lib/provider/gallery.dart
View File

@ -8,7 +8,6 @@ class GalleryNotifier extends Notifier<List<ImageResp>> {
}
void addImage({required List<ImageResp> imageList}) {
// return await rc.future;
state = [...state, ...imageList];
}