Flutter资源按钮插件asset_button的使用

asset_button 插件提供了用于创建具有资源图像的按钮。这种按钮可以使用两张图片：一张是正常状态下的图片（必需），另一张是鼠标悬停时的图片（可选）。正常状态下显示的图片为默认图片，当鼠标悬停在按钮区域上时，会显示悬停图片。

点击按钮时，会播放一个缩小动画。

示例应用

使用独立的图片

// 创建一个使用独立图片的按钮
WidgetImageButton(
  imageNormal: WidgetAssetImage(assetPath: 'assets/images/icon_normal.png'), // 正常状态下的图片
  imageHover: WidgetAssetImage(assetPath: 'assets/images/icon_hover.png'), // 鼠标悬停时的图片
  onTap: () {
    print('独立图标按钮'); // 点击事件
  },
),

从一张整图中裁剪图片

// 创建一个从一张整图中裁剪图片的按钮
WidgetImageButton(
  imageNormal: WidgetAssetImage(
      assetPath: 'assets/images/icons.png', // 整张图片路径
      cropRect: Rect.fromLTWH(58, 165, 95, 95)), // 裁剪矩形
  imageHover: WidgetAssetImage(
      assetPath: 'assets/images/icons.png',
      cropRect: Rect.fromLTWH(170, 164, 95, 95)),
  onTap: () {
    print('从一张图片中裁剪的图标按钮'); // 点击事件
  },
)

完整示例代码

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

import 'package:asset_button/image_loader.dart'; // 导入图片加载工具
import 'package:asset_button/widget_asset_image.dart'; // 导入资产图像组件
import 'package:asset_button/widget_image_button.dart'; // 导入按钮组件
import 'package:flutter/material.dart'; // 导入 Flutter 基础库

void main() {
  runApp(MyApp()); // 启动应用
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(home: MyHomePage()); // 设置主页
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState(); // 创建状态对象
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('图片按钮示例')), // 设置应用栏标题
      body: Container(
        color: Colors.blue[900], // 设置背景颜色
        width: double.infinity, // 设置宽度为屏幕宽度
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 垂直居中对齐
          children: [
            // 直接加载图片
            FutureBuilder<Image?>(
              builder: (context, snap) {
                if (!snap.hasData) return Container(); // 如果没有数据则返回空容器
                final image = snap.data;
                if (image == null) return Container();
                return Container(child: image); // 显示图片
              },
              future: ImageLoader.load(
                assetPath: 'assets/images/bkg_code.png', // 图片路径
                cropRect: Rect.fromLTWH(0, 0, 100, 100), // 裁剪矩形
              ),
            ),
            // 背景图片
            WidgetAssetImage(
              assetPath: 'assets/images/bkg_code.png', // 图片路径
              // 按设备比例缩放
              scaleDeviceRatio: false,
            ),
            // 独立图标按钮
            WidgetImageButton(
              imageNormal:
                  WidgetAssetImage(assetPath: 'assets/images/icon_normal.png'), // 正常状态下的图片
              imageHover:
                  WidgetAssetImage(assetPath: 'assets/images/icon_hover.png'), // 鼠标悬停时的图片
              // 关闭动画
              animate: false,
              onTap: () {
                print('独立图标按钮'); // 点击事件
              },
            ),
            // 从一张整图中裁剪的图标按钮
            WidgetImageButton(
              imageNormal: WidgetAssetImage(
                  assetPath: 'assets/images/icons.png', // 整张图片路径
                  cropRect: Rect.fromLTWH(58, 165, 95, 95)), // 裁剪矩形
              imageHover: WidgetAssetImage(
                  assetPath: 'assets/images/icons.png',
                  cropRect: Rect.fromLTWH(170, 164, 95, 95)),
              onTap: () {
                print('从一张图片中裁剪的图标按钮'); // 点击事件
              },
            )
          ],
        ),
      ),
    );
  }
}