当我使用 Flutter 将鼠标放在图标上时，如何显示我的下拉菜单？答案

【问题标题】：How can I show my dropdown menu when I put my mouse on icon using Flutter?当我使用 Flutter 将鼠标放在图标上时，如何显示我的下拉菜单？
【发布时间】：2022-10-04 16:51:36
【问题描述】：

例如，我想构建一个下拉菜单，当我将光标放在我的图标上时，它会显示为弹出菜单。我在下面附上了一张图片，说明我希望如何显示。我还在下面编写了我的代码作为我尝试做的示例，尽管我知道这不是一个好的解决方案。那么有谁知道我该如何解决这个问题。点击“图片”查看我想如何修复

import 'package:flutter/material.dart';
import 'package:prove/responsive/responsive.dart';

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
 GlobalKey popUpButtonKey = GlobalKey();

  openPopUpItem() {
    GestureDetector? detector;
    searchForGestureDetector(BuildContext element) {
      element.visitChildElements((element) {
        if (element.widget != null && element.widget is GestureDetector) {
          detector = element.widget as GestureDetector;
        } else {
          searchForGestureDetector(element);
        }
      });
    }
    searchForGestureDetector(popUpButtonKey.currentContext!);
    detector!.onTap!();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      endDrawer: Drawer(
        backgroundColor: const Color(0xFF262533),
        elevation: 10,
        child: Padding(
          padding: const EdgeInsets.all(18.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
            
              SizedBox(
                width: 30,
              ),
              PopupMenuButton(
                  tooltip: '',
                  child: Text(
                    'Escorts',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 24,
                      fontFamily: 'Poppins',
                    ),
                  ),
                  itemBuilder: (BuildContext context) => <PopupMenuEntry>[]),
              Padding(padding: EdgeInsets.all(10.0)),
              PopupMenuButton(
                  tooltip: '',
                  color: Color(0xFF262533),
                  position: PopupMenuPosition.under,
                  child: Text(
                    'Agenturen & Clubs',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 24,
                      fontFamily: 'Poppins',
                    ),
                  ),
                  itemBuilder: (BuildContext context) => <PopupMenuEntry>[
                        const PopupMenuItem(
                          child: ListTile(
                            title: Text(
                              'Escortagenturen',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                        const PopupMenuItem(
                          child: ListTile(
                            title: Text(
                              'Bordelle',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                        const PopupMenuItem(
                          child: ListTile(
                            title: Text(
                              'Laufhauser',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                        const PopupMenuItem(
                          child: ListTile(
                            title: Text(
                              'Saunaclubs',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                        const PopupMenuItem(
                          child: ListTile(
                            title: Text(
                              'Domina & BDSM-Studios',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                        const PopupMenuItem(
                          child: ListTile(
                            title: Text(
                              'Tantra & Massaage-Studios',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ]),
                      Padding(padding: EdgeInsets.all(10.0)),
              PopupMenuButton(
                  tooltip: '',
                  child: Text(
                    'Inserieren',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 24,
                      fontFamily: 'Poppins',
                    ),
                  ),
                  itemBuilder: (BuildContext context) => <PopupMenuEntry>[]),
              Padding(padding: EdgeInsets.all(10.0)),
              PopupMenuButton(
                  tooltip: '',
                  color: Color(0xFF262533),
                  position: PopupMenuPosition.under,
                  child: Text(
                    'Werben',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 24,
                      fontFamily: 'Poppins',
                    ),
                  ),
                  itemBuilder: (BuildContext context) => <PopupMenuEntry>[
                        const PopupMenuItem(
                          child: ListTile(
                            title: Text(
                              'Werbenformate',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                        const PopupMenuItem(
                          child: ListTile(
                            title: Text(
                              'Preise',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ]),
              Padding(padding: EdgeInsets.all(10.0)),
              PopupMenuButton(
                  tooltip: '',
                  color: Color(0xFF262533),
                  position: PopupMenuPosition.under,
                  child: Text(
                    'Blog',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 24,
                      fontFamily: 'Poppins',
                    ),
                  ),
                  itemBuilder: (BuildContext context) => <PopupMenuEntry>[
                        const PopupMenuItem(
                          child: ListTile(
                            title: Text(
                              'Archiv',
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      ]),
              const Padding(
                padding: EdgeInsets.all(10.0),
              ),
              PopupMenuButton(
                  position: PopupMenuPosition.under,
                  tooltip: '',
                  child: const Text(
                    'Kontakt',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 24,
                      fontFamily: 'Poppins',
                    ),
                  ),
                  itemBuilder: (BuildContext context) => <PopupMenuEntry>[]),
            ],
          ),
        ),
      ),
      backgroundColor: const Color(0xFF262533),
      body: ListView(
        children: [
          Row(
            children: <Widget>[
              const SizedBox(
                width: 20,
              ),
              SizedBox(
                height: 80,
                width: 185,
                child: Image.asset('assets/images/logo2.png'),
              ),
              Spacer(),
              if (!Responsive.isMobile(context))
                PopupMenuButton(
                    tooltip: '',
                    child: Text(
                      'Escorts',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 24,
                        fontFamily: 'Poppins',
                      ),
                    ),
                    itemBuilder: (BuildContext context) => <PopupMenuEntry>[]),
              Padding(padding: EdgeInsets.all(10.0)),
              if (!Responsive.isMobile(context))
                PopupMenuButton(
                    tooltip: '',
                    color: Color(0xFF262533),
                    position: PopupMenuPosition.under,
                    child: Text(
                      'Agenturen & Clubs',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 24,
                        fontFamily: 'Poppins',
                      ),
                    ),
                    itemBuilder: (BuildContext context) => <PopupMenuEntry>[
                          const PopupMenuItem(
                            child: ListTile(
                              title: Text(
                                'Escortagenturen',
                                style: TextStyle(color: Colors.white),
                              ),
                            ),
                          ),
                          const PopupMenuItem(
                            child: ListTile(
                              title: Text(
                                'Bordelle',
                                style: TextStyle(color: Colors.white),
                              ),
                            ),
                          ),
                          const PopupMenuItem(
                            child: ListTile(
                              title: Text(
                                'Laufhauser',
                                style: TextStyle(color: Colors.white),
                              ),
                            ),
                          ),
                          const PopupMenuItem(
                            child: ListTile(
                              title: Text(
                                'Saunaclubs',
                                style: TextStyle(color: Colors.white),
                              ),
                            ),
                          ),
                          const PopupMenuItem(
                            child: ListTile(
                              title: Text(
                                'Domina & BDSM-Studios',
                                style: TextStyle(color: Colors.white),
                              ),
                            ),
                          ),
                          const PopupMenuItem(
                            child: ListTile(
                              title: Text(
                                'Tantra & Massaage-Studios',
                                style: TextStyle(color: Colors.white),
                              ),
                            ),
                          ),
                        ]),
              Padding(padding: EdgeInsets.all(10.0)),
              if (!Responsive.isMobile(context))
                PopupMenuButton(
                    tooltip: '',
                    child: Text(
                      'Inserieren',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 24,
                        fontFamily: 'Poppins',
                      ),
                    ),
                    itemBuilder: (BuildContext context) => <PopupMenuEntry>[]),
              Padding(padding: EdgeInsets.all(10.0)),
              if (!Responsive.isMobile(context))
                PopupMenuButton(
                    tooltip: '',
                    color: Color(0xFF262533),
                    position: PopupMenuPosition.under,
                    child: Text(
                      'Werben',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 24,
                        fontFamily: 'Poppins',
                      ),
                    ),
                    itemBuilder: (BuildContext context) => <PopupMenuEntry>[
                          const PopupMenuItem(
                            child: ListTile(
                              title: Text(
                                'Werbenformate',
                                style: TextStyle(color: Colors.white),
                              ),
                            ),
                          ),
                          const PopupMenuItem(
                            child: ListTile(
                              title: Text(
                                'Preise',
                                style: TextStyle(color: Colors.white),
                              ),
                            ),
                          ),
                        ]),
              Padding(padding: EdgeInsets.all(10.0)),
              if (!Responsive.isMobile(context))
                PopupMenuButton(
                    tooltip: '',
                    color: Color(0xFF262533),
                    position: PopupMenuPosition.under,
                    child: Text(
                      'Blog',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 24,
                        fontFamily: 'Poppins',
                      ),
                    ),
                    itemBuilder: (BuildContext context) => <PopupMenuEntry>[
                          const PopupMenuItem(
                            child: ListTile(
                              title: Text(
                                'Archiv',
                                style: TextStyle(color: Colors.white),
                              ),
                            ),
                          ),
                        ]),
              const Padding(
                padding: EdgeInsets.all(10.0),
              ),
              if (!Responsive.isMobile(context))
                PopupMenuButton(
                    position: PopupMenuPosition.under,
                    tooltip: '',
                    child: const Text(
                      'Kontakt',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 24,
                        fontFamily: 'Poppins',
                      ),
                    ),
                    itemBuilder: (BuildContext context) => <PopupMenuEntry>[]),
              Spacer(),
            InkWell(
            onHover: (value) {
              if (value) openPopUpItem();
            },
            onTap: () {},
            child:  PopupMenuButton(
                key: popUpButtonKey,
                color: Color(0xFF262533),
                tooltip: '',
                position: PopupMenuPosition.under,
                child: Icon(
                  Icons.person,
                  color: Colors.white,
                ),
                itemBuilder: (BuildContext context) => <PopupMenuEntry>[
                  const PopupMenuItem(
                    child: ListTile(
                      title: Text(
                        'Login',
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                  const PopupMenuItem(
                    child: ListTile(
                      title: Text(
                        'Register',
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                ],
              ),),
              const Padding(
                padding: EdgeInsets.all(10.0),
              ),
              PopupMenuButton(
                  color: Color(0xFF262533),
                  tooltip: '',
                  position: PopupMenuPosition.under,
                  child: Icon(
                    Icons.search,
                    color: Colors.white,
                  ),
                  itemBuilder: (BuildContext context) => <PopupMenuEntry>[
                        PopupMenuItem(
                          child: ListTile(
                            title: TextField(
                              decoration: InputDecoration(
                                suffixIcon: Container(
                                  decoration: BoxDecoration(
                                      color: Colors.pink,
                                      borderRadius: BorderRadius.all(
                                          Radius.circular(8.0))),
                                  child: new IconButton(
                                    style: IconButton.styleFrom(
                                        shape: CircleBorder()),
                                    icon: new Icon(
                                      Icons.arrow_right,
                                      color: Colors.white,
                                    ),
                                    onPressed: (() {}),
                                    iconSize: 25,
                                  ),
                                ),
                                filled: true, //<-- SEE HERE
                                fillColor: Colors.white,
                                enabledBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(10.0),
                                  borderSide: BorderSide(
                                    width: 1,
                                    color: Color(0xFFE51A72),
                                  ),
                                ),
                                hintText: 'Suchen...',
                                hintStyle: TextStyle(fontSize: 15),
                              ),
                            ),
                          ),
                        ),
                      ]),
              SizedBox(
                width: 20,
              ),
              if (!Responsive.isDesktop(context))
                Builder(
                    builder: (context) => IconButton(
                        onPressed: () {
                          Scaffold.of(context).openEndDrawer();
                        },
                        icon: Icon(
                          Icons.menu,
                          color: Colors.white,
                          size: 30,
                        ))),
            ],
          )
        ],
      ),
    );
  }
}

【问题讨论】：

标签： flutter dart flutter-layout flutter-web flutter-animation

【解决方案1】：

我正在使用全局键来查找小部件。

  openPopUpItem() {
    GestureDetector? detector;
    searchForGestureDetector(BuildContext element) {
      element.visitChildElements((element) {
        if (element.widget is GestureDetector) {
          detector = element.widget as GestureDetector;
        } else {
          searchForGestureDetector(element);
        }
      });
    }
    searchForGestureDetector(popUpButtonKey.currentContext!);
    detector!.onTap!();
  }

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

  @override
  State<PopUpMenuTest> createState() => _PopUpMenuTestState();
}

class _PopUpMenuTestState extends State<PopUpMenuTest> {
  GlobalKey popUpButtonKey = GlobalKey();

  openPopUpItem() {
    GestureDetector? detector;
    searchForGestureDetector(BuildContext element) {
      element.visitChildElements((element) {
        if (element.widget is GestureDetector) {
          detector = element.widget as GestureDetector;
        } else {
          searchForGestureDetector(element);
        }
      });
    }
    searchForGestureDetector(popUpButtonKey.currentContext!);
    detector!.onTap!();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          InkWell(
            onHover: (value) {
              if (value) openPopUpItem();
            },
            onTap: () {},
            child: PopupMenuButton(
              key: popUpButtonKey,
              color: Color(0xFF262533),
              tooltip: '',
              position: PopupMenuPosition.under,
              child: Icon(
                Icons.person,
                // color: Colors.white,
              ),
              itemBuilder: (BuildContext context) => <PopupMenuEntry>[
                const PopupMenuItem(
                  child: ListTile(
                    title: Text(
                      'Login',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
                const PopupMenuItem(
                  child: ListTile(
                    title: Text(
                      'Register',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

【讨论】：

我试过了，但没有任何改变@Yeasin Sheikh。我希望在将光标放在弹出按钮上的那一刻显示我的项目，而不单击它
是的，当您将光标放在图标上时，此 sn-p 显示弹出菜单项。试试flutter clean 并运行这个 sn-p。我正在使用flutter3.3.3和chrome
好的，现在它可以工作了，但我还需要别的东西。我想将粉红色悬停在图标上并将popupmenuitem的背景也悬停在粉红色@Yeasin Sheikh
您可以在onHover 中使用状态布尔变量并根据它更改颜色
请你根据我的代码给我看一个例子@Yeasin Sheikh

【解决方案2】：

尝试用InkWell() 包裹你的Icon('your icon)

bool isHover = false;

  InkWell(
  onTap: (){},
  onHover: (val) {
  setState(() {isHover = val;//set value to show or not to show dropDown
      });
  },
child: Icon(Icons.user),
),

然后只在像这样满足条件时显示菜单

 isHover ? PopupMenuButton( ///If true show menu
                color: Color(0xFF262533),
                tooltip: '',
                position: PopupMenuPosition.under,
                child: Icon(
                  Icons.person,
                  color: Colors.white,
                ),
                itemBuilder: (BuildContext context) => <PopupMenuEntry>[
                  const PopupMenuItem(
                    child: ListTile(
                      title: Text(
                        'Login',
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                  const PopupMenuItem(
                    child: ListTile(
                      title: Text(
                        'Register',
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                ],
              ) : Container(),///<- else Show nothing

【讨论】：

请问如何在我的代码中使用它，因为其中一个弹出项必须是显示其他两个弹出项的弹出按钮。我不知道该怎么做@Davis
检查更新的代码
让我再次更新我想我想念你的问题
完美地在我身边工作
我试过了，但没有任何改变@Davis。我希望在将光标放在弹出按钮上的那一刻显示我的项目，而不单击它