在我的列表视图中添加一个方法 ontap()

Question

用于在我的列表视图中添加一个方法 ontap()，其中包含我为它制作的自定义 class 外观

我尝试添加 ontap(): 但不认识它说这是代码

class _MenuCard extends StatelessWidget {

  final String headImageAssetPath;
  final IconData icon;
  final Color iconBackgroundColor;
  final String title;
  final String subtitle;
  final int heartCount;

  _MenuCard({
    this.headImageAssetPath,
    this.icon,
    this.iconBackgroundColor,
    this.title,
    this.subtitle,
    this.heartCount,
  });

  @override
  Widget build(BuildContext context) {
    return new Padding(
      padding: const EdgeInsets.only(left: 10.0, right: 10.0, bottom: 10.0),
      child: new Card(
        elevation: 10.0,
        child: new Column(
          children: [
            new Image.asset(
              headImageAssetPath,
              width: double.infinity,
              height: 100.0,
              fit: BoxFit.cover,
            ),
            new Row(
              children: [
                new Padding(
                  padding: const EdgeInsets.all(15.0),
                  child: new Container(
                    padding: const EdgeInsets.all(10.0),
                    decoration: new BoxDecoration(
                      color: iconBackgroundColor,
                      borderRadius: new BorderRadius.all(const Radius.circular(15.0)),
                    ),
                    child: new Icon(
                      icon,
                      color: Colors.white,
                    ),
                  ),
                ),
                new Expanded(
                  child: new Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      new Text(
                        title,
                        style: const TextStyle(
                          fontSize: 25.0,
                          fontFamily: 'mermaid',
                        ),
                      ),
                      new Text(
                        subtitle,
                        style: const TextStyle(
                          fontSize: 16.0,
                          fontFamily: 'bebas-neue',
                          letterSpacing: 1.0,
                          color: const Color(0xFFAAAAAA),
                        ),
                      ),
                    ],
                  ),
                ),
                new Container(
                  width: 2.0,
                  height: 70.0,
                  decoration: new BoxDecoration(
                    gradient: new LinearGradient(
                      colors: [
                        Colors.white,
                        Colors.white,
                        const Color(0xFFAAAAAA),
                      ],
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                    ),
                  ),
                ),
                new Padding(
                  padding: const EdgeInsets.only(left: 15.0, right: 15.0),
                  child: new Column(
                    children: [
                      new Icon(
                        Icons.favorite_border,
                        color: Colors.red,
                      ),
                      new Text(
                        '$heartCount',
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

此代码来自 class，我用它在无状态小部件的脚手架中构建我的列表视图。下面是我在 body 中返回脚手架后构建列表视图的方式：代码如下

body: new ListView(
          children: [
            new _MenuCard(
                headImageAssetPath: 'images/img.png',
                icon: Icons.fastfood,
                iconBackgroundColor: Colors.orange,
                title: 'il domacca',
                subtitle: "78 5TH AVENUE, NEW YORK",
                heartCount: 84
            ),
            new _MenuCard(
                headImageAssetPath: 'images/img.png',
                icon: Icons.local_dining,
                iconBackgroundColor: Colors.red,
                title: 'Mc Grady',
                subtitle: "79 5TH AVENUE, NEW YORK",
                heartCount: 84
            ),
            new _MenuCard(
                headImageAssetPath: 'images/img.png',
                icon: Icons.fastfood,
                iconBackgroundColor: Colors.purpleAccent,
                title: 'Sugar & Spice',
                subtitle: "80 5TH AVENUE, NEW YORK",
                heartCount: 84
            ),
          ]
      ),

Answer 1

您可以将自定义列表项小部件包装在 GestureDetector 中，它具有您可以指定的 onTap 回调方法。

例子-

class _MenuCard extends StatelessWidget {

  final String headImageAssetPath;
  final IconData icon;
  final Color iconBackgroundColor;
  final String title;
  final String subtitle;
  final int heartCount;
  final VoidCallback onTapCallback; //Add this custom onTap method

  _MenuCard({
    this.headImageAssetPath,
    this.icon,
    this.iconBackgroundColor,
    this.title,
    this.subtitle,
    this.heartCount,
    this.onTapCallback,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTapCallback,
      child: new Padding(
        padding: const EdgeInsets.only(left: 10.0, right: 10.0, bottom: 10.0),
        child: //Rest of your code
      ),
    );
  }

}

并且在 ListView 中您可以指定您的自定义 onTapCallback。

body: new ListView(
  children: [
    new _MenuCard(
      headImageAssetPath: 'images/img.png',
      icon: Icons.fastfood,
      iconBackgroundColor: Colors.orange,
      title: 'il domacca',
      subtitle: "78 5TH AVENUE, NEW YORK",
      heartCount: 84,
      onTapCallback: () {
        // Your onTap code goes here
      }
    ),
    // Rest of your code
  ]
)

除了onTap，GestureDetector插件还有很多其他的用户事件回调。您可以了解更多关于它们的信息 here.

此外，借助 InkWell 小部件也可以实现相同的功能，您只需将 GestureDetector 替换为 InkWell 即可，其余代码将保持不变。可在 here.

中找到小部件的文档

希望对您有所帮助！

在我的列表视图中添加一个方法 ontap()

add a method ontap() in my listview in flutter

flutter

flutter-layout

flutter-animation