feat: responsive layout.

app/lib/pages/content.dart

@@ -4,6 +4,7 @@ import 'package:dde_gesture_manager/pages/local_manager.dart';
 import 'package:dde_gesture_manager/pages/market.dart';
 import 'package:flutter/material.dart';
 import 'package:dde_gesture_manager/models/content_layout.provider.dart';
+import 'package:dde_gesture_manager/utils/helper.dart';
 
 class Content extends StatefulWidget {
   const Content({Key? key}) : super(key: key);
@@ -13,21 +14,38 @@ class Content extends StatefulWidget {
 }
 
 class _ContentState extends State<Content> {
+  double? preWindowWidth;
+
   @override
   Widget build(BuildContext context) {
-    return ChangeNotifierProvider(
+    var windowWidth = MediaQuery.of(context).size.width;
+    var preferredPanelsStatus = H.getPreferredPanelsStatus(windowWidth);
+    var widthChanged = preWindowWidth != null && preWindowWidth != windowWidth;
+    var widget = ChangeNotifierProvider(
       create: (context) => ContentLayoutProvider()
-        ..localManagerOpened = true
-        ..marketOpened = true,
-      builder: (context, child) => Row(
-        mainAxisSize: MainAxisSize.max,
-        mainAxisAlignment: MainAxisAlignment.spaceBetween,
-        children: [
-          LocalManager(),
-          GestureEditor(),
-          Market(),
-        ],
-      ),
+        ..localManagerOpened = preferredPanelsStatus.localManagerPanelOpened
+        ..marketOpened = preferredPanelsStatus.marketPanelOpened,
+      builder: (context, child) {
+        if (widthChanged && mounted) {
+          Future.microtask(
+            () => context.read<ContentLayoutProvider>().setProps(
+                  localManagerOpened: preferredPanelsStatus.localManagerPanelOpened,
+                  marketOpened: preferredPanelsStatus.marketPanelOpened,
+                ),
+          );
+        }
+        return Row(
+          mainAxisSize: MainAxisSize.max,
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            LocalManager(),
+            GestureEditor(),
+            Market(),
+          ],
+        );
+      },
     );
+    preWindowWidth = windowWidth;
+    return widget;
   }
 }

app/lib/pages/gesture_editor.dart

@@ -1,14 +1,56 @@
+import 'package:dde_gesture_manager/constants/constants.dart';
+import 'package:dde_gesture_manager/models/content_layout.provider.dart';
+import 'package:dde_gesture_manager/utils/helper.dart';
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:dde_gesture_manager/extensions.dart';
 
 class GestureEditor extends StatelessWidget {
   const GestureEditor({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      color: Colors.black45,
-      child: Column(
-        children: [],
+    var layoutProvider = context.watch<ContentLayoutProvider>();
+    return Flexible(
+      child: Container(
+        color: Colors.black45,
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Visibility(
+                  visible: layoutProvider.localManagerOpened == false,
+                  child: IconButton(
+                    onPressed: () => H.openPanel(context, PanelType.local_manager),
+                    icon: Icon(
+                      CupertinoIcons.square_list,
+                    ),
+                  ),
+                ),
+                Visibility(
+                  visible: layoutProvider.marketOpened == false,
+                  child: IconButton(
+                    onPressed: () => H.openPanel(context, PanelType.market),
+                    icon: Icon(
+                      CupertinoIcons.cart,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+            Container(
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Text("<编辑器区域"),
+                  Text("编辑器区域>"),
+                ],
+              ),
+            ),
+          ],
+        ),
       ),
     );
   }

app/lib/pages/local_manager.dart

@@ -3,6 +3,7 @@ import 'package:flutter/animation.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:dde_gesture_manager/extensions.dart';
+import 'package:dde_gesture_manager/constants/constants.dart';
 
 class LocalManager extends StatelessWidget {
   const LocalManager({
@@ -12,18 +13,18 @@ class LocalManager extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     var isOpen = context.watch<ContentLayoutProvider>().localManagerOpened == true;
-    isOpen.sout();
     return AnimatedContainer(
-      duration: Duration(milliseconds: 300),
+      duration: mediumDuration,
       curve: Curves.easeInOut,
-      width: isOpen ? 200 : 36,
+      width: isOpen ? localManagerPanelWidth : 0,
       child: OverflowBox(
         alignment: Alignment.centerRight,
-        maxWidth: 200,
-        minWidth: 200,
+        maxWidth: localManagerPanelWidth,
+        minWidth: localManagerPanelWidth,
         child: Material(
-          color: context.t.backgroundColor,
-          elevation: 20,
+          // color: context.t.backgroundColor,
+          color: Colors.deepPurple,
+          elevation: isOpen ? 20 : 0,
           child: Column(
             mainAxisAlignment: MainAxisAlignment.start,
             children: [
@@ -41,7 +42,7 @@ class LocalManager extends StatelessWidget {
                   IconButton(
                     onPressed: () => context.read<ContentLayoutProvider>().setProps(localManagerOpened: !isOpen),
                     icon: Icon(
-                      isOpen ? CupertinoIcons.chevron_left_2 : CupertinoIcons.chevron_right_2,
+                      CupertinoIcons.chevron_left_2,
                     ),
                   ),
                 ],

app/lib/pages/market.dart

@@ -1,4 +1,8 @@
+import 'package:dde_gesture_manager/constants/constants.dart';
+import 'package:dde_gesture_manager/models/content_layout.provider.dart';
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:dde_gesture_manager/extensions.dart';
 
 class Market extends StatelessWidget {
   const Market({
@@ -7,6 +11,44 @@ class Market extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Container();
+    var isOpen = context.watch<ContentLayoutProvider>().marketOpened == true;
+    return AnimatedContainer(
+      duration: mediumDuration,
+      curve: Curves.easeInOut,
+      width: isOpen ? marketPanelWidth : 0,
+      child: OverflowBox(
+        alignment: Alignment.centerLeft,
+        maxWidth: marketPanelWidth,
+        minWidth: marketPanelWidth,
+        child: Material(
+          color: Colors.deepPurpleAccent,
+          elevation: isOpen ? 20 : 0,
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.start,
+            children: [
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  IconButton(
+                    onPressed: () => context.read<ContentLayoutProvider>().setProps(marketOpened: !isOpen),
+                    icon: Icon(
+                      CupertinoIcons.chevron_right_2,
+                    ),
+                  ),
+                  Flexible(
+                    child: Center(
+                      child: Text(
+                        "配置市场",
+                        textAlign: TextAlign.center,
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
   }
 }