Flutter添加自定义下拉菜单：菜单项为页面链接的实现难题

如果你不需要维护选中状态，只是想通过下拉菜单选项触发页面跳转，PopupMenuButton 比 DropdownButton 更适配你的场景——它不需要强制传入value参数，还能直接给菜单项绑定跳转逻辑。

实现代码示例 #

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(
      initialRoute: '/',
      routes: {
        '/': (context) => const HomePage(),
        '/page1': (context) => const Page1(),
        '/page2': (context) => const Page2(),
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('自定义下拉菜单')),
      body: Center(
        child: PopupMenuButton<String>(
          // 自定义下拉触发按钮
          icon: const Icon(Icons.more_vert),
          // 统一处理选中后的跳转逻辑
          onSelected: (value) {
            switch (value) {
              case 'page1':
                Navigator.pushNamed(context, '/page1');
                break;
              case 'page2':
                Navigator.pushNamed(context, '/page2');
                break;
            }
          },
          // 构建下拉菜单项
          itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
            const PopupMenuItem<String>(
              value: 'page1',
              child: Text('跳转到页面1'),
            ),
            const PopupMenuItem<String>(
              value: 'page2',
              child: Text('跳转到页面2'),
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title: const Text('页面1')));
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title: const Text('页面2')));
  }
}

关键说明 #

• 为什么不用DropdownButton：它的设计初衷是维护选中值状态，因此必须传入value，和你只需要触发跳转的需求不匹配。
• 灵活的跳转逻辑：除了统一在onSelected里处理，也可以给单个PopupMenuItem设置onTap属性，单独定义跳转行为。
• 自定义样式：可以把icon替换成文本、自定义按钮等任意Widget，打造符合你UI风格的下拉菜单。

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