✨ 添加浮动抽屉工具条优化

lib/components/permanent/overlay_tool_wrapper.dart

@@ -55,7 +55,12 @@ class OverlayToolWrapperState extends State<OverlayToolWrapper>
   void initState() {
     super.initState();
 
+    print("------OverlayToolWrapperState----initState-----");
+
     WidgetsBinding.instance.addPostFrameCallback((callback) {
+
+      print("------OverlayToolWrapperState----addPostFrameCallback-----");
+
       var px = MediaQuery.of(context).size.width - (outWidth);
       var py = 120.0;
       offset = Offset(px, py);
@@ -81,6 +86,7 @@ class OverlayToolWrapperState extends State<OverlayToolWrapper>
   }
 
   void _listenAnimate() {
+    print('-----_listenAnimate-----${_ctrl.value}-----------');
     var px = MediaQuery.of(context).size.width - (outWidth);
     offset = Offset(px - (_ctrl.value), offset.dy);
     entry.markNeedsBuild();
@@ -102,15 +108,28 @@ class OverlayToolWrapperState extends State<OverlayToolWrapper>
                 onPanUpdate: (DragUpdateDetails details) {
                   // offset = offset + details.delta;
                   double y = details.globalPosition.dy;
+                  double x = details.globalPosition.dx;
                   if (y < 50) {
                     y = 50;
                   }
+                  var px = MediaQuery.of(context).size.width - (outWidth);
+
+                  if(x<px -(width - outWidth)){
+                    x= px -(width - outWidth);
+                    out=true;
+                  }
+
+                  if(x>px){
+                    out=false;
+
+                    x= px;
+                  }
 
                   if (y > MediaQuery.of(context).size.height - 50) {
                     y = MediaQuery.of(context).size.height - 50;
                   }
 
-                  offset = Offset(offset.dx, y - boxHeight/2);
+                  offset = Offset(x, y - boxHeight/2);
                   entry.markNeedsBuild();
                 },
                 child: Container(
@@ -119,10 +138,6 @@ class OverlayToolWrapperState extends State<OverlayToolWrapper>
                   padding: EdgeInsets.all(4),
                   child: Image.asset('assets/images/icon_head.webp'),
                   decoration: BoxDecoration(
-                      // image: DecorationImage(
-                      //   fit: BoxFit.cover,
-                      //   image: AssetImage("assets/images/sworld.png")
-                      // ),
                       color: Theme.of(context).primaryColor,
                       boxShadow: [
                         BoxShadow(
@@ -134,23 +149,12 @@ class OverlayToolWrapperState extends State<OverlayToolWrapper>
                       ],
                       borderRadius:
                           BorderRadius.all(Radius.circular(outWidth / 2))),
-                  // decoration: BoxDecoration(
-                  //     color: Colors.transparent,
-                  //     border:
-                  //     Border(right: BorderSide(color: Colors.white))),
                 )),
             PictureFrame(
+              alignment: Alignment.center,
               marge: EdgeInsets.only(left: 8),
               height: boxHeight,
-              // color: Theme.of(context).primaryColor.withAlpha(88),
               width: width - outWidth + 15,
-              // decoration: BoxDecoration(
-              //     // color: Colors.blue,
-              //   image:DecorationImage(
-              //     fit: BoxFit.fill,
-              //     image: AssetImage('assets/images/sworld.png')
-              //   )
-              // ),
               child: Padding(
                 padding: const EdgeInsets.all(8.0),
                 child: Wrap(
@@ -211,16 +215,21 @@ class OverlayToolWrapperState extends State<OverlayToolWrapper>
   }
 
   void open() {
-    print('==open=======$out====');
+    print('==open=======$out===${_ctrl.status}========${_ctrl.value}=========');
     if (out) return;
-    _ctrl.forward();
+    // _ctrl.forward();
+    var px = MediaQuery.of(context).size.width - (outWidth);
+    offset = Offset(px -(width - outWidth), offset.dy);
+    entry.markNeedsBuild();
     out = true;
   }
 
   void close() {
-    print('==close=======$out====');
+    print('==close=======$out===${_ctrl.status}========${_ctrl.value}=========');
     if (!out) return;
-    _ctrl.reverse();
+    var px = MediaQuery.of(context).size.width - (outWidth);
+    offset = Offset(px , offset.dy);
+    entry.markNeedsBuild();
     out = false;
   }
 
@@ -251,6 +260,8 @@ class OverlayToolWrapperState extends State<OverlayToolWrapper>
 
   @override
   Widget build(BuildContext context) {
+    print("------OverlayToolWrapperState----build-----");
+
     return widget.child;
   }
 }

lib/views/pages/gallery/gallery_page.dart

@@ -113,7 +113,7 @@ class _GalleryPageState extends State<GalleryPage> {
 
   _buildTitle() {
     return Container(
-      height: 120,
+      height: 80,
     );
   }
 }
@@ -141,6 +141,8 @@ class FrameShower extends StatelessWidget {
         mainAxisSize: MainAxisSize.min,
         children: [
           PictureFrame(
+            width:  MediaQuery.of(context).size.shortestSide,
+            height:  MediaQuery.of(context).size.shortestSide,
             child: content,
           ),
           Text(

lib/views/pages/gallery/picture_frame.dart

@@ -7,24 +7,26 @@ class PictureFrame extends StatelessWidget {
   final double width;
   final double height;
   final Color color;
+  final Alignment alignment;
   final EdgeInsetsGeometry marge;
 
-  const PictureFrame({
-    this.child,
-    this.width,
-    this.height,
-    this.color= Colors.transparent,
-    this.marge
-  });
+  const PictureFrame(
+      {this.child,
+      this.width,
+      this.height,
+      this.alignment,
+      this.color = Colors.transparent,
+      this.marge});
 
   @override
   Widget build(BuildContext context) {
     double size = MediaQuery.of(context).size.shortestSide;
+    print('-------$size----------$width------$height---');
     return Container(
-      alignment: Alignment.center,
+      alignment: alignment,
       width: width ?? size,
       height: height ?? size,
-      padding: marge??EdgeInsets.all(20),
+      padding: marge ?? EdgeInsets.all(20),
       child: CustomPaint(
         painter: FramePainter(),
         child: Container(

lib/views/pages/home/home_page.dart

@@ -29,6 +29,7 @@ class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin{
     super.initState();
     _ctrl = ScrollController()..addListener(_updateAppBarHeight);
 
+    print("------_HomePageState----initState-----");
     WidgetsBinding.instance.addPostFrameCallback((callback){
       OverlayToolWrapper.of(context).showFloating();
     });