Flutter悬浮交互插件hoverover的使用

发布于 1周前 作者 h691938207 来自 Flutter

Flutter悬浮交互插件hoverover的使用

hoverover 是一个 Flutter 插件，用于在 Web 和桌面应用中实现悬浮效果。本文将详细介绍如何安装和使用该插件，并提供一个完整的示例。

安装

  1. 在 pubspec.yaml 文件中添加最新版本的 hoverover 包，并运行 dart pub get：
dependencies:
  hoverover: ^0.1.1
  1. 导入包并在 Flutter 应用中使用它：
import 'package:hoverover/hoverover.dart';

示例

hoverover 提供了多个可修改的属性，包括动画持续时间、X 轴和 Y 轴的平移值等。以下是一个完整的示例代码，展示了如何使用 hoverover 插件：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hoverover Example'),
        ),
        body: HoverOverExample(),
      ),
    );
  }
}

class HoverOverExample extends StatelessWidget {
  const HoverOverExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        HoverOver(
          builder: (isHovered) {
            /// change color on hover
            final color = isHovered ? Colors.orange : Colors.redAccent;
            return PhysicalModel(
              color: Colors.white,
              elevation: isHovered ? 16 : 0,
              child: Container(
                height: 50,
                width: 200,
                color: color,
                child: const Center(
                  child: Text("Hoverover me"),
                ),
              ),
            );
          },
          /// animation duration
          animationDurationInMilliseconds: 600,
          /// translation of x axis
          translateXAxis: 7,
          /// translation of y axis
          translateYAxis: 15,
        ),
        const SizedBox(
          height: 30,
        ),
      ],
    );
  }
}

解释

  • builder: 这是一个回调函数，返回一个 Widget。当悬浮效果激活时，isHovered 参数为 true，否则为 false。在这个例子中，我们根据 isHovered 的值改变容器的颜色和阴影高度。
  • animationDurationInMilliseconds: 动画的持续时间，单位为毫秒。在这个例子中，设置为 600 毫秒。
  • translateXAxis 和 translateYAxis: 分别表示在悬浮时 X 轴和 Y 轴的平移值。在这个例子中，分别设置为 7 和 15。

下一步目标

  • ❌ 添加更多悬浮效果到包中。
  • ❌ 添加更多悬浮功能到包中。

贡献者

希望这个示例能帮助你更好地理解和使用 hoverover 插件。如果你有任何问题或建议，欢迎在 GitHub 上提交 issue 或 PR。


更多关于Flutter悬浮交互插件hoverover的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter悬浮交互插件hoverover的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter中使用hoverover插件来实现悬浮交互效果的代码示例。hoverover插件允许开发者在Flutter应用中实现类似于桌面端的悬浮菜单或悬浮按钮效果。不过，需要注意的是，hoverover并不是Flutter官方或广泛认知的插件，因此这里提供一个假设性的实现思路和代码示例，该示例将展示如何通过自定义逻辑来模拟悬浮交互效果。

首先，假设我们有一个自定义的悬浮按钮组件，当用户将鼠标悬停在按钮上时，显示一个悬浮菜单。为了简单起见，我们将使用flutter_hooks和provider（用于状态管理）以及基本的鼠标事件监听来实现这一功能。

1. 添加依赖

在你的pubspec.yaml文件中添加必要的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_hooks: ^0.18.0 # 请检查最新版本
  provider: ^6.0.0 # 请检查最新版本

2. 创建悬浮按钮组件

创建一个自定义的悬浮按钮组件，该组件监听鼠标事件并显示或隐藏悬浮菜单。

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:provider/provider.dart';

// 创建一个状态管理模型来存储悬浮菜单的显示状态
class HoverState with ChangeNotifier {
  bool isMenuVisible = false;

  void toggleMenuVisibility() {
    isMenuVisible = !isMenuVisible;
    notifyListeners();
  }
}

// 自定义悬浮按钮组件
class HoverButton extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final hoverState = useProvider(HoverState.provider);
    final hoverController = useMouseRegion(
      onEnter: (_) => hoverState.toggleMenuVisibility(),
      onExit: (_) => hoverState.toggleMenuVisibility(),
      child: Container(
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(10),
        ),
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Text(
            'Hover Me',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );

    return Stack(
      children: [
        hoverController,
        if (hoverState.isMenuVisible)
          Positioned(
            top: 50, // 调整位置以适应你的布局
            left: 0,
            child: Material(
              elevation: 4,
              child: Container(
                constraints: BoxConstraints(maxWidth: 200),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    ListTile(
                      leading: Icon(Icons.menu),
                      title: Text('Menu Item 1'),
                      onTap: () {},
                    ),
                    ListTile(
                      leading: Icon(Icons.settings),
                      title: Text('Menu Item 2'),
                      onTap: () {},
                    ),
                  ],
                ),
              ),
            ),
          ),
      ],
    );
  }
}

// 在主应用程序中提供HoverState
void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => HoverState()),
      ],
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text('Hover Over Example')),
          body: Center(
            child: HoverButton(),
          ),
        ),
      ),
    ),
  );
}

3. 解释代码

  • HoverState: 一个状态管理模型，用于存储悬浮菜单的显示状态，并提供方法来切换该状态。
  • HoverButton: 一个自定义的HookWidget，使用useMouseRegion来监听鼠标的进入和离开事件，从而触发菜单的显示和隐藏。
  • MultiProvider: 提供HoverState实例给整个应用程序。
  • Stack 和 Positioned: 用于在按钮上方显示悬浮菜单。

注意

  • 上面的代码示例是基于鼠标事件的简单实现，它并不涵盖所有可能的交互场景，如触摸设备上的交互。
  • 实际应用中，你可能需要更复杂的逻辑来处理不同设备上的交互，以及更精细的样式和动画效果。
  • 如果hoverover插件确实存在且符合你的需求，请查阅其官方文档以获取更具体的实现指南。

希望这个示例能帮助你理解如何在Flutter中实现悬浮交互效果！

回到顶部