feat(ui): optimize desktop operating experience

Closes #79
ZhuJHua · Dec 22, 2024 · 9363507 · 9363507
1 parent 0b6e335
commit 9363507
Show file tree

Hide file tree

Showing 7 changed files with 157 additions and 53 deletions.
diff --git a/lib/components/base/button.dart b/lib/components/base/button.dart
@@ -0,0 +1,28 @@
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+
+class FrostedGlassButton extends StatelessWidget {
+  final Widget child;
+  final double size;
+  final Function()? onPressed;
+
+  const FrostedGlassButton({super.key, required this.child, required this.size, this.onPressed});
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onPressed,
+      child: Container(
+        width: size,
+        height: size,
+        clipBehavior: Clip.hardEdge,
+        decoration: const ShapeDecoration(shape: CircleBorder()),
+        child: BackdropFilter(
+          filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
+          child: Center(child: child),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/components/sync_dash_board/sync_dash_board_logic.dart b/lib/components/sync_dash_board/sync_dash_board_logic.dart
@@ -27,4 +27,8 @@ class SyncDashBoardLogic extends GetxController {
     }
     super.onClose();
   }
+
+  void changePage(int index) {
+    pageController.animateToPage(index, duration: const Duration(milliseconds: 400), curve: Curves.easeInOut);
+  }
 }
diff --git a/lib/components/sync_dash_board/sync_dash_board_view.dart b/lib/components/sync_dash_board/sync_dash_board_view.dart
@@ -16,6 +16,7 @@ class SyncDashBoardComponent extends StatelessWidget {
     final SyncDashBoardLogic logic = Get.put(SyncDashBoardLogic());
     final SyncDashBoardState state = Bind.find<SyncDashBoardLogic>().state;
     final colorScheme = Theme.of(context).colorScheme;
+    final viewPadding = MediaQuery.viewPaddingOf(context);
 
     return GetBuilder<SyncDashBoardLogic>(
       assignId: true,
@@ -37,20 +38,42 @@ class SyncDashBoardComponent extends StatelessWidget {
                       ),
                       Padding(
                         padding: const EdgeInsets.all(16.0),
-                        child: SmoothPageIndicator(
-                          controller: logic.pageController,
-                          count: 2,
-                          axisDirection: Axis.horizontal,
-                          effect: ExpandingDotsEffect(
-                              dotWidth: 8.0,
-                              dotHeight: 8.0,
-                              activeDotColor: colorScheme.primary,
-                              dotColor: colorScheme.primary),
+                        child: Row(
+                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                          children: [
+                            IconButton(
+                                onPressed: () {
+                                  logic.changePage(0);
+                                },
+                                icon: const Icon(Icons.chevron_left_rounded)),
+                            Expanded(
+                              child: Center(
+                                child: SmoothPageIndicator(
+                                  controller: logic.pageController,
+                                  count: 2,
+                                  axisDirection: Axis.horizontal,
+                                  effect: ExpandingDotsEffect(
+                                      dotWidth: 8.0,
+                                      dotHeight: 8.0,
+                                      activeDotColor: colorScheme.primary,
+                                      dotColor: colorScheme.secondary),
+                                ),
+                              ),
+                            ),
+                            IconButton(
+                                onPressed: () {
+                                  logic.changePage(1);
+                                },
+                                icon: const Icon(Icons.chevron_right_rounded)),
+                          ],
                         ),
-                      )
+                      ),
+                      SizedBox(
+                        height: viewPadding.bottom,
+                      ),
                     ],
                   )
-                : const Center(child: NetworkLoading()));
+                : const Center(child: NetworkLoading1()));
       },
     );
   }

diff --git a/lib/components/sync_dash_board/web_dav_dashboard/web_dav_dashboard_view.dart b/lib/components/sync_dash_board/web_dav_dashboard/web_dav_dashboard_view.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:get/get.dart';
+import 'package:mood_diary/components/loading/loading.dart';
 
 import '../../../common/values/webdav.dart';
 import '../../../utils/webdav_util.dart';
@@ -187,7 +188,7 @@ class WebDavDashboardComponent extends StatelessWidget {
                   ],
                 ],
               ),
-              if (state.isFetching) const Center(child: CircularProgressIndicator()),
+              if (state.isFetching) const Center(child: Processing()),
               if (state.connectivityStatus.value == WebDavConnectivityStatus.unconnected) _buildError(),
             ],
           );

diff --git a/lib/pages/image/image_logic.dart b/lib/pages/image/image_logic.dart
@@ -1,12 +1,37 @@
+import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 
 import 'image_state.dart';
 
 class ImageLogic extends GetxController {
   final ImageState state = ImageState();
+  late final PageController pageController = PageController(initialPage: state.imageIndex.value);
+
+  @override
+  void onClose() {
+    pageController.dispose();
+    super.onClose();
+  }
 
   void changePage(int index) {
-    state.imageIndex = index;
-    update();
+    state.imageIndex.value = index;
+  }
+
+  //上一张
+  void previous() {
+    if (state.imageIndex.value > 0) {
+      state.imageIndex.value--;
+      pageController.animateToPage(state.imageIndex.value,
+          duration: const Duration(milliseconds: 400), curve: Curves.easeInOut);
+    }
+  }
+
+  //下一张
+  void next() {
+    if (state.imageIndex.value < state.imagePathList.length - 1) {
+      state.imageIndex.value++;
+      pageController.animateToPage(state.imageIndex.value,
+          duration: const Duration(milliseconds: 400), curve: Curves.easeInOut);
+    }
   }
 }
diff --git a/lib/pages/image/image_state.dart b/lib/pages/image/image_state.dart
@@ -1,20 +1,10 @@
-import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 
 class ImageState {
-  late List<String> imagePathList;
+  List<String> imagePathList = Get.arguments[0];
 
   //当前图片的的位置
-  late int imageIndex;
+  RxInt imageIndex = (Get.arguments[1] as int).obs;
 
-  //控制器
-  late PageController pageController;
-
-  ImageState() {
-    imagePathList = Get.arguments[0];
-    imageIndex = Get.arguments[1];
-    pageController = PageController(initialPage: imageIndex);
-
-    ///Initialize variables
-  }
+  ImageState();
 }
diff --git a/lib/pages/image/image_view.dart b/lib/pages/image/image_view.dart
@@ -3,6 +3,7 @@ import 'dart:io';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:mood_diary/common/values/media_type.dart';
+import 'package:mood_diary/components/base/button.dart';
 import 'package:mood_diary/utils/media_util.dart';
 import 'package:photo_view/photo_view.dart';
 import 'package:photo_view/photo_view_gallery.dart';
@@ -23,41 +24,73 @@ class ImagePage extends StatelessWidget {
           extendBodyBehindAppBar: true,
           appBar: AppBar(
             backgroundColor: colorScheme.scrim.withAlpha((255 * 0.6).toInt()),
-            title: Text(
-              '${state.imageIndex + 1}/${state.imagePathList.length}',
-              style: const TextStyle(color: Colors.white),
-            ),
+            title: Obx(() {
+              return Visibility(
+                visible: state.imagePathList.length > 1,
+                child: Text(
+                  '${state.imageIndex.value + 1}/${state.imagePathList.length}',
+                  style: const TextStyle(color: Colors.white),
+                ),
+              );
+            }),
             iconTheme: const IconThemeData(color: Colors.white),
             actions: [
               IconButton(
                   onPressed: () {
-                    MediaUtil.saveToGallery(path: state.imagePathList[state.imageIndex], type: MediaType.image);
+                    MediaUtil.saveToGallery(path: state.imagePathList[state.imageIndex.value], type: MediaType.image);
                   },
                   icon: const Icon(Icons.save_alt)),
             ],
           ),
-          body: PhotoViewGallery.builder(
-            scrollPhysics: const PageScrollPhysics(),
-            pageController: state.pageController,
-            builder: (BuildContext context, int index) {
-              return PhotoViewGalleryPageOptions(
-                imageProvider: FileImage(File(state.imagePathList[index])),
-                heroAttributes: PhotoViewHeroAttributes(tag: index),
-              );
-            },
-            itemCount: state.imagePathList.length,
-            onPageChanged: (index) {
-              logic.changePage(index);
-            },
-            loadingBuilder: (context, event) => Center(
-              child: SizedBox(
-                width: 20.0,
-                height: 20.0,
-                child: CircularProgressIndicator(
-                  value: event == null ? 0 : (event.cumulativeBytesLoaded / event.expectedTotalBytes!),
-                ),
+          body: Stack(
+            alignment: Alignment.center,
+            children: [
+              PhotoViewGallery.builder(
+                scrollPhysics: const PageScrollPhysics(),
+                pageController: logic.pageController,
+                builder: (BuildContext context, int index) {
+                  return PhotoViewGalleryPageOptions(
+                    imageProvider: FileImage(File(state.imagePathList[index])),
+                    heroAttributes: PhotoViewHeroAttributes(tag: index),
+                  );
+                },
+                itemCount: state.imagePathList.length,
+                onPageChanged: logic.changePage,
+                loadingBuilder: (context, event) => const Center(child: CircularProgressIndicator()),
               ),
-            ),
+              Obx(() {
+                return Visibility(
+                  visible: state.imageIndex.value != 0,
+                  child: Positioned(
+                    left: 16,
+                    child: FrostedGlassButton(
+                      size: 40,
+                      onPressed: logic.previous,
+                      child: const Icon(
+                        Icons.chevron_left_rounded,
+                        color: Colors.white,
+                      ),
+                    ),
+                  ),
+                );
+              }),
+              Obx(() {
+                return Visibility(
+                  visible: state.imageIndex.value != state.imagePathList.length - 1,
+                  child: Positioned(
+                    right: 16,
+                    child: FrostedGlassButton(
+                      size: 40,
+                      onPressed: logic.next,
+                      child: const Icon(
+                        Icons.chevron_right_rounded,
+                        color: Colors.white,
+                      ),
+                    ),
+                  ),
+                );
+              }),
+            ],
           ),
         );
       },