flutter 如何让鼠标悬停像Twitter的取消关注按钮一样?

kgsdhlau  于 2023-01-21  发布在  Flutter
关注(0)|答案(2)|浏览(170)

我想让鼠标悬停像Twitter的取消关注按钮一样:

如果我在Twitter上关注某个人,我将鼠标悬停在带有文本"关注"的按钮上,按钮的颜色就会变成红色,带有文本"取消关注"。我该如何实现这一点?
我用谷歌搜索了一下,但没有找到任何结果。
我的代码:

GestureDetector(
  onTap: () => setState(() => following = !following),
  child: Container(
    padding: const EdgeInsets.all(10.0),
    decoration: following ? BoxDecoration(border: Border.all(color: Colors.cyan), borderRadius: BorderRadius.circular(25.0)) : BoxDecoration(color: Colors.cyan, borderRadius: BorderRadius.circular(25.0)),
    child: Row(
      children: [
        Icon(following ? Icons.favorite : Icons.person_add_alt, color: following ? Colors.cyan : Colors.white),
        const SizedBox(width: AppSizes.10.0),
        Text(
          following ? "Following" : "Follow",
          style: TextStyle(color: following ? Colors.cyan : Colors.white),
        ),
      ],
    ),
  ),
),

如果您需要更多信息,请随时发表评论。
如何让鼠标移过的行为像Twitter的unfollow按钮?我将感谢任何帮助。提前感谢你!

jdzmm42g

jdzmm42g1#

MouseRegion Package GestureDetector以获取鼠标事件。

return MouseRegion(
      onEnter: (event) {
        setState(() {
          following = true;
        });
      },
      onExit: (event) {
        setState(() {
          following = false;
        });
      },
      child: GestureDetector(
wdebmtf2

wdebmtf22#

我为你做了一个示例代码。你可以很容易地跟踪鼠标,使你想要的AnimatedContainerAnimatedSwitcher
下面是结果

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  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: const Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

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

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool isMouseEnter = true;
  String buttonText = "Follow";

  void _onExitMouse(PointerEvent details) {
    setState(() {
      isMouseEnter = false;
      buttonText = "Following";
    });
  }

  void _onEnterMouse(PointerEvent details) {
    setState(() {
      isMouseEnter = true;
      buttonText = "UnFollow";
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: MouseRegion(
          onEnter: _onEnterMouse,
          onExit: _onExitMouse,
          child: AnimatedContainer(
            width: 200,
            height: 50,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(isMouseEnter ? 30 : 10)),
                border: Border.all(
                    color: isMouseEnter ? Colors.red : Colors.lightBlueAccent,
                    width: 2)),
            duration: const Duration(milliseconds: 300),
            child: AnimatedSwitcher(
                duration: const Duration(milliseconds: 300),
                child: Text(
                  buttonText,
                  key: ValueKey(isMouseEnter),
                  style: Theme.of(context).textTheme.headline5?.copyWith(
                      color: isMouseEnter ? Colors.red : Colors.lightBlueAccent),
                )),
          ),
        ),
      ),
    );
  }
}

相关问题