如何在 Flutter 中悬停我的 TextButtons？

Question

我在 Flutter 中创建了三个文本按钮，现在我想将它们的颜色从默认颜色悬停为粉色。当我的鼠标放在按钮上时，按钮应该将其颜色更改为粉红色。谁能告诉我如何解决这个问题？

Container(
          color: Colors.grey[900],
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextButton(
                onPressed: () {},
                style: ButtonStyle(
                    backgroundColor:
                        MaterialStateProperty.all(Colors.grey[600])),
                child: const Text(
                  'Registrieren',
                  style: TextStyle(color: Colors.white,fontSize: 20,),
                ),
              ),
              const SizedBox(
                width: 12,
              ),
              TextButton(
                onPressed: () {},
                style: ButtonStyle(
                    backgroundColor:
                        MaterialStateProperty.all(Colors.grey[600])),
                child: const Text(
                  'Login',
                  style: TextStyle(color: Colors.white,fontSize: 20,),
                ),
              ),
              const SizedBox(
                width: 12,
              ),
              TextButton(
                onPressed: () {},
                style: ButtonStyle(
                    backgroundColor:
                        MaterialStateProperty.all(Colors.grey[600])),
                child: const Text(
                  'Kontakt',
                  style: TextStyle(color: Colors.white,fontSize: 20,),
                ),
              )
            ],
          ),
        ),

Answer 1

对于

textButton

，我们可以使用

foregroundColor

的

ButtonStyle

属性。

TextButton(
  style: ButtonStyle(
  foregroundColor: MaterialStateProperty.resolveWith<Color>(
    (Set<MaterialState> states) {
    if (states.contains(MaterialState.hovered))
      return Colors.pink;
    return Colors.yellow; // null throus error in flutter 2.2+.
    }
  ),
),
  onPressed: () { },
  child: Text('TextButton with custom overlay colors'),
)

Answer 2

如果您还没有解决问题，或者其他人偶然发现了这个问题......

Sabahat Hussain Qureshi 的解决方案是正确的，但也许您正在寻找其他东西......无论如何，您可以通过设置这样的全局主题来实现它：

return MaterialApp(
  theme: ThemeData(
    // HERE
    textButtonTheme: TextButtonThemeData(
      style: ButtonStyle(
        overlayColor: MaterialStateProperty.all(Colors.redAccent),
        foregroundColor: MaterialStateProperty.resolveWith<Color?>(
          (Set<MaterialState> states) {
            if (states.contains(MaterialState.hovered)) {
              return Colors.black;
            }
            return null; // defer to the defaults
          },
        ),
      ),
    ),
  ),
);

或每个实例：

return TextButton(
  // OR HERE
  style: const ButtonStyle(/* ... */),
  // ...
);

Answer 3

您需要“FocusableActionDetector”

FocusableActionDetector(
    actions: _actionMap,
    shortcuts: _shortcutMap,
    onShowHoverHighlight: _handleHoveHighlight,
    child:  // your button 

 
    ),
  ),




  bool _hovering = false;

  void _handleHoveHighlight(bool value) {
     setState(() {
        _hovering = value;
     });
   }

查看更多详情

https://api.flutter.dev/flutter/widgets/FocusableActionDetector-class.html

Answer 4

MaterialStateProperty 现已弃用，因此使用 WidgetStateProperty 代替。这是更改悬停时背景颜色和文本颜色的示例。

textButtonTheme: TextButtonThemeData(
      style: ButtonStyle(
        overlayColor: WidgetStateProperty.all(Colors.amber),
        foregroundColor: WidgetStateProperty.resolveWith(
          (Set<WidgetState> states) {
            if (states.contains(WidgetState.hovered)) {
              return Colors.white;
            }
            return Colors.black;
          },
        ),
        textStyle: WidgetStateProperty.all(
          TextStyle(
            fontSize: 14.0,
            fontWeight: FontWeight.w600,
          ),
        ),
        padding: WidgetStateProperty.all(
          EdgeInsets.all(12),
        ),
      ),
    ),

来源https://api.flutter.dev/flutter/material/ButtonStyle-class.html