Flutter web - 在悬停时如何更改 Flatbutton TEXT 颜色答案

【问题标题】：Flutter web - On hover how to change Flatbutton TEXT colorFlutter web - 在悬停时如何更改 Flatbutton TEXT 颜色
【发布时间】：2020-12-01 22:24:56
【问题描述】：

嗨，我在 Flutter 网络上工作，当我悬停 flatbutton 时，我想更改文本颜色。它悬停而不是按下。但是我如何检测/知道它被悬停，所以我可以管理状态颜色。谢谢

FlatButton(
              color: Colors.white, 
              textColor: Colors.teal[700], //when hovered text color change
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(5),
                side: BorderSide(
                  color: Colors.teal[700],
                ),
              ),
              onPressed: () {},
              child: Text("Log in"),
            ),

【问题讨论】：

标签： flutter flutter-layout flutter-web

【解决方案1】：

您可以在下面复制粘贴运行完整代码
你可以使用MouseRegion的onHover属性

代码sn-p

void _incrementExit(PointerEvent details) {
    setState(() {
      textColor = Colors.blue;
      _exitCounter++;
    });
  }

void _updateLocation(PointerEvent details) {
    setState(() {
      textColor = Colors.red;
      x = details.position.dx;
      y = details.position.dy;
    });
  }
  
return MouseRegion(
      onEnter: _incrementEnter,
      onHover: _updateLocation,
      onExit: _incrementExit,
      child: FlatButton(
        color: Colors.white,
        textColor: Colors.teal[700], //when hovered text color change
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(5),

工作演示

完整代码

import 'package:flutter/material.dart';

import 'package:flutter/widgets.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

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

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  Color textColor = Colors.blue;
  int _enterCounter = 0;
  int _exitCounter = 0;
  double x = 0.0;
  double y = 0.0;

  void _incrementEnter(PointerEvent details) {
    setState(() {
      _enterCounter++;
    });
  }

  void _incrementExit(PointerEvent details) {
    setState(() {
      textColor = Colors.blue;
      _exitCounter++;
    });
  }

  void _updateLocation(PointerEvent details) {
    setState(() {
      textColor = Colors.red;
      x = details.position.dx;
      y = details.position.dy;
    });
  }


  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: _incrementEnter,
      onHover: _updateLocation,
      onExit: _incrementExit,
      child: FlatButton(
        color: Colors.white,
        textColor: Colors.teal[700], //when hovered text color change
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(5),
          side: BorderSide(
            color: Colors.teal[700],
          ),
        ),
        onPressed: () {},
        child: Text("Log in", style: TextStyle(color: textColor),),
      ),
    );
  }
}

【讨论】：

【解决方案2】：

您可以像这样更改按钮样式的foregroundColor 属性：

ElevatedButton.styleFrom().copyWith(
      backgroundColor: MaterialStateProperty.resolveWith<Color?>(
        (states) {
          if (states.contains(MaterialState.hovered)) {
            return Colors.blue;
          } else if (states.contains(MaterialState.pressed)) {
            return Colors.yellow;
          }
          return Colors.red;
        },
      ),
      foregroundColor: MaterialStateProperty.resolveWith<Color?>(
        (states) {
          if (states.contains(MaterialState.hovered)) {
            return Colors.green;
          }
          return Colors.black;
        },
      ),
    );

【讨论】：

Thx 很棒 :)

【解决方案3】：

对于textButton，我们可以使用ButtonStyle 的foregroundColor 属性。

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

【讨论】：

【解决方案4】：

还有一个包也可以使用 MouseRegion 来实现这一点。

https://pub.dev/packages/hovering

例子：

HoverButton(
  onpressed: () {
    print('test');
  },
  color: Colors.green,
  hoverColor: Colors.red,
  hoverTextColor: Colors.blue,
  child: Text('test'),
)

【讨论】：