Question

大家！我有项目清单。列表中的主要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，但都没有得到预期的结果。我还尝试为behaviour设置一个GestureDetector，但这也无济于事。

所以我的问题如下：如何使整个卡的图标可点击的剩余点击实现？谢谢！

编辑

使用IconButton代替Icon并没有帮助。

Answer 1

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

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

请进行测试，让我知道它是否对您有用。

Flutter嵌套的GestureDetector无法正常工作

1 个答案: