如何制作一个带有颤动图像的按钮，当有人按下它时会突出显示？

Question

我有一个小时候有图像的按钮。我想要它，以便在按下按钮时，图像更改为不同的图像，并且当用户停止按下按钮时，它会返回到其原始图像。

基本上我希望它像一个凸起的按钮，但带有用于凸起和按下状态的自定义图像。

以下是相关代码：

class LoginButton extends StatefulWidget {
  @override
  _LoginButtonState createState() => new _LoginButtonState();
}

class _LoginButtonState extends State<LoginButton> {
  void _onClicked() {
    setState(() {
      //I don't know what I should put here to cause the image to redraw 
      //only on button press

    });
  }

  @override
  Widget build(BuildContext context) {
    var assetImage = new AssetImage("assets/loginscreen/btn.png");
    var image = new Image(image: assetImage, height: 50.0, width: 330.0);
    return new Container(
      height: image.height,
      width: image.width,
      child: new FlatButton(
        onPressed: _onClicked,
        child: new ConstrainedBox(
          constraints: new BoxConstraints.expand(),
          child: image,
        ),
      ),
    );
  }
}

Answer 1

对我来说，我想要一个没有额外填充的按钮，当我按下它时会变暗！ 这是对我有用的代码：

  Container(
            height: image.height,
            width: image.width,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('/images/image.jpeg'),
              ),
            ),
            child: new FlatButton(
                padding: EdgeInsets.all(0.0),
                onPressed: () {},
                child: null),
          ),

感谢https://www.youtube.com/watch?v=Ze-BZBv85Ck！这个视频帮了我这个忙！ :)

Answer 2

您可以将默认图像定义为_LoginButtonState类的属性，就像这样

class _LoginButtonState extends State<LoginButton> {
String _myImage = "assets/loginscreen/btn.png"; ... }

现在你的 _onClick 方法应该包含状态的变化，你可以简单地使用 if 条件将 _myImage 的字符串更改为新图像

    void _onClicked() {
        setState(() {
          if (_myImage == "assets/loginscreen/btn.png"){
            _myImage = "<my new asset>";   //change myImage to the other one
             }   
          else {
                 _myImage = "assets/loginscreen/btn.png"; //change myImage back to the original one
                }
        });
      }

在您的小部件构建中：

var assetImage = new AssetImage(_myImage);

============================================== ================================

更新

我已经设法使用 GesutureDetector 实现了与您尝试实现的类似的想法，在这里我用颜色对其进行了测试，但它与更改图像的链接应该没有太大区别，尽管我假设重新绘制图像会比改变颜色慢。

这是我使用的完整代码：

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new MyApp (),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var _myColor = Colors.blue;


  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text ("Tap me!"),
        centerTitle: true,
      ),
      body: new GestureDetector(
        onTapDown:(TapDownDetails details) { setState(() {
      _myColor = Colors.orange;
    });
        },
        onTapUp: (TapUpDetails details) {
          setState(() {
            _myColor = Colors.blue;
          });
        },

        child: new Container (
          color: _myColor,
        ),
      ),
    );
  }
}