Flutter网页悬停菜单插件web_hover_menu的使用

web_hover_menu 是一个用于Flutter Web项目的插件，它提供了一个带有动画效果的网站菜单，并允许自定义菜单和子菜单的设计以及对齐方式。以下是该插件的详细使用说明及示例代码。

关键特性

• 不同类型的动画效果（左到右、右到左、上到下、下到上）
• 鼠标悬停效果

现有动画类型

• 左到右 (leftToRight)
• 右到左 (rightToLeft)
• 上到下 (topToBottom)
• 下到上 (bottomToTop)

示例预览

使用方法

1. 导入插件

首先，在你的项目文件中导入 web_hover_menu 插件：

import 'package:web_hover_menu/web_hover_menu.dart';

2. 添加基本形式的组件

以下是一个最基础的使用示例：

HoverAnimationWidget(
  headerTiles: headerModelList,
  headerBoxDecoration: const BoxDecoration(
      borderRadius: BorderRadius.all(
        Radius.circular(5.0),
      ),
      color: Colors.black),
  headerTextColor: Colors.white,
  headerTextSize: 15.0,
  menuTiles: menuModelList,
  menuBoxDecoration: const BoxDecoration(
      borderRadius: BorderRadius.all(
        Radius.circular(7.0),
      ),
      color: Colors.black38),
  menuTextColor: Colors.white,
  animationType: AnimationType.rightToLeft,
  menuTextSize: 16.0,
  headerPosition: HeaderPosition.bottomRight,
);

3. 属性说明

4. 完整示例代码

以下是一个完整的示例代码，展示如何在Flutter应用中使用 web_hover_menu：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Web animated hover menu',
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Menu> headerModelList = [
    Menu(id: 1, name: 'Home'),
    Menu(id: 2, name: 'Profile'),
    Menu(id: 3, name: 'Help'),
    Menu(id: 4, name: 'Contact Us'),
    Menu(id: 5, name: 'About Us')
  ];

  List<SubMenu> menuModelList = [
    SubMenu(id: 1, name: 'Declarative style'),
    SubMenu(id: 2, name: 'Premade common'),
    SubMenu(id: 3, name: 'Stateful hot reload'),
    SubMenu(id: 4, name: 'Native performance'),
    SubMenu(id: 5, name: 'Great community')
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return AnimatedHoverMenu(
      headerPosition: HeaderPosition.bottomRight,
      headerTiles: headerModelList,
      menuTiles: menuModelList,
      backgroundWidget: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Color(0xfffff8f9),
              Color(0xfffef7f8),
              Color(0xffecf0fa),
            ],
          ),
        ),
      ),
      headerBoxDecoration: const BoxDecoration(
          borderRadius: BorderRadius.all(
            Radius.circular(5.0),
          ),
          color: Color(0xff996617)),
      headerTextColor: Colors.white,
      headerTextSize: 15.0,
      menuBoxDecoration: BoxDecoration(
        border: Border.fromBorderSide(
          BorderSide(color: Color(0xff996617), width: 2),
        ),
      ),
      menuTextColor: Color(0xff996617),
      animationType: AnimationType.springAcrossAxis,
      menuTextSize: 16.0,
    );
  }
}