flutter - GestureDetector ontap() 被构建触发

Question

在我的 build ，我有这个函数，基本上堆叠一个button和一个 counter ，我还传递了一个函数(这让我对所有按钮重用 buildbuttoncolumn，而不是复制周围的代码
我的构建:

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 ( refer to lang tour )

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

如果您声明 function:，您可以防止此类情况发生。参数类型为 Function并且在运行代码之前会得到静态分析类型错误

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

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

将函数参数直接传递给 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.这个变体是为了完整起见
声明 callable class并将它的实例传递给 function:...参数 ()

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 随时在评论中联系我