Flutter扩展悬浮动画插件expanded_hover_animation的使用

Flutter扩展悬浮动画插件expanded_hover_animation的使用

该插件是一个可定制的扩展悬浮动画包，适用于Flutter。它是一个简单易用的插件，可以让你为任何组件添加一个可扩展的悬浮动画。你可以自定义动画持续时间、曲线、大小、边框、圆角半径、主颜色和悬停颜色。

快速演示

Hover Animation: 可定制的悬浮动画

视频演示

https://user-images.githubusercontent.com/65107679/236992679-e4b89a07-8bad-4d8f-95e9-3bface5d2656.mp4

使用Expanded Hover Animation

SizedBox(
  height: 250,
  child: ListView.builder(
    scrollDirection: Axis.horizontal,
    itemCount: testImages.length,
    itemBuilder: (context, index) {
      return HoverCard(
        image: testImages[index],
        isAssetImage: false,
      );
    },
  ),
),

探索更多属性

HoverCard(
  image: testImages[index],
  isAssetImage: false,
  primaryColor: Colors.blue,
  hoverColor: Colors.red,
  size: 200,
  borderRadius: 20,
  border: 5,
  duration: 500,
  curve: Curves.easeInOut,
);

需要帮助？

如果你在设置项目时遇到问题或有任何疑问，请随时通过以下方式联系我：

社交媒体

许可证

Copyright (c) 2023 Tushar Mahmud
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

完整示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Extended Hover Animation',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 测试用的图片列表
    List<String> testImages = [
      'https://m.media-amazon.com/images/M/MV5BNDU0MjViZmQtNzdmZS00YjhlLWE4ZGMtMDJlODAzMGI5ODIwXkEyXkFqcGdeQXVyNDI3NjcxMDA@._V1_.jpg',
      'https://m.media-amazon.com/images/M/MV5BY2Y5MThlMDAtMTlmMC00ODNjLWIzM2UtNDhlZTFmN2VlNjRkXkEyXkFqcGdeQXVyNjA3OTI5MjA@._V1_.jpg',
      'https://m.media-amazon.com/images/M/MV5BNTM0YmJmMGMtMmYyMC00YTU3LWEzNjQtODU4NjQ3YjY3NTU1XkEyXkFqcGdeQXVyNDI3NjcxMDA@._V1_.jpg',
      'https://m.media-amazon.com/images/M/MV5BODQ1Y2FiNzItNjdkZi00ZmRiLTllZjgtZjA2MTIyNWFjOGZhXkEyXkFqcGdeQXVyOTE1NzI0NDg@._V1_FMjpg_UX1000_.jpg',
      'https://m.media-amazon.com/images/M/MV5BYmRhZDJmN2QtYjU4NC00Y2QxLTkwNWMtYzVlODU5YzcyZjA2XkEyXkFqcGdeQXVyMTMzOTM3NDUx._V1_FMjpg_UX1000_.jpg',
      'https://m.media-amazon.com/images/M/MV5BNjRhOTQ4ZGEtNDBkOS00N2E5LWJlMDUtM2MxZDg5MGVhOWE5XkEyXkFqcGdeQXVyOTQ0MDUwOTM@._V1_.jpg',
    ];

    return Scaffold(
      body: SizedBox(
        height: 250,
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: testImages.length,
          itemBuilder: (context, index) {
            return HoverCard(
              image: testImages[index],
              isAssetImage: false,
            );
          },
        ),
      ),
    );
  }
}

更多关于Flutter扩展悬浮动画插件expanded_hover_animation的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


当然，以下是一个关于如何使用 expanded_hover_animation 插件的简单示例。expanded_hover_animation 是一个 Flutter 插件，用于在列表项或其他小部件上实现悬浮动画效果。以下代码展示了如何在一个简单的 ListView 中应用该插件。

首先，确保你已经在 pubspec.yaml 文件中添加了 expanded_hover_animation 依赖：

dependencies:
  flutter:
    sdk: flutter
  expanded_hover_animation: ^最新版本号  # 请替换为实际最新版本号

然后运行 flutter pub get 以获取依赖。

接下来是示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Expanded Hover Animation Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Expanded Hover Animation Demo'),
      ),
      body: Center(
        child: ExpandedHoverListView(
          children: List.generate(
            10,
            (index) => HoverCard(
              key: ValueKey('item_$index'),
              child: Card(
                color: Colors.white,
                elevation: 4.0,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12.0),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Text(
                    'Item $index',
                    style: TextStyle(fontSize: 20),
                  ),
                ),
              ),
              hoverChild: Card(
                color: Colors.blueAccent,
                elevation: 8.0,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12.0),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Text(
                    'Hover over Item $index',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class HoverCard extends StatelessWidget {
  final Widget child;
  final Widget hoverChild;

  const HoverCard({Key? key, required this.child, required this.hoverChild})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ExpandedHoverAnimation(
      child: child,
      hoverChild: hoverChild,
      hoverScale: 1.1, // 悬浮时的缩放比例
      hoverColor: Colors.transparent, // 悬浮时的背景颜色（这里设为透明）
      hoverDuration: const Duration(milliseconds: 300), // 悬浮动画持续时间
    );
  }
}

class ExpandedHoverListView extends StatelessWidget {
  final List<Widget> children;

  const ExpandedHoverListView({Key? key, required this.children}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: children.length,
      itemBuilder: (context, index) {
        return Padding(
          padding: const EdgeInsets.symmetric(vertical: 8.0),
          child: children[index],
        );
      },
    );
  }
}

在这个示例中：

  1. ExpandedHoverListView 是一个简单的 ListView.builder 包装器，用于展示多个 HoverCard。
  2. HoverCard 是自定义的小部件，它包含了正常状态下的子小部件 (child) 和悬浮状态下的子小部件 (hoverChild)。
  3. ExpandedHoverAnimation 是核心插件小部件，它接受正常状态和悬浮状态的子小部件，以及悬浮时的缩放比例、背景颜色和动画持续时间等参数。

运行这个代码，你将看到一个包含 10 个列表项的页面，当你将鼠标悬停在某个列表项上时，它将放大并显示悬浮状态的内容。

回到顶部