Question

用于在列表视图中添加方法ontap（）以及一个自定义类，该类使它看起来像瓷砖

我尝试添加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',
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

这段代码属于我用来在无状态小部件的支架中构建列表视图的类。这是我在体内返回支架后如何建立我的列表视图：代码在下面

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中找到该小部件的文档。

希望这会有所帮助！

在flutter的列表视图中添加方法ontap（）

1 个答案: