首页 > 解决方案 > 在行内用 GestureDetector 包裹的展开不再展开

问题描述

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

这是我的小部件的构建方法:

@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 不会自然扩展以占用所有可用空间。

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

提前致谢

标签: flutterdart

解决方案


只需添加behavior: HitTestBehavior.opaque,GestureDetector一切都会正常工作。另外,GestureDetectorExpanded.

示例代码:

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

推荐阅读