Flutter 自定义Lable 增加鼠标移入移出

—片槐树叶

于 2021-06-23 15:42:28 发布

阅读量979

点赞数

本文链接：https://blog.csdn.net/flutter_learner/article/details/118154767

版权

本文介绍如何在Flutter中创建自定义标签组件，并实现鼠标悬停时的高亮效果和移出时的恢复，详细讲解了相关代码实现和交互逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';

class MyLable extends StatefulWidget {
  MyLable({
    var key,
    required this.label,
    required this.onPressed,
    this.backgroundcolor,
  }) : super(key: key);
  final Widget label;
  final VoidCallback onPressed;
  final Color? backgroundcolor;

  _MyLableState createState() => _MyLableState();
}

class _MyLableState extends State<MyLable> {
  Color chipColor = Color.fromRGBO(0, 0, 0, 0.7);
  void _Enter(PointerEnterEvent details) {
    setState(() {
      chipColor = Color.fromRGBO(0, 0, 255, 0.7);
    });
  }

  void _Exit(PointerExitEvent details) {
    setState(() {
      chipColor = Color.fromRGBO(0, 0, 0, 0.7);
    });
  }

  void _Hover(PointerHoverEvent details) {
    setState(() {
      chipColor = Color.fromRGBO(0, 0, 255, 0.7);
    });
  }

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter