Flutter技术问询：如何实现Drawer与AppBar并排布局并带折叠按钮？

要实现这种Drawer和AppBar并排的布局，不能直接用Scaffold默认的滑入式抽屉组件，得自定义布局结构，同时保留AppBar上的折叠控制按钮。下面是具体实现方案：

核心思路 #

用Row横向拆分布局：左侧是可折叠的Drawer区域，右侧是包含AppBar和页面主体的主内容区。通过状态变量控制Drawer的展开/收起状态，配合动画实现平滑过渡，AppBar上的按钮负责触发状态切换。

完整代码示例 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Drawer AppBar 并排布局',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const SideDrawerPage(),
    );
  }
}

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

  @override
  State<SideDrawerPage> createState() => _SideDrawerPageState();
}

class _SideDrawerPageState extends State<SideDrawerPage> {
  // 控制Drawer是否展开，默认展开
  bool _isDrawerOpen = true;
  // Drawer展开时的宽度
  final double _drawerWidth = 240;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 去掉默认AppBar，自行在主内容区定义
      appBar: null,
      body: Row(
        children: [
          // 可折叠的Drawer区域
          AnimatedContainer(
            duration: const Duration(milliseconds: 300),
            width: _isDrawerOpen ? _drawerWidth : 0,
            color: Colors.grey[100],
            child: const Drawer(
              elevation: 1,
              child: ListView(
                padding: EdgeInsets.zero,
                children: [
                  DrawerHeader(
                    decoration: BoxDecoration(color: Colors.blue),
                    child: Text('Drawer 头部'),
                  ),
                  ListTile(title: Text('菜单选项1')),
                  ListTile(title: Text('菜单选项2')),
                  ListTile(title: Text('菜单选项3')),
                ],
              ),
            ),
          ),
          // 主内容区：包含AppBar和页面主体
          Expanded(
            child: Column(
              children: [
                // 自定义带折叠按钮的AppBar
                AppBar(
                  leading: IconButton(
                    icon: Icon(_isDrawerOpen ? Icons.chevron_left : Icons.chevron_right),
                    onPressed: () {
                      setState(() => _isDrawerOpen = !_isDrawerOpen);
                    },
                  ),
                  title: const Text('主页面标题'),
                  elevation: 1,
                ),
                // 页面主体内容
                Expanded(
                  child: Container(
                    alignment: Alignment.center,
                    child: const Text('页面主体内容'),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

关键细节说明 #

• 布局结构：用Row将Drawer和主内容区横向排列，主内容区通过Expanded占满剩余宽度，保证布局自适应屏幕尺寸。
• 动画过渡：用AnimatedContainer包裹Drawer，通过修改宽度实现展开/收起的平滑动画，替代默认的滑入效果。
• 状态控制：通过_isDrawerOpen布尔变量控制Drawer的显示状态，AppBar的leading按钮触发状态切换。
• 自定义扩展：如果需要收起时保留窄边显示图标，只需把width的收起值从0改成小数值（比如60），同时调整Drawer内的内容适配窄宽度即可。

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