Flutter悬浮交互插件hover的使用

Hover 是一个用于导航、主题切换、响应式设计等的辅助库和小部件库。该库旨在减少 Flutter 应用开发中的样板代码。

示例代码

以下是 Hover 插件的完整示例代码：

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

import 'app/profile_example.dart';
import 'app/forms/login_form_example.dart';
import 'app/mobile_responsiveness_example.dart';
import 'app/forms/sign_up_form_example.dart';
import 'app/view_splitter_example.dart';
import 'app/widgets_gallery.dart';

void main() => runApp(HoverExample());

class HoverExample extends StatelessWidget {
  final MobileResponsivenessExample mobileResponsivenessExample =
      MobileResponsivenessExample();
  final ProfileExample profilePage = ProfileExample();
  final LoginFormExample signInFormExample = LoginFormExample();
  final SignUpFormExample signUpFormExample = SignUpFormExample();
  final WidgetsGallery widgetsGallery = WidgetsGallery();
  final ViewSplitterExample viewSplitterExample = ViewSplitterExample();

  @override
  Widget build(BuildContext context) {
    return Hover.create(
      pages: [
        signUpFormExample,
        mobileResponsivenessExample,
        widgetsGallery,
        signInFormExample,
        viewSplitterExample,
        profilePage,
      ],
      themes: {
        "light": ThemeData.light(),
        "dark": ThemeData.dark(),
      },
      providers: [],
      appBarBuilder: _buildAppBar,
      drawerBuilder: _buildDrawer,
    );
  }

  ///
  /// A Drawer builder function that will be used to
  /// create a globally accessible navigation drawer
  ///
  Drawer _buildDrawer(BuildContext context) {
    final items = {
      "Login": signInFormExample,
      "Sign Up": signUpFormExample,
      "Profile": profilePage,
      "Hover Widgets": widgetsGallery,
      "Mobile Responsive Example": mobileResponsivenessExample,
      "View Splitter Example": viewSplitterExample,
    };
    return Drawer(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          UserAccountsDrawerHeader(
            accountName: Text("Jane Doe"),
            accountEmail: Text("sample@email.com"),
            currentAccountPicture: CircleAvatar(
              radius: 80,
              backgroundImage: NetworkImage(
                  "https://images.pexels.com/photos/1102341/pexels-photo-1102341.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"),
            ),
          ),
          Expanded(
            child: ListView.builder(
                itemCount: items.length,
                itemBuilder: (context, i) {
                  return ListTile(
                    onTap: () {
                      Hover.router.navigateTo(
                        items.values.elementAt(i).routeName,
                        context,
                      );
                    },
                    title: Text(items.keys.elementAt(i)),
                  );
                }),
          ),
        ],
      ),
    );
  }

  ///
  /// An AppBar builder function that will be used
  /// to create an app bar widget that will be
  /// displayed globally
  ///
  AppBar _buildAppBar(BuildContext context) {
    return AppBar(
      title: Text("Hover Sample App"),
      leading: TextButton(
        onPressed: () {
          Hover.toggleDrawer(context);
        },
        child: Icon(Icons.menu, color: Colors.white),
      ),
    );
  }
}

代码解析

导入必要的包

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

定义主应用类
```
void main() => runApp(HoverExample());
```

创建应用类

class HoverExample extends StatelessWidget {
  // 定义各个页面实例
  final MobileResponsivenessExample mobileResponsivenessExample = MobileResponsivenessExample();
  final ProfileExample profilePage = ProfileExample();
  final LoginFormExample signInFormExample = LoginFormExample();
  final SignUpFormExample signUpFormExample = SignUpFormExample();
  final WidgetsGallery widgetsGallery = WidgetsGallery();
  final ViewSplitterExample viewSplitterExample = ViewSplitterExample();
  
  @override
  Widget build(BuildContext context) {
    return Hover.create(
      pages: [ // 定义页面列表
        signUpFormExample,
        mobileResponsivenessExample,
        widgetsGallery,
        signInFormExample,
        viewSplitterExample,
        profilePage,
      ],
      themes: { // 定义主题
        "light": ThemeData.light(),
        "dark": ThemeData.dark(),
      },
      providers: [], // 定义服务提供者
      appBarBuilder: _buildAppBar, // 定义AppBar构建函数
      drawerBuilder: _buildDrawer, // 定义Drawer构建函数
    );
  }
}

定义Drawer构建函数

Drawer _buildDrawer(BuildContext context) {
  final items = {
    "Login": signInFormExample,
    "Sign Up": signUpFormExample,
    "Profile": profilePage,
    "Hover Widgets": widgetsGallery,
    "Mobile Responsive Example": mobileResponsivenessExample,
    "View Splitter Example": viewSplitterExample,
  };
  return Drawer(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        UserAccountsDrawerHeader(
          accountName: Text("Jane Doe"),
          accountEmail: Text("sample@email.com"),
          currentAccountPicture: CircleAvatar(
            radius: 80,
            backgroundImage: NetworkImage(
                "https://images.pexels.com/photos/1102341/pexels-photo-1102341.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"),
          ),
        ),
        Expanded(
          child: ListView.builder(
              itemCount: items.length,
              itemBuilder: (context, i) {
                return ListTile(
                  onTap: () {
                    Hover.router.navigateTo(
                      items.values.elementAt(i).routeName,
                      context,
                    );
                  },
                  title: Text(items.keys.elementAt(i)),
                );
              }),
        ),
      ],
    ),
  );
}

定义AppBar构建函数

AppBar _buildAppBar(BuildContext context) {
  return AppBar(
    title: Text("Hover Sample App"),
    leading: TextButton(
      onPressed: () {
        Hover.toggleDrawer(context);
      },
      child: Icon(Icons.menu, color: Colors.white),
    ),
  );
}

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

yuanlaile 1楼•2 天前

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

当然，以下是一个关于如何在Flutter中使用hover插件来实现悬浮交互效果的代码案例。hover插件允许开发者在Flutter应用中创建悬浮菜单、按钮或其他悬浮元素。不过需要注意的是，由于hover并非Flutter官方插件，这里假设你已经在pubspec.yaml文件中添加了相应的依赖，并且已经运行了flutter pub get。

首先，确保你的pubspec.yaml文件中包含了对hover插件的依赖（注意：这里hover是一个假设的包名，实际使用时请替换为真实的包名及其版本）：

dependencies:
  flutter:
    sdk: flutter
  hover: ^x.y.z  # 替换为实际的版本号

然后，在你的Flutter应用中，你可以这样使用hover插件来创建一个悬浮按钮：

import 'package:flutter/material.dart';
import 'package:hover/hover.dart';  // 假设hover插件的导入路径

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Hover Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hover Example'),
        ),
        body: Center(
          child: HoverWidgetExample(),
        ),
      ),
    );
  }
}

class HoverWidgetExample extends StatefulWidget {
  @override
  _HoverWidgetExampleState createState() => _HoverWidgetExampleState();
}

class _HoverWidgetExampleState extends State<HoverWidgetExample> {
  bool isHovered = false;

  @override
  Widget build(BuildContext context) {
    return HoverWidget(
      onHover: (isHovering) {
        setState(() {
          isHovered = isHovering;
        });
      },
      child: Container(
        width: 100,
        height: 100,
        decoration: BoxDecoration(
          color: isHovered ? Colors.red : Colors.grey,
          borderRadius: BorderRadius.circular(10),
        ),
        child: Center(
          child: Text(
            isHovered ? 'Hovered' : 'Not Hovered',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

// 假设HoverWidget是hover插件提供的一个组件，用于检测悬浮状态
// 实际使用时，请参考hover插件的文档来了解如何正确使用其API
class HoverWidget extends StatelessWidget {
  final Widget child;
  final ValueChanged<bool> onHover;

  HoverWidget({required this.child, required this.onHover});

  @override
  Widget build(BuildContext context) {
    // 这里只是一个示例，实际插件可能会有不同的API来实现悬浮检测
    // 通常情况下，你需要使用插件提供的HoverDetector或其他组件
    return GestureDetector(
      onEnter: (_) => onHover(true),
      onExit: (_) => onHover(false),
      child: child,
    );
  }
}

注意：

上述代码中的HoverWidget是一个假设的组件，用于说明如何使用悬浮检测功能。在实际使用中，你需要参考hover插件的文档来了解如何正确使用其API。
在Flutter中，悬浮检测通常是通过GestureDetector的onEnter和onExit回调来实现的，但具体的悬浮插件可能会提供更高级或更定制化的API。
由于hover并非一个真实存在的Flutter插件（至少在我最后的知识更新日期之前），你需要找到一个实际的悬浮交互插件，并按照其文档进行集成和使用。常见的插件搜索平台包括pub.dev（Flutter的官方包管理器）。

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