Flutter 嵌套的 GestureDetector 不起作用

Question

各位!我有一个项目 list 。列表中的主要 Widget 是 Card。我想将它包装在 GestureDetector 中以捕捉整张卡片上的点击事件。我在有书签图标的卡内也有 Stack。我试图将此图标包装到 GestureDetector 中，但它不起作用。

我的项目:

@override
Widget build(BuildContext context) {
// TODO: implement build
return Card(
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
  child: Column(
    children: <Widget>[
      Stack(
        children: <Widget>[
          ClickableIcon(_model._bookmarked),
          Container(
            height: 128.0,
            constraints: BoxConstraints(minWidth: double.infinity),
            child: Image.network(_model._headerSource),
          ),
        ],
      ),
      Container(
        height: 72,
        constraints: BoxConstraints(minWidth: double.infinity),
        child: Row(
          children: <Widget>[
            Container(
              margin: const EdgeInsets.only(left: 16.0, right: 16.0),
              child: CircleAvatar(
                radius: 20.0,
                backgroundImage: NetworkImage(_model._organizerLogo),
                backgroundColor: Colors.transparent,
              ),
            ),
            Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    _model._eventName,
                    style: TextStyle(
                        fontSize: 15,
                        color: Colors.black,
                        fontWeight: FontWeight.w500),
                    textAlign: TextAlign.start,
                  ),
                  SizedBox(
                    height: 8,
                  ),
                  Text(
                    "${_model._timeStart} ${_model._guide}",
                    style: TextStyle(
                        fontSize: 12,
                        color: Color(GoEngColors.secondaryTextColor),
                        fontWeight: FontWeight.w500),
                  )
                ])
          ],
        ),
      )
    ],
  ),
);
}

可点击图标代码:

class _ClickableIconState extends State<ClickableIcon> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return InkWell(
  onTap: () {
    print("bookmarked");
    setState(() {
      print("state updated");
      widget.selected = !widget.selected;
    });
  },
  child: Container(
    child: Icon(widget.selected
        ? CustomIcon.MyFlutterApp.icon_mark_applouded_1
        : CustomIcon.MyFlutterApp.icon_mark_empty_1),
    alignment: Alignment.topRight,
  ),
  );
}
}

我尝试了 GestureDetector 和 InkWell 但都没有给出预期的结果。我还尝试为 GestureDetector 设置一个 behaviour，但它也没有帮助。

所以我的问题是:如何让整张卡片的图标可点击剩余点击实现？谢谢!

编辑

使用 IconButton 而不是 Icon 没有帮助。

Answer 1

我认为你的堆叠顺序需要颠倒

Stack(
        children: <Widget>[
          Container(
            height: 128.0,
            constraints: BoxConstraints(minWidth: double.infinity),
            child: Image.network(_model._headerSource),
          ),
          ClickableIcon(_model._bookmarked),
        ],
      ),

请测试并告诉我它是否适合您。