flutter - 在行内用 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 不会自然扩展以占用所有可用空间。
有人对如何解决这个问题有任何建议吗?
提前致谢
解决方案
只需添加behavior: HitTestBehavior.opaque,
,GestureDetector
一切都会正常工作。另外,GestureDetector
用Expanded
.
示例代码:
Expanded(
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
print('Tapped');
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: children,
),
),
),
推荐阅读
- python - 使用 Python Tkinter tkFileDialog 获取文件夹路径
- symfony - 在哪里放置函数/方法来测试 SQL 查询的结果
- unity3d - Quaternion.LookRotation() 是如何工作的
- spring-boot - Spring Boot REST 服务 – 最终用户身份验证与 APP(REST 客户端)身份验证
- javascript - 将子节点(超链接)添加到 ES6/JSX 网页 div(导航栏)
- css - 动画角度仅在错误状态下工作
- case-when - sqflite 是否支持使用“CASE WHEN”进行查询?
- twilio - Twilio TwiML 如何将 URL 参数传递给 TwiML 脚本?
- java - 未正确合并分离实体?
- javascript - JS:为什么我不能在嵌套函数中调用 var 变量?