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:... 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可以随时通过评论与我联系

GestureDetector ontap（）被构建触发

1 个答案: