Flutter实现侧边迷你按钮控制类抽屉面板的展开与收起

可以通过StatefulWidget结合AnimatedContainer实现这个需求，下面是完整的实现示例：

核心实现代码 #

import 'package:flutter/material.dart';

class MiniDrawerDemo extends StatefulWidget {
  const MiniDrawerDemo({super.key});

  @override
  State<MiniDrawerDemo> createState() => _MiniDrawerDemoState();
}

class _MiniDrawerDemoState extends State<MiniDrawerDemo> {
  bool _panelExpanded = false;

  void _togglePanel() {
    setState(() {
      _panelExpanded = !_panelExpanded;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 主内容区域
          const Positioned.fill(
            child: Center(
              child: Text("应用主内容", style: TextStyle(fontSize: 20)),
            ),
          ),
          // 抽屉式迷你面板
          AnimatedContainer(
            duration: const Duration(milliseconds: 300),
            width: _panelExpanded ? 220 : 0,
            color: const Color(0xFFF5F5F5),
            padding: const EdgeInsets.only(top: 60),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: const [
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                  child: Text("菜单1", style: TextStyle(fontSize: 16)),
                ),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                  child: Text("菜单2", style: TextStyle(fontSize: 16)),
                ),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                  child: Text("菜单3", style: TextStyle(fontSize: 16)),
                ),
              ],
            ),
          ),
          // 控制按钮
          Positioned(
            left: _panelExpanded ? 220 : 0,
            top: 30,
            child: IconButton(
              icon: Icon(
                _panelExpanded ? Icons.arrow_back_ios : Icons.arrow_forward_ios,
                color: Colors.blueAccent,
              ),
              onPressed: _togglePanel,
              iconSize: 24,
            ),
          ),
        ],
      ),
    );
  }
}

关键说明 #

• 状态管理：用_panelExpanded布尔变量控制面板的展开/收起状态，点击按钮时通过setState更新状态
• 平滑动画：AnimatedContainer自动处理宽度变化的过渡动画，duration参数控制动画时长
• 布局逻辑：
  • 主内容用Positioned.fill占据整个屏幕
  • 面板默认宽度为0（完全收起），展开时设为220（可自定义）
  • 控制按钮通过Positioned固定在左侧边缘，面板展开时按钮自动移到面板右侧

可选优化 #

• 给面板添加阴影效果增强层次感：BoxDecoration(borderRadius: BorderRadius.circular(8), boxShadow: [BoxShadow(color: Colors.grey.withOpacity(0.3), blurRadius: 5)])
• 支持点击主内容区域自动收起面板：给主内容添加GestureDetector，点击时调用_togglePanel()（需判断当前面板是否展开）
• 自定义按钮样式和位置，比如调整top值改变按钮垂直位置

内容的提问来源于stack exchange，提问作者emsiloader