Question

我有一个小问题。

我想单击我的自定义图标，但我不知道该怎么做：c

单击此键后，我想转到另一个小部件，但有了这个，我可以尝试工作（希望如此）

如果您还可以告诉我如何使用整个小部件。

class secondWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      width: 100,
      margin: EdgeInsets.only(top: 100, bottom: 10),
      color: Colors.pink,
      child: new Icon(const IconData(0xe800, fontFamily: 'Dupa')),
      //this is not working :c
      onPressed: () {
         newWidgetGoBrr();
});
    );

Answer 1

容器没有onPressed。您需要对容器或图标使用GestureDetector小部件。

GestureDetector(
  onTap: () {
    // after click logic goes here.
    newWidgetGoBrr();
  },
  child: Container(
    height: 100,
    width: 100,
    margin: EdgeInsets.only(top: 100, bottom: 10),
    color: Colors.pink,
    child: new Icon(const IconData(0xe800, fontFamily: 'Dupa')),
  ),
),

Answer 2

您需要的是可以检测手势的某种类型的检测器。它可以通过许多小部件获得，但最常用的是 GestureDetector 和 InkWell 。

您可以用任何一个小部件包装您的图标。这些小部件使您可以访问 onTap 属性。

用Inkwell / GestureDector包装图标比包装整个容器要好（这取决于您的要求）。

您可以这样实现：

class secondWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      width: 100,
      margin: EdgeInsets.only(top: 100, bottom: 10),
      color: Colors.pink,
      child: InkWell(
        onTap: newWidgetGoBrr(), // your logic
        child: Icon(
          const IconData(0xe800, fontFamily: 'Dupa'),
        ),
      ),
    );
  }
}

注意：有了新的flutter版本，您不再需要使用 new 关键字。

如何在Flutter中制作交互式图标？

2 个答案: