GestureDetector ontap() 被构建触发

Question

在我的 中，我有一个基本上堆叠 a和 a 的build函数，我还传递了一个函数（这让我可以对所有按钮重用该函数，而不是复制周围的代码buttoncounterbuildbuttoncolumn

我的构建：

Widget build(BuildContext context) {
List<Widget> _layouts = [
  _videoInfo(),
  _channelInfo(),
  _comment(),
  _moreInfo(),
  VideoList(
    channel: widget.channel,
    isMiniList: true,
    currentVideoId: widget.detail.id
  ),
];

if (MediaQuery.of(context).orientation == Orientation.landscape) {
  _layouts.clear();
}

return Scaffold(
    body: Column(children: <Widget>[
      _buildVideoPlayer(context),
      Expanded(
        child: ListView(
          children: _layouts,
        ),
      )
    ]));

}

我的视频信息：

Widget _videoInfo() {
return Column(
  children: <Widget>[
    ListTile(
      title: Text(widget.detail.title),
      subtitle: Text(widget.detail.viewCount + ' . ' + widget.detail.publishedTime),
      trailing: Icon(Icons.arrow_drop_down),
    ),
    Container(
      padding: EdgeInsets.all(8.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          _buildButtomColumn(Icons.thumb_up, widget.detail.likeCount, function: _like(widget.detail.id, true)),
          _buildButtomColumn(Icons.thumb_down, widget.detail.dislikeCount, function: _like(widget.detail.id, false)),
          _buildButtomColumn(CupertinoIcons.share_up, "Partilhar"), //function: share(context, widget.detail.player)
          _buildButtomColumn(Icons.add_to_photos, "Guardar"),
        ],
      ),
    )
  ],
);

}

 _buildButtomColumn(Icons.thumb_up, widget.detail.likeCount, function: _like(widget.detail.id, true)),

该方法然后执行如下操作：

Widget _buildButtomColumn(IconData icon, String text, {function}) {
return GestureDetector(
    onTap: () => function 
    child: Column(.....

哦，这是这样的：

_like(String videoId, bool liked) {
  youtubeAPI.likeDislikeVideo(videoId, liked);
}

当我打开页面时，onTap无需我实际按下按钮即可触发。

Answer 1

哪里有问题？

您自己调用该函数，回调没有问题onTap，并且在没有用户交互的情况下不会以某种方式触发它

下一个代码片段执行_like函数调用并将返回结果传递给function:...arg（请参阅langtour）

function: _like(widget.detail.id, true)

function:如果将参数类型声明为，则可以防止这种情况，Function并且在运行代码之前将收到静态分析类型错误

_buildButtomColumn(IconData icon, String text, {Function function})

回到你的代码 - 如何修复它？

1. 将函数参数直接传递给 onTap 参数

Widget _buildButtomColumn(IconData icon, String text, {VoidCallback function}) {
/// here I enforced type as VoidCallback - it is typedef for `void Function()`
return GestureDetector(
    onTap: function, // <-- pass function, onTap type is VoidCallback
    child: Column(.....

2.a. 传递具有所需负载的匿名函数

_buildButtomColumn(Icons.thumb_up, widget.detail.likeCount,
   function: () => youtubeAPI.likeDislikeVideo(videoId, liked), // <-- this will be invoked later 
)

2.b. 这个变体是为了完整性

声明可调用类并将其实例传递给function:...arg ()

class LikeCommand {
  final String videoId;
  final bool liked;
  LikeCommand(this.videoId, this.liked);
  void call() => youtubeAPI.likeDislikeVideo(videoId, liked);
}

_buildButtomColumn(Icons.thumb_up, widget.detail.likeCount,
   function: LikeCommand(videoId, liked),
)

PS 我建议声明类型，因为 dart 是一种强类型语言，指定类型将使您避免将来出现典型问题

PPS 请随时在评论中联系我