Flutter Web PopupMenuButton -无法设置悬停时打开菜单的按钮的样式

cfh9epnr 于 6个月前发布在 Flutter

关注(0)|答案(1)|浏览(75)

我累了半天，现在改变foregroundColor和删除backgroundColor的按钮悬停，我的代码：

final ThemeData lightTheme = ThemeData(
  menuButtonTheme: MenuButtonThemeData(style: ButtonStyle(
    foregroundColor: MaterialStateProperty.resolveWith<Color?>(
      (Set<MaterialState> states)  {
        if (states.contains(MaterialState.hovered)) {
          print("this never printed!!!");
          return Colors.red;
        }
        return Colors.blue;
      },
      
    ),
  ))  
);


class AppScreen extends StatelessWidget {
  final Widget? child;
  AppScreen({Key? key, this.child}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
        appBar: AppBar(
          title: Text('AppBar Demo'),
          actions: <Widget>[ 
            PopupMenuButton(
              itemBuilder: (context) => [
                PopupMenuItem<int>(
                  value: 0,
                  child: Text("My Emails"),
                ),
                PopupMenuItem<int>(
                    value: 1, child: Text("Sign Out"),
                ),
              ],
              onSelected: (item) {},
              child: TextButton.icon(
                style: Theme.of(context).menuButtonTheme.style, 
                icon: Icon(Icons.account_circle),
                label: Text(
                  'Maya Amor'
                ), onPressed: null,
              ),       
            )
          ],
        ),
      body: child,
    );
  }
}

字符串
按钮的颜色永远不会改变，当我悬停在按钮上时，我可以看到按钮的背景以一种我无法改变的方式发生变化，无论我做了什么。

flutter

来源：https://stackoverflow.com/questions/77480045/flutter-web-popupmenubutton-cant-style-the-button-that-open-the-menu-on-hover

1条答案

按热度按时间

khbbv19g1#

要在悬停时更改PopupMenuItem的color，可以使用MouseRegion小部件
在onHover和onExit函数中，可以实现更改color的逻辑
widget的hover color通常由app的theme控制。如果你想为特定的widget禁用hover color，你可以将它 Package 在Theme widget中，并在ThemeData中将hoverColor设置为Colors.transparent。

Theme(
            data: ThemeData(hoverColor: Colors.transparent),
            child: MouseRegion(
              onHover: (event) {
                setState(() {
                  buttonColor = Colors.red; // Change color to red when hovered
                });
              },
              onExit: (event) {
                setState(() {
                  buttonColor = Colors
                      .black; // Change color back to blue when mouse exits
                });
              },
              child: PopupMenuButton(
                itemBuilder: (context) => [
                  PopupMenuItem<int>(
                    value: 0,
                    child: Text("My Emails"),
                  ),
                  PopupMenuItem<int>(
                    value: 1,
                    child: Text("Sign Out"),
                  ),
                ],
                onSelected: (item) {},
                child: TextButton.icon(
                  style: ButtonStyle(
                    foregroundColor: MaterialStateProperty.all(buttonColor),
                  ),
                  icon: Icon(Icons.account_circle),
                  label: Text('Maya Amor'),
                  onPressed: null,
                ),
              ),
            ),
          ),

字符串
验证码：

class AppScreen extends StatefulWidget {
  final Widget? child;
  AppScreen({Key? key, this.child}) : super(key: key);

  @override
  _AppScreenState createState() => _AppScreenState();
}

class _AppScreenState extends State<AppScreen> {
  Color buttonColor = Colors.black;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AppBar Demo'),
        actions: <Widget>[
          Theme(
            data: ThemeData(hoverColor: Colors.transparent),
            child: MouseRegion(
              onHover: (event) {
                setState(() {
                  buttonColor = Colors.red; // Change color to red when hovered
                });
              },
              onExit: (event) {
                setState(() {
                  buttonColor = Colors
                      .black; // Change color back to blue when mouse exits
                });
              },
              child: PopupMenuButton(
                itemBuilder: (context) => [
                  PopupMenuItem<int>(
                    value: 0,
                    child: Text("My Emails"),
                  ),
                  PopupMenuItem<int>(
                    value: 1,
                    child: Text("Sign Out"),
                  ),
                ],
                onSelected: (item) {},
                child: TextButton.icon(
                  style: ButtonStyle(
                    foregroundColor: MaterialStateProperty.all(buttonColor),
                  ),
                  icon: Icon(Icons.account_circle),
                  label: Text('Maya Amor'),
                  onPressed: null,
                ),
              ),
            ),
          ),
        ],
      ),
      body: widget.child,
    );
  }
}

型
输出值：

的数据

赞(0）回复(0）举报 6个月前

我来回答

Flutter Web PopupMenuButton -无法设置悬停时打开菜单的按钮的样式

1条答案

相关问题

热门标签

最新问答