Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果

Expanded是自动扩展布局,它可以用于Row, ColumnFlex布局中。Expanded部件会尝试占用尽可能多的空间。

但是在GestureDetector中,点击事件会无效:

解决方法

给GestureDetector包裹的最外层Widget加一个背景色:

复制代码
GestureDetector(
      onTap: onTap,
      child: Container(
        color: Colors.transparent,
        height: 50,
        margin: const EdgeInsets.only(left: 10, right: 10),
        child: Stack(
          alignment: Alignment.center,
          children: [
            Row(
              children: <Widget>[
                Image.asset(image),
                Container(
                  margin: const EdgeInsets.only(left: 10),
                  child: Text(
                    title,
                    style: const TextStyle(fontSize: 16),
                  ),
                ),
                Expanded(child: Container()), //自动扩展挤压
                Image.asset(
                  'assets/images/community_icon_right.png',
                  width: 20,
                )
              ],
            ),
          ],
        ),
      ),
    );
相关推荐
Ulyanov1 分钟前
Python射击游戏开发实战:从系统架构到高级编程技巧
开发语言·前端·python·系统架构·tkinter·gui开发
华仔啊6 分钟前
这 10 个 Vue3 性能优化技巧很实用,但很多项目都没用上
前端·vue.js
手握风云-8 分钟前
JavaEE 进阶第九期:Spring MVC - Web开发的“交通枢纽”(三)
前端·spring·java-ee
怕浪猫11 分钟前
React从入门到出门第九章 资源加载新特性Suspense 原生协调原理与实战
javascript·react.js·前端框架
天问一16 分钟前
Cesium 处理屏幕空间事件(鼠标点击、移动、滚轮)的示例
前端·javascript
@PHARAOH16 分钟前
WHAT - Vercel react-best-practices 系列(五)
前端·react.js·前端框架
南村群童欺我老无力.16 分钟前
Flutter 框架跨平台鸿蒙开发-鸿蒙计算器开发教程
vscode·flutter·华为·typescript·harmonyos
bjzhang7517 分钟前
使用 HTML + JavaScript 实现多会议室甘特视图管理系统
前端·javascript·html
qiqiliuwu18 分钟前
VUE3+TS+ElementUI项目中监测页面滚动scroll事件以及滚动高度不生效问题的解决方案(window.addEventListener)
前端·javascript·elementui·typescript·vue
LawrenceLan19 分钟前
16.Flutter 零基础入门(十六):Widget 基础概念与第一个 Flutter 页面
开发语言·前端·flutter·dart