flutter的侧滑窗口模拟

这是一段模拟侧滑菜单（Drawer）的flutter示例，侧滑窗口弹出后，点击该侧滑窗口以外的区域，侧滑窗口不会自动影藏。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '侧滑菜单示例',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _selectedItem = '未选择';
  bool _isDrawerOpen = false;

  void _toggleDrawer() {
    setState(() {
      _isDrawerOpen = !_isDrawerOpen;
    });
  }

  void _closeDrawer() {
    setState(() {
      _isDrawerOpen = false; // 关闭侧滑菜单
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('侧滑菜单示例'),
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: _toggleDrawer,
        ),
      ),
      body: Stack(
        children: [
          Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('点击了：$_selectedItem'),
                SizedBox(height: 20),
                ElevatedButton(
                  onPressed: _closeDrawer, // 只有点击这个按钮才能关闭侧滑菜单
                  child: Text('关闭侧滑菜单'),
                ),
              ],
            ),
          ),
          if (_isDrawerOpen) ...[
            Positioned(
              left: 0,
              top: 0,
              bottom: 0,
              width: 240.0, // 侧滑菜单宽度
              child: DrawerWidget(
                onItemSelected: (item) {
                  setState(() {
                    _selectedItem = item;
                    // 不关闭侧滑菜单
                  });
                },
                onClose: _closeDrawer, // 传递关闭菜单的方法
              ),
            ),
          ],
        ],
      ),
    );
  }
}

class DrawerWidget extends StatelessWidget {
  final ValueChanged<String> onItemSelected;
  final VoidCallback onClose;

  DrawerWidget({required this.onItemSelected, required this.onClose});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Column(
        children: [
          /*DrawerHeader(
            child: Text(
              '侧滑菜单',
              style: TextStyle(color: Colors.white, fontSize: 24),
            ),
            decoration: BoxDecoration(color: Colors.blue),
          ),*/
          ListTile(
            title: Text('首页'),
            onTap: () {
              onItemSelected('首页');
              // 不关闭侧滑菜单
            },
          ),
          ListTile(
            title: Text('设置'),
            onTap: () {
              onItemSelected('设置');
              // 不关闭侧滑菜单
            },
          ),
          ListTile(
            title: Text('关于'),
            onTap: () {
              onItemSelected('关于');
              // 不关闭侧滑菜单
            },
          ),
          ListTile(
            title: Text('关闭侧滑菜单'),
            onTap: onClose, // 点击关闭按钮
          ),
        ],
      ),
    );
  }
}

以下是对上述代码的详细分析：
一、整体功能
这段代码实现了一个具备侧滑菜单功能的 Flutter 应用界面。在应用主页面中，用户可通过点击左上角菜单图标展开侧滑菜单，菜单里有诸如 “首页”“设置”“关于” 等选项。点击这些选项能在主页面中心显示相应选择信息，且可通过特定按钮或菜单中的 “关闭侧滑菜单” 选项来关闭侧滑菜单。

二、具体分析

1. 应用启动与基础框架搭建
   代码首先导入了 Flutter 的核心 UI 库，用于构建整个应用的用户界面。随后在 main 函数里，通过 runApp 函数启动应用，并传入一个无状态组件作为根组件。这个无状态组件构建了一个 MaterialApp，设置了应用的标题，并指定了首页组件，从而搭建起应用的基础框架结构。

2. 主页面相关逻辑
   状态管理：
   主页面是一个有状态组件，其状态类中定义了两个关键变量。一个用于存储用户在侧滑菜单中所选项目的名称，初始化为 “未选择”；另一个用于表示侧滑菜单是否打开的状态，初始值为关闭状态（false）。

菜单状态切换与关闭方法：
存在两个重要方法。一个用于切换侧滑菜单的打开和关闭状态，通过更新表示菜单状态的变量值，并借助 setState 方法触发 UI 重新构建来实现切换效果。另一个方法则是专门用于关闭侧滑菜单，同样是更新菜单状态变量使其为关闭状态，再通过 setState 触发 UI 更新。

主页面布局构建：
在主页面的构建方法中，先创建了一个 Scaffold 作为布局容器。在 Scaffold 的顶部 appBar 区域，设置了应用的 标题，并添加了一个可点击的图标按钮，点击该按钮能触发侧滑菜单状态的切换操作。在 Scaffold 的 body 部分，采 用了 Stack 布局方式。其中包含一个 Center 布局下的 Column 布局，用于在主页面中心展示相关信息，比如当前所 选项目信息以及一个用于关闭侧滑菜单的按钮。另外，当侧滑菜单处于打开状态时，会在合适位置展示侧滑菜单组 件，该组件会根据用户在菜单中的操作进行相应处理，比如更新主页面显示信息或关闭菜单等。

3. 侧滑菜单组件
   侧滑菜单是一个无状态组件，它接收两个回调函数作为参数。一个回调函数用于在用户点击菜单内选项时，将所 选项目名称传递出去，以便主页面更新显示内容；另一个回调函数则用于在点击 “关闭侧滑菜单” 选项时，执行关闭菜单的操作。在侧滑菜单组件的构建方法中，先创建了一个白色背景的容器，然后在容器内通过 Column 布局添加了多个对应不同选项的 ListTile 组件。点击这些选项时，会通过相应回调函数传递所选项目名称且不会自动关闭菜单；而点击 “关闭侧滑菜单” 选项时，会调用另一个回调函数来关闭菜单。原本代码中有一处可添加侧滑菜单头部区域的注释部分，若取消注释可实现添加带有特定样式头部区域的功能。