Flutter 自定义 ImageButton

转载请注明出处：https://blog.csdn.net/a512337862/article/details/99601296

前言

Flutter 自定义的简单 ImageButton。支持图片按钮下面添加标题。

截图

代码

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

/*
 * 常用图片按钮
 */
class SimpleImageButton extends StatefulWidget {
  final String normalImage;
  final String pressedImage;
  final Function onPressed;
  final double width;
  final String title;

  const SimpleImageButton({
    Key key,
    @required this.normalImage,
    @required this.pressedImage,
    @required this.onPressed,
    @required this.width,
    this.title,
  }) : super(key: key);

  @override
  State createState() {
    // TODO: implement createState
    return _SimpleImageButtonState();
  }
}

class _SimpleImageButtonState extends State {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ImageButton(
      normalImage: Image(
        image: AssetImage(widget.normalImage),
        width: widget.width,
        height: widget.width,
      ),
      pressedImage: Image(
        image: AssetImage(widget.pressedImage),
        width: widget.width,
        height: widget.width,
      ),
      title: widget.title == null ? '' : widget.title,
      //文本是否为空
      normalStyle: TextStyle(
          color: Colors.white, fontSize: 14, decoration: TextDecoration.none),
      pressedStyle: TextStyle(
          color: Colors.white, fontSize: 14, decoration: TextDecoration.none),
      onPressed: widget.onPressed,
    );
  }
}

/*
 * 图片 按钮
 */
class ImageButton extends StatefulWidget {
  //常规状态
  final Image normalImage;

  //按下状态
  final Image pressedImage;

  //按钮文本
  final String title;

  //常规文本TextStyle
  final TextStyle normalStyle;

  //按下文本TextStyle
  final TextStyle pressedStyle;

  //按下回调
  final Function onPressed;

  //文本与图片之间的距离
  final double padding;

  ImageButton({
    Key key,
    @required this.normalImage,
    @required this.pressedImage,
    @required this.onPressed,
    this.title,
    this.normalStyle,
    this.pressedStyle,
    this.padding,
  }) : super(key: key);

  @override
  _ImageButtonState createState() {
    // TODO: implement createState
    return _ImageButtonState();
  }
}

class _ImageButtonState extends State {
  var isPressed = false;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    double padding = widget.padding == null ? 5 : widget.padding;
    return GestureDetector(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          isPressed ? widget.pressedImage : widget.normalImage, //不同状态显示不同的Image
          widget.title.isNotEmpty
              ? Padding(padding: EdgeInsets.fromLTRB(0, padding, 0, 0))
              : Container(),
          widget.title.isNotEmpty //文本是否为空
              ? Text(
                  widget.title,
                  style: isPressed ? widget.pressedStyle : widget.normalStyle,
                )
              : Container(),
        ],
      ),
      onTap: widget.onPressed,
      onTapDown: (d) {
        //按下，更改状态
        setState(() {
          isPressed = true;
        });
      },
      onTapCancel: () {
        //取消，更改状态
        setState(() {
          isPressed = false;
        });
      },
      onTapUp: (d) {
        //抬起，更改按下状态
        setState(() {
          isPressed = false;
        });
      },
    );
  }
}

调用

• 大部分情况下直接调用SimpleImageButton即可。参数也十分简单：

const SimpleImageButton({
   Key key,
   @required this.normalImage,
   @required this.pressedImage,
   @required this.onPressed,
   @required this.width,
   this.title,
 }) : super(key: key);

1、normalImage ： 未按下状态显示的图片路径
2、pressedImage：按下状态显示的图片路径
3、width ： 宽高
4、title ： 下方标题，不设置则默认为无标题
5、onPressed ：点击回调

• ImageButton参数要稍微复杂：

  ImageButton({
    Key key,
    @required this.normalImage,
    @required this.pressedImage,
    @required this.onPressed,
    this.title,
    this.normalStyle,
    this.pressedStyle,
    this.padding,
  }) : super(key: key);

1、 normalImage;未按下状态Image
2、 pressedImage：按下状态Image
3、 title：按钮文本
4、 normalStyle：常规文本TextStyle
5、 pressedStyle：按下文本TextStyle
6、onPressed：按下回调
7、 padding：文本与图片之间的距离