Flutter：点击按钮展示Widget列表功能实现求助（附代码）

方案一：使用Scaffold内置侧边抽屉 #

如果要实现类似侧边导航抽屉的效果，直接用Scaffold的Drawer组件，通过点击AppBar上的按钮触发打开：

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Demo"),
          leading: IconButton(
            icon: const Icon(Icons.menu), // 此处可替换为你的Logo组件
            onPressed: () {
              // 触发打开侧边抽屉
              Scaffold.of(context).openDrawer();
            },
          ),
        ),
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: [
              const DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
                child: Text("抽屉头部"),
              ),
              ListTile(
                title: const Text("选项1"),
                onTap: () {
                  // 点击选项后的操作
                  Navigator.pop(context);
                },
              ),
              ListTile(
                title: const Text("选项2"),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              ListTile(
                title: const Text("选项3"),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              // 可添加更多自定义组件
            ],
          ),
        ),
        body: const Center(
          child: Text("主内容区域"),
        ),
      ),
    );
  }
}

方案二：自定义弹出式抽屉（替代PopupMenuButton） #

如果想要点击按钮后弹出一个类似抽屉的垂直列表（而非侧边抽屉），可以用showModalBottomSheet实现底部弹出的抽屉，示例如下：

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: GestureDetector(
            child: const Text("点击打开抽屉"), // 替换为你的Logo组件
            onTap: () {
              showModalBottomSheet(
                context: context,
                shape: const RoundedRectangleBorder(
                  borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
                ),
                builder: (context) => Container(
                  height: 300,
                  child: Column(
                    children: [
                      const Padding(
                        padding: EdgeInsets.all(16),
                        child: Text("抽屉标题"),
                      ),
                      Expanded(
                        child: ListView(
                          children: [
                            ListTile(title: const Text("选项1")),
                            ListTile(title: const Text("选项2")),
                            ListTile(title: const Text("选项3")),
                            ListTile(title: const Text("选项4")),
                            ListTile(title: const Text("选项5")),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
          ),
        ),
        body: const Center(child: Text("主内容")),
      ),
    );
  }
}

原代码问题说明 #

PopupMenuButton是为标准下拉菜单设计的，布局样式（如宽度、位置）受系统默认限制，你设置的左右内边距会导致内容显示异常。如果一定要用PopupMenuButton调整样式，可以修改shape和子组件布局，但这种方式灵活性远不如前面两种方案，无法实现真正的抽屉式效果：

PopupMenuButton(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(8),
  ),
  itemBuilder: (context) => [
    PopupMenuItem(
      child: Container(
        alignment: Alignment.center,
        child: const Text("选项1"),
      ),
    ),
    PopupMenuItem(child: Container(alignment: Alignment.center, child: const Text("选项2"))),
    // 更多选项
  ],
  child: const Text("data"),
)

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