feat:

1. add photo_view to improve experience. 2. improve performance. 3. add drawer for portrait mode. 4. improve UI.
Amarillys · Mar 1, 2023 · aa74288 · aa74288
1 parent 878c72b
commit aa74288
Show file tree

Hide file tree

Showing 21 changed files with 203 additions and 70 deletions.
diff --git a/lib/components/collection.dart b/lib/components/collection.dart
@@ -2,6 +2,7 @@ import 'dart:core';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:global_configs/global_configs.dart';
+import 'package:path/path.dart' as p;
 
 import 'package:chiyo_gallery/events/eventbus.dart';
 import 'package:chiyo_gallery/events/events_definition.dart';
@@ -58,7 +59,7 @@ class _CollectionBarState extends State<CollectionBar> {
                 margin: const EdgeInsets.all(10),
                 child: Icon(Icons.folder_special, size: 40,
                     color: ImageUtil.mapColorFromString(GlobalConfigs().get('baseColor')))),
-            Text(collections[i])
+            Text(p.basename(collections[i]))
           ])
       ));
     }

diff --git a/lib/components/file_manager.dart b/lib/components/file_manager.dart
@@ -27,7 +27,7 @@ class FileBrowser extends StatefulWidget {
 
 class ViewerState extends State<FileBrowser> {
   static final eventBus = GlobalEventBus.instance;
-  static const int rowWidth = 330;
+  static const int rowWidth = 300;
   List<MediaFile> files = [];
   List<String> histories = [""];
   List<int> selected = [];
@@ -39,6 +39,7 @@ class ViewerState extends State<FileBrowser> {
   final _scrollController = ScrollController();
   Color _baseColor = Colors.green;
   bool showEmptyFile = false;
+  Executor executor = Executor(concurrency: 2);
 
   @override
   void initState() {
@@ -70,6 +71,9 @@ class ViewerState extends State<FileBrowser> {
   }
 
   void initPath([String params = '']) async {
+    if (executor.waitingCount > 0) {
+      executor.close();
+    }
     var fetchedFiles =
         await widget.controller.fetchFile(params: params, sortType: sortType);
     if (!showEmptyFile) {
@@ -99,8 +103,7 @@ class ViewerState extends State<FileBrowser> {
   }
 
   fetchThumb(Iterable<MediaFile> files) async {
-    final generateThread = Platform.isWindows ? 3 : 2;
-    final executor = Executor(concurrency: generateThread);
+    executor = Executor(concurrency: 2);
     for (var i = 0; i < files.length; ++i) {
       executor.scheduleTask(() async {
         final newThumbFile =

diff --git a/lib/components/fullscreen_viewer.dart b/lib/components/fullscreen_viewer.dart
@@ -1,6 +1,7 @@
 import 'dart:io';
 import 'package:flutter/material.dart';
 import 'package:flutter_avif/flutter_avif.dart';
+import 'package:photo_view/photo_view.dart';
 
 class FullScreenViewer extends StatefulWidget {
   final String imagePath;
@@ -13,17 +14,19 @@ class FullScreenViewer extends StatefulWidget {
 class FullScreenViewerState extends State<FullScreenViewer> {
   @override
   Widget build(BuildContext context) {
-    StatefulWidget imageWidget;
+    ImageProvider imageWidget;
     if (widget.imagePath.contains('.avif')) {
-      imageWidget = AvifImage.file(File(widget.imagePath), fit: BoxFit.contain);
+      imageWidget = AvifImage.file(File(widget.imagePath), fit: BoxFit.contain).image;
     } else {
-      imageWidget = Image.file(File(widget.imagePath), fit: BoxFit.contain);
+      imageWidget = Image.file(File(widget.imagePath), fit: BoxFit.contain).image;
     }
     return Scaffold(
         body: Stack(
-        children: [
-          Positioned.fill(child: imageWidget)
-      ],
-    ));
+          children: [
+            Positioned.fill(child:
+              PhotoView(imageProvider: imageWidget)
+            )
+          ]
+        ));
   }
 }
diff --git a/lib/components/menu.dart b/lib/components/menu.dart
@@ -1,6 +1,8 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/app_localizations.dart';
+
 import 'package:chiyo_gallery/events/eventbus.dart';
 import 'package:chiyo_gallery/events/events_definition.dart';
-import 'package:flutter/material.dart';
 
 class ContextMenu extends StatefulWidget {
   const ContextMenu({super.key});
@@ -24,9 +26,9 @@ class _ContextMenuState extends State<ContextMenu> {
       if (event.itemIndexes.length == 1) {
         setState(() {
           options = <PopupMenuEntry>[
-            const PopupMenuItem(
+            PopupMenuItem(
               value: 'add_collection',
-              child: Text('添加到收藏夹'),
+              child: Text(AppLocalizations.of(context)!.addToCollection),
             ),
             const PopupMenuItem(
               value: 'move',

diff --git a/lib/components/sidebar.dart b/lib/components/sidebar.dart
@@ -1,10 +1,12 @@
 import 'package:flutter/material.dart';
+import 'package:global_configs/global_configs.dart';
 
 import 'package:chiyo_gallery/components/storage_bar.dart';
 import 'package:chiyo_gallery/components/collection.dart';
 
 class SideBar extends StatefulWidget {
-  const SideBar({ super.key });
+  final bool isPortrait;
+  const SideBar({ super.key, required this.isPortrait });
 
   @override
   State<SideBar> createState() => SideBarState();
@@ -20,11 +22,25 @@ class SideBarState extends State<SideBar> {
 
   @override
   Widget build(BuildContext context) {
-    return Column(
-      children: [
-        storageBar,
-        const CollectionBar()
-      ],
+    var widgets = [
+      storageBar,
+      const CollectionBar()
+    ];
+    if (widget.isPortrait) {
+      widgets.insert(0, Container(
+        margin: const EdgeInsets.only(top: 30),
+        height: 59,
+        color: Colors.pink,
+        child: const Align(
+          alignment: Alignment.center,
+          child: Text("CHIYO GALLERY", style: TextStyle(fontSize: 30, color: Colors.white))
+        )
+      ));
+    }
+    return Container(
+      width: widget.isPortrait ? MediaQuery.of(context).size.width / 1.5 : null,
+      color: widget.isPortrait ? const Color.fromRGBO(250, 250, 250, 0.9) : Colors.transparent,
+      child: Column(children: widgets)
     );
   }
 }
diff --git a/lib/components/storage_bar.dart b/lib/components/storage_bar.dart
@@ -44,6 +44,7 @@ class StorageBar extends StatelessWidget {
 
   onItemTap(String path) {
     eventBus.fire(ChangePathEvent(path));
+    eventBus.fire(CloseDrawerEvent());
   }
 
   static Widget setupIconByType(int index) {

diff --git a/lib/events/events_definition.dart b/lib/events/events_definition.dart
@@ -24,4 +24,8 @@ class ItemChooseEvent {
   List<int> itemIndexes;
   List<String> paths;
   ItemChooseEvent(this.itemIndexes, this.paths);
+}
+
+class CloseDrawerEvent {
+  CloseDrawerEvent();
 }
diff --git a/lib/l10n/app_en.arb b/lib/l10n/app_en.arb
@@ -27,5 +27,6 @@
   "collection": "Collection",
   "storageDevice": "Storage Devices",
   "internalStorage": "Internal Storage",
-  "externalStorage": "External Storage"
+  "externalStorage": "External Storage",
+  "addToCollection": "Add to Collections"
 }
diff --git a/lib/l10n/app_ja.arb b/lib/l10n/app_ja.arb
@@ -8,5 +8,6 @@
     "collection": "コレクション",
     "storageDevice": "Storage Devices",
     "internalStorage": "Internal Storage",
-    "externalStorage": "External Storage"
+    "externalStorage": "External Storage",
+    "addToCollection": "Add to Collections"
 }
diff --git a/lib/l10n/app_zh.arb b/lib/l10n/app_zh.arb
@@ -8,5 +8,6 @@
     "collection": "收藏夹",
     "storageDevice": "存储设备",
     "internalStorage": "手机存储",
-    "externalStorage": "外部存储"
+    "externalStorage": "外部存储",
+    "addToCollection": "添加到收藏夹"
 }
diff --git a/lib/l10n/app_zh_tw.arb b/lib/l10n/app_zh_tw.arb
@@ -8,5 +8,6 @@
     "collection": "收藏夹",
     "storageDevice": "Storage Devices",
     "internalStorage": "Internal Storage",
-    "externalStorage": "External Storage"
+    "externalStorage": "External Storage",
+     "addToCollection": "添加到收藏夾"
 }
diff --git a/lib/main.dart b/lib/main.dart
@@ -2,8 +2,8 @@ import 'package:flutter/material.dart';
 import 'package:global_configs/global_configs.dart';
 import 'package:flutter_native_splash/flutter_native_splash.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
-import './storage/storage.dart';
-import './pages/main.dart';
+import 'package:chiyo_gallery/storage/storage.dart';
+import 'package:chiyo_gallery/pages/main.dart';
 
 void main() async {
   WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();

diff --git a/lib/pages/main.dart b/lib/pages/main.dart
@@ -1,3 +1,6 @@
+
+import 'package:chiyo_gallery/utils/string_util.dart';
+import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 import 'package:toast/toast.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
@@ -8,7 +11,7 @@ import 'package:chiyo_gallery/components/sidebar.dart';
 import 'package:chiyo_gallery/components/menu.dart';
 import 'package:chiyo_gallery/events/eventbus.dart';
 import 'package:chiyo_gallery/events/events_definition.dart';
-
+import 'package:chiyo_gallery/storage/storage.dart';
 
 class MyHomePage extends StatefulWidget {
   const MyHomePage({super.key, required this.title});
@@ -21,26 +24,36 @@ class MyHomePage extends StatefulWidget {
 
 class _MyHomePageState extends State<MyHomePage> {
   static final eventBus = GlobalEventBus.instance;
+  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
+
+  @override
+  void initState() {
+    super.initState();
+    eventBus.on<CloseDrawerEvent>().listen((event) {
+      _scaffoldKey.currentState?.closeDrawer();
+    });
+  }
 
   @override
   Widget build(BuildContext context) {
     ToastContext().init(context);
     return OrientationBuilder(
       builder: (BuildContext context, Orientation orientation) {
         bool isPortrait = orientation == Orientation.portrait;
-        List<Widget> titleComps = [const TitleBar()];
+        final sideBarWidget = SideBar(isPortrait: isPortrait);
+        List<Widget> titleComps = [TitleBar(isPortrait: isPortrait)];
         if (!isPortrait) {
             titleComps.insert(0, Container(
-              margin: const EdgeInsets.only(bottom: 3, right: 15),
-                child: const Text("CHIYO GALLERY", style: TextStyle(fontSize: 24))));
+              margin: const EdgeInsets.only(bottom: 3),
+                child: const Text("CHIYO GALLERY  - ", style: TextStyle(fontSize: 24))));
         }
         return Scaffold(
+            key: _scaffoldKey,
             appBar: AppBar(
               title: Row(children: titleComps),
               leading: isPortrait ? IconButton(
                 icon: const Icon(Icons.menu),
-                onPressed: () {
-                },
+                onPressed: () { _scaffoldKey.currentState?.openDrawer(); },
               ) : IconButton(
                 icon: const Icon(Icons.arrow_back_ios_outlined),
                 onPressed: () {
@@ -56,29 +69,32 @@ class _MyHomePageState extends State<MyHomePage> {
             ),
             body: isPortrait ?
                 Row(children: const <Widget>[Expanded(flex: 1, child: BrowserPage())])
-              : Row(children: const <Widget>[
-                      Expanded(flex: 2, child: SideBar()),
-                      Expanded(flex: 5, child: BrowserPage())
+              : Row(children: <Widget>[
+                      Expanded(flex: 2, child: sideBarWidget),
+                      const Expanded(flex: 6, child: BrowserPage())
                 ]),
             floatingActionButton: FloatingActionButton(
               onPressed: () {},
               tooltip: 'Increment',
               child: const Icon(Icons.add)
-            )
+            ),
+            drawer: sideBarWidget
         );
     });
   }
 }
 
 class TitleBar extends StatefulWidget {
-  const TitleBar({ super.key });
+  final bool isPortrait;
+  const TitleBar({ super.key, required this.isPortrait });
 
   @override
   State<TitleBar> createState() => _TitleBarState();
 }
 
 class _TitleBarState extends State<TitleBar> {
   static final eventBus = GlobalEventBus.instance;
+  static final storage = Storage.instance;
   List<String> paths = [];
 
   @override
@@ -87,22 +103,44 @@ class _TitleBarState extends State<TitleBar> {
     eventBus.on<PathChangedEvent>().listen((event) {
       setState(() {
         paths = p.split(event.path);
+        paths[0] = storage.dealPrefixPath(paths[0]);
       });
     });
   }
 
   @override
   Widget build(BuildContext ctx) {
+    List<Widget> pathTab = [];
+    var startIndex = 0;
+    if (widget.isPortrait && paths.length > 2) {
+      startIndex = paths.length - 2;
+    }
+
+    var iconSize = widget.isPortrait ? 15.0 : 18.0;
+    var fontSize = widget.isPortrait ? 18.0 : 24.0;
+    var margin = widget.isPortrait ?
+      const EdgeInsets.only(left: 3, right:3) :
+      const EdgeInsets.only(bottom: 3, left: 5, right: 5);
+    for (var i = startIndex; i < paths.length; ++i) {
+      pathTab.add(InkWell(
+        onTap: () {
+          final targetPath = paths.slice(0, i + 1).join('/');
+          eventBus.fire(ChangePathEvent(targetPath));
+        },
+        child: Container(
+          margin: margin,
+          child: Text(StringUtil.cutString(paths[i], 9), style: TextStyle(fontSize: fontSize)),
+        )
+      ));
+      if (i < paths.length - 1) {
+        pathTab.add(Container(
+          margin: const EdgeInsets.all(2.0),
+          child: Icon(Icons.arrow_forward_ios, size: iconSize),
+        ));
+      }
+    }
     return Row(
-      children: paths.map((title) {
-                  return InkWell(
-                    onTap: () {},
-                    child: Container(
-                      margin: const EdgeInsets.only(bottom: 3, right: 20),
-                      child: Text(title),
-                    ),
-                  );
-                }).toList()
+      children: pathTab
     );
   }
 }