Flutter悬浮材质按钮插件hover_material_button的使用

Flutter悬浮材质按钮插件hover_material_button的使用

安装

  1. 如果 juneflow 项目不存在，请通过 此指南 创建它。
  2. 在 juneflow 项目的根目录下打开终端，并输入以下命令：
    june add hover_material_button
  3. 启动项目，输入以下命令：
    flutter run lib/app/_/_/interaction/view.blueprint/component/hover_material_button/_/view.dart -d chrome

截图

使用示例

以下是一个完整的示例，展示了如何在 Flutter 应用中使用 hover_material_button 插件。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hover Material Button 示例'),
        ),
        body: Center(
          child: HoverMaterialButton(
            onPressed: () {
              print('按钮被点击了');
            },
            text: '点击我',
            backgroundColor: Colors.blue,
            hoverBackgroundColor: Colors.lightBlueAccent,
            textColor: Colors.white,
            hoverTextColor: Colors.black,
            borderRadius: BorderRadius.circular(8),
            padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
          ),
        ),
      ),
    );
  }
}

代码说明

  1. 导入库:

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

    导入 Flutter 和 hover_material_button 包。

  2. 主应用类:

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hover Material Button 示例'),
        ),
        body: Center(
          child: HoverMaterialButton(
            onPressed: () {
              print('按钮被点击了');
            },
            text: '点击我',
            backgroundColor: Colors.blue,
            hoverBackgroundColor: Colors.lightBlueAccent,
            textColor: Colors.white,
            hoverTextColor: Colors.black,
            borderRadius: BorderRadius.circular(8),
            padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter悬浮材质按钮插件hover_material_button的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


hover_material_button 是一个用于 Flutter 的插件，它允许你创建一个在鼠标悬停时显示浮动效果的材质按钮。这个插件特别适用于桌面和 Web 应用程序，因为鼠标悬停事件在这些平台上更为常见。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 hover_material_button 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  hover_material_button: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

使用 HoverMaterialButton

HoverMaterialButton 的使用方式与 Flutter 自带的 MaterialButton 类似，但它增加了鼠标悬停时的动画效果。

以下是一个简单的示例，展示了如何使用 HoverMaterialButton：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hover Material Button Example'),
        ),
        body: Center(
          child: HoverMaterialButton(
            onPressed: () {
              print('Button Pressed!');
            },
            child: Text('Hover Me!'),
            elevation: 4.0, // 默认阴影
            hoverElevation: 10.0, // 悬停时的阴影
            color: Colors.blue, // 按钮颜色
            hoverColor: Colors.blueAccent, // 悬停时的按钮颜色
          ),
        ),
      ),
    );
  }
}
回到顶部