压料颤动

Question

我正在尝试为使用Flutter创建的游戏实现 onPressed 功能。如果我使用 RaisedButton ，那么onPressed可以工作，但是由于我要有图像，因此必须使用 Material ：

              child: Material(
                elevation: 4.0,
                onPressed: buttonsList[i].enabled
                    ? () => playGame(buttonsList[i])
                    : null,
                color: Colors.green,
                child: Image.asset(buttonsList[i].icon),
              ),

这给了我以下错误：

  

未定义参数onPressed。

整个方法构建：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: new Text("Cat Attack"),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Expanded(
              child: GridView.builder(
                padding: const EdgeInsets.all(10.0),
                gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 4, // 4 columns of board buttons
                    childAspectRatio: 1.0,
                    crossAxisSpacing: 9.0,
                    mainAxisSpacing: 9.0),

                // Game board loop
                itemCount: buttonsList.length,
                itemBuilder: (context, i) => SizedBox(
                  width: 100.0,
                  height: 100.0,

                  child: Material(
                    elevation: 4.0,
                    onPressed: buttonsList[i].enabled
                        ? () => playGame(buttonsList[i])
                        : null,
                    color: Colors.green,
                    child: Image.asset(buttonsList[i].icon),

                  ),

                ),
              ),
            ),

            RaisedButton(
              child: new Text(
                "Reset",
                style: new TextStyle(color: Colors.white, fontSize: 20.0),
              ),
              color: Colors.red,
              padding: const EdgeInsets.all(20.0),
              onPressed: resetGame,
            )
          ],
        ));
  }

如何在Material上实现onPressed函数？

Answer 1

您可以在“材质”小部件中使用GestureDetector或InkWell小部件。

    Material(
         color: Colors.green,
        child: GestureDetector(
          onTap: buttonsList[i].enabled
                      ? () => playGame(buttonsList[i])
                      : null,
                       child: Image.asset(buttonsList[i].icon),
        ),
      )

更多信息在这里：

• GestureDetector

• InkWell

Answer 2

diegodeveloper是正确的，但我个人会使用InkWell，因为它能够显示涟漪效应。

这是使用InkWell的解决方案。

child: Material(
  elevation: 4.0,
  color: Colors.green, // don't use color in any child widget of InkWell otherwise ripple effect won't be shown
  child: InkWell(
    splashColor: Colors.green[900], // give any splashColor you want
    onTap: buttonsList[i].enabled
        ? () => playGame(buttonsList[i])
        : null,
    child: Image.asset(buttonsList[i].icon),
  ),
)