如何在 Flutter 中悬停文本？

Question

嗨，我想使用 Flutter 为我的文本悬停颜色。但我不知道怎么办。谁能告诉我该怎么做？这是我的代码....

Text(
                            "Lorem ipsum dolor sit amet,\n consectetur adipiscing elit.",
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 10,
                              fontFamily: 'Poppins',
                            
                            )),

Answer 1

我为此效果编写了“HoverBuilder”小部件

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

class HoverBuilder extends StatefulWidget {
  const HoverBuilder({
    required this.builder,
    Key? key,
  }) : super(key: key);

  final Widget Function(bool isHovered) builder;

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

class _HoverBuilderState extends State<HoverBuilder> {
  bool _isHovered = false;
  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (PointerEnterEvent event) => _onHoverChanged(enabled: true),
      onExit: (PointerExitEvent event) => _onHoverChanged(enabled: false),
      child: widget.builder(_isHovered),
    );
  }

  void _onHoverChanged({required bool enabled}) {
    setState(() {
      _isHovered = enabled;
    });
  }
}

然后按如下方式包装小部件

HoverBuilder(
  builder: (isHovered) {
    return Text(
      "Lorem ipsum dolor sit amet,\n consectetur adipiscing elit.",
      style: TextStyle(
        color: isHovered ? Colors.white : Colors.grey,
        fontSize: 10,
        fontFamily: 'Poppins',        
      ),
    );
  },
)

Answer 2

使用工具提示

import 'package:flutter/material.dart';

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

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

  static const String _title = 'Tooltip Sample';

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

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

  @override
  Widget build(BuildContext context) {
    return const Tooltip(
      message: 'I am a Tooltip',
      child: Text('Hover over the text to show a tooltip.'),
    );
  }
}

Answer 3

用户

MouseRegion

悬停小部件

MouseRegion(
  onEnter: (_) {
     //hover
  },
  onExit: (_) {
     //exit hover
  },
  child: Text(
    "Lorem ipsum dolor sit amet,\n consectetur adipiscing elit.",
    style: TextStyle(
      color: Colors.white,
      fontSize: 10,
      fontFamily: 'Poppins',           
    )),
 ),

Answer 4

import 'package:flutter/material.dart';

class HoverText extends StatefulWidget {
  final Widget textWidget;
  final Function() onTap;
  const HoverText({super.key, required this.textWidget, required this.onTap});

  @override
  State<HoverText> createState() => _HoverTextState();
}

class _HoverTextState extends State<HoverText> {
  bool _visible = true;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: widget.onTap,
      onTapDown: (_) {
        setState(() {
          _visible = false;
        });
      },
      onTapUp: (_) {
        setState(() {
          _visible = true;
        });
      },
      onTapCancel: () {
        setState(() {
          _visible = true;
        });
      },
      child: AnimatedOpacity(
          opacity: _visible ? 1.0 : 0.3,
          duration: Duration(milliseconds: _visible ? 600 : 0),
          curve: Curves.easeInOut,
          child: widget.textWidget),
    );
  }
}

您可以更改动画和时间来满足您的需求