在行内用 GestureDetector 包裹的展开不再展开答案

【问题标题】：Expanded wrapped with a GestureDetector inside a Row no longer expands在行内用 GestureDetector 包裹的展开不再展开
【发布时间】：2021-05-16 14:04:42
【问题描述】：

我在连续使用 GestureDetector 时遇到了一些布局问题。

这是我的 Widget 的构建方法：

@override
Widget build(BuildContext context) {
final dateFormat = new DateFormat('dd/MM/yyyy');

List<Widget> children = [
  Text(
    todo.content,
    style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
    overflow: TextOverflow.ellipsis,
  )
];
if (todo.date != null) {
  children.add(Text(
    dateFormat.format(todo.date!),
    style: TextStyle(color: Colors.grey),
  ));
}

return Container(
    height: 50.0,
    color: backgroundColour,
    padding: EdgeInsets.symmetric(vertical: todoVMargin),
    child: Row(
      children: [
        Theme(
            data: ThemeData(unselectedWidgetColor: Colors.white),
            child: TokidokiCheckbox(
                value: todo.checked,
                onChanged: (bool value) {
                  markChecked(value);
                })),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: children,
          ),
        ),
        ReorderableDragStartListener(
          index: todoIndex,
          child: SizedBox(
              width: 32.0,
              height: 32.0,
              child: Image.asset(
                'assets/icons/drag_handle.png',
              )),
        )
      ],
    ));
}

这就是我的行在这个设置下的样子：

需要通过双击与我的复选框和拖动手柄之间的区域进行交互，我认为用 GestureDetector 包装 Expanded 小部件就可以了，因此将其包装如下：

GestureDetector(
  child: Expanded(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.center,
      children: children,
    ),
  ),
  onDoubleTap: onDoubleTap,
),

但这就是我的行现在的样子：

Expanded 小部件不再展开并且布局中断。我尝试将 Column 包裹起来，但结果是只有文本部分是可点击的，因为 Column 不会自然展开以占用所有可用空间。

有人对如何解决这个问题有任何建议吗？

提前致谢

【问题讨论】：

标签： flutter dart

【解决方案1】：

只需在GestureDetector 中添加behavior: HitTestBehavior.opaque,，一切都会正常工作。另外，用Expanded 包裹GestureDetector。

示例代码：

Expanded(
    child: GestureDetector(
    behavior: HitTestBehavior.opaque,
    onTap: () {
        print('Tapped');
    },
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.center,
              children: children,
         ),
     ),
),

【讨论】：