Flutter中如何仅为特定菜单项添加可展开抽屉菜单

不用依赖全量的可展开抽屉组件，只给目标项单独维护展开状态即可实现需求。核心思路是通过状态变量控制单个菜单项的子菜单显示/隐藏，其他项保持普通列表项样式。

完整实现代码 #

import 'package:flutter/material.dart';

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

  @override
  State<CustomDrawer> createState() => _CustomDrawerState();
}

class _CustomDrawerState extends State<CustomDrawer> {
  // 仅维护「设置」项的展开状态
  bool _isSettingsExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          // 抽屉头部
          const DrawerHeader(
            decoration: BoxDecoration(color: Colors.blue),
            child: Text(
              '我的菜单',
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
          ),
          // 普通菜单项
          ListTile(
            leading: const Icon(Icons.home_outlined),
            title: const Text('首页'),
            onTap: () {
              Navigator.pop(context);
              // 这里添加首页跳转逻辑
            },
          ),
          ListTile(
            leading: const Icon(Icons.person_outlined),
            title: const Text('个人中心'),
            onTap: () {
              Navigator.pop(context);
              // 这里添加个人中心跳转逻辑
            },
          ),
          // 可展开的「设置」项
          ListTile(
            leading: const Icon(Icons.settings_outlined),
            title: const Text('设置'),
            trailing: Icon(
              _isSettingsExpanded ? Icons.expand_less : Icons.expand_more,
            ),
            onTap: () {
              setState(() {
                _isSettingsExpanded = !_isSettingsExpanded;
              });
            },
          ),
          // 展开的子菜单（带动画过渡）
          AnimatedSize(
            duration: const Duration(milliseconds: 250),
            curve: Curves.easeInOut,
            child: _isSettingsExpanded
                ? Column(
                    children: [
                      ListTile(
                        contentPadding: const EdgeInsets.only(left: 60),
                        title: const Text('账号设置'),
                        onTap: () {
                          Navigator.pop(context);
                          // 账号设置逻辑
                        },
                      ),
                      ListTile(
                        contentPadding: const EdgeInsets.only(left: 60),
                        title: const Text('通知设置'),
                        onTap: () {
                          Navigator.pop(context);
                          // 通知设置逻辑
                        },
                      ),
                      ListTile(
                        contentPadding: const EdgeInsets.only(left: 60),
                        title: const Text('隐私设置'),
                        onTap: () {
                          Navigator.pop(context);
                          // 隐私设置逻辑
                        },
                      ),
                    ],
                  )
                : const SizedBox.shrink(),
          ),
          // 其他普通项
          ListTile(
            leading: const Icon(Icons.help_outline),
            title: const Text('帮助与反馈'),
            onTap: () {
              Navigator.pop(context);
              // 帮助页逻辑
            },
          ),
        ],
      ),
    );
  }
}

关键细节说明 #

1. 状态管理：仅用一个布尔变量_isSettingsExpanded控制目标项的展开状态，不会影响其他菜单项
2. 视觉对齐：子菜单通过contentPadding设置左侧缩进，和父项保持视觉层级一致
3. 动画过渡：用AnimatedSize实现展开/收起的平滑动画，提升交互体验
4. 点击逻辑：每个菜单项的onTap里可添加对应页面跳转或业务逻辑，同时关闭抽屉

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