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

最新推荐文章于 2025-02-28 11:58:57 发布

原创

最新推荐文章于 2025-02-28 11:58:57 发布 · 999 阅读

0 ·

CC 4.0 BY-SA版权

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

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: _Enter,
      onExit: _Exit,
      onH