如何在Flutter中实现移动端响应式导航栏：菜单图标展开页面选项

要实现移动端仅显示菜单图标、点击展开导航选项的效果，可通过以下方式修改代码：

核心思路 #

1. 通过MediaQuery获取屏幕宽度，区分移动端/桌面端布局
2. 桌面端保留原有完整导航文本，移动端隐藏文本、显示汉堡菜单图标
3. 点击汉堡图标弹出侧边抽屉（Drawer），展示所有导航选项

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'package:get/get.dart'; // 确保已添加get依赖

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // 提取导航项列表，避免重复代码
  final List<String> _navItems = [
    "Escorts",
    "Agenturen & Clubs",
    "Inserieren",
    "Werben",
    "Blog",
    "Kontakt",
  ];

  @override
  Widget build(BuildContext context) {
    final double screenWidth = MediaQuery.of(context).size.width;
    // 定义移动端阈值，可根据需求调整
    final bool isMobile = screenWidth <= 600;

    return Scaffold(
      backgroundColor: const Color(0xFF262533),
      // 移动端侧边抽屉菜单
      drawer: isMobile
          ? Drawer(
              backgroundColor: const Color(0xFF262533),
              child: ListView(
                padding: EdgeInsets.zero,
                children: [
                  // 抽屉头部显示logo
                  DrawerHeader(
                    child: SizedBox(
                      height: 80,
                      width: 185,
                      child: Image.asset('assets/images/logo2.png'),
                    ),
                  ),
                  // 生成导航项列表
                  ..._navItems.map((item) => ListTile(
                        title: Text(
                          item,
                          style: const TextStyle(
                            color: Colors.white,
                            fontSize: 20,
                            fontFamily: 'Poppins',
                          ),
                        ),
                        onTap: () {
                          // 此处可添加页面跳转逻辑
                          Navigator.pop(context); // 点击后关闭抽屉
                        },
                      )),
                ],
              ),
            )
          : null,
      body: ListView(
        children: [
          Stack(
            children: [
              Container(
                height: Get.height * .65,
                width: Get.width,
                color: const Color(0xFF262533),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    const Padding(padding: EdgeInsets.all(18.0)),
                    // Logo
                    SizedBox(
                      height: 80,
                      width: 185,
                      child: Image.asset('assets/images/logo2.png'),
                    ),
                    const Spacer(),
                    // 根据屏幕尺寸显示导航项或菜单图标
                    if (!isMobile)
                      ..._navItems.map((item) => Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 32),
                            child: Text(
                              item,
                              style: const TextStyle(
                                color: Colors.white,
                                fontSize: 24,
                                fontFamily: 'Poppins',
                              ),
                            ),
                          ))
                    else
                      IconButton(
                        icon: const Icon(Icons.menu, color: Colors.white, size: 28),
                        onPressed: () => Scaffold.of(context).openDrawer(),
                      ),
                    const Spacer(),
                    // 右侧功能图标
                    const Icon(Icons.attach_money, color: Colors.white),
                    const SizedBox(width: 20),
                    const Icon(Icons.chat, color: Colors.white),
                    const SizedBox(width: 20),
                    const Icon(Icons.person, color: Colors.white),
                    const SizedBox(width: 20),
                    const Icon(Icons.search, color: Colors.white),
                    const SizedBox(width: 32),
                  ],
                ),
              ),
            ],
          ),
          // 页面其他内容...
        ],
      ),
    );
  }
}

关键说明 #

• 响应式判断：用MediaQuery.of(context).size.width获取屏幕宽度，设置600px作为移动端阈值，可根据设计需求调整
• 抽屉菜单：移动端使用Flutter内置的Drawer组件，点击汉堡图标通过Scaffold.of(context).openDrawer()打开
• 代码复用：将导航项提取为列表，通过map方法生成UI，减少重复代码，便于后续修改导航内容
• 交互逻辑：点击抽屉内的导航项可添加页面跳转逻辑，同时关闭抽屉提升用户体验

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