Question

我有这个容器：

          new Container(
            width: 500.0,
            padding: new EdgeInsets.fromLTRB(20.0, 40.0, 20.0, 40.0),
            color: Colors.green,
            child: new Column(
              children: [
                new Text("Ableitungen"),
              ]
            ),
          ),

当用户点击Container时，我希望触发onPressed()方法（例如可以使用IconButton）。如何使用Container实现此行为？

Answer 1

我猜您可以像这样使用GestureDetector小部件：

new GestureDetector(
        onTap: (){
          print("Container clicked");
        },
        child: new Container(
          width: 500.0,
          padding: new EdgeInsets.fromLTRB(20.0, 40.0, 20.0, 40.0),
          color: Colors.green,
          child: new Column(
              children: [
                new Text("Ableitungen"),
              ]
          ),
        )
    );

Answer 2

最简单的解决方案是将Container包裹在GestureRecognizer中，但如果要构建Material Design应用，请考虑使用InkWell或FlatButton。触摸时，这些小部件将显示视觉飞溅响应。

Answer 3

容器本身没有任何click事件，因此，有两种方法

Inkell小部件
GestureDetector

在Flutter中，InkWell是一种可响应触摸动作的材质小部件。

    const result = await Url.find({})
     .sort({short_url: - 1})
     .select('short_url')
     .exec();

    // access whatever you need
    const maxNum = result[0].short_url;

GestureDetector是检测手势的小部件。

InkWell(
    child: Container(......),
    onTap: () { 
        print("Click event on Container"); 
    },
);

差异

InkWell是一个材质小部件，每当收到触摸时，它就会向您显示波纹效果。

GestureDetector更通用，不仅用于触摸，而且还用于其他手势。

Answer 4

只是想加上The Dumbfounds回答（接受上面的回答）

如果您使用 GestureDetector 或 InkWell 来处理一组图标和文字的点击，请使用图标小部件代替< em> IconButton 显示图标，因为IconButton的onPressed方法将接管GestureDetector / InkWell的onTap方法，因此只有单击文本时onTap才会起作用。

示例 -

@override
  Widget build(BuildContext context) {
    return Row(mainAxisSize: MainAxisSize.min, children: [
      GestureDetector(
        onTap: () {
          _toggleFavorite();
        },
        child: Row(
          children: [
            Container(
              padding: EdgeInsets.all(0.0),
              child: _isFavorited ? Icon(Icons.star, color: Colors.red[500]) : Icon(Icons.star_border),
            ),
            SizedBox(
              width: 18.0,
              child: Container(
                child: Text('$_favoriteCount'),
              ),
            )
          ],
        ),
      )
    ]);
  }
}

Answer 5

您不应该使用GestureDetector，因为它不会显示任何波纹效果（这是Material design应用程序的核心部分），因此可以使用InkWell，这是基本示例。

Widget _buildContainer() {
  return Material(
    color: Colors.blue,
    child: InkWell(
      onTap: () => print("Container pressed"), // handle your onTap here
      child: Container(
        height: 200,
        width: 200,
      ),
    ),
  );
}

输出：

Answer 6

如果您想要简单点击事件，则可以通过 GestureDetector

来完成

GestureDetector(
    onTap: (){
      print("Container clicked");
    },
    child: new Container(...)          
);

如果您想在点击事件中使用波纹动画，请使用 InkWell

InkWell(
    onTap: (){
      print("Container clicked");
    },
    child: new Container(...)          
);

颤动 - 容器onPressed？

6 个答案: