Flutter中如何为ListView.builder添加带条件的onTap事件

我的Card组件内包含一个ListView.builder，用来展示一项工作及对应的员工列表，已经通过以下代码实现了当前登录用户条目的高亮效果：

color: gblStaffId == data[index].staffId
    ? kMainColor20
    : Colors.white,

现在需要实现仅允许用户点击自己的姓名条目弹出额外详情，其他员工条目无法点击，可以通过InkWell实现，具体修改方式如下：

修改思路 #

将每个列表项的外层容器替换为InkWell，通过判断当前条目是否为登录用户，动态设置onTap回调：

• 当是当前用户时，设置onTap为弹出详情的逻辑
• 非当前用户时，将onTap设为null，此时条目会自动变为不可点击状态

修改后的完整代码 #

ListView.builder(
  itemCount: data.length,
  shrinkWrap: true,
  physics: NeverScrollableScrollPhysics(),
  itemBuilder: (_, int index) {
    return InkWell(
      // 仅当前用户条目可点击
      onTap: gblStaffId == data[index].staffId
          ? () {
              // 这里写弹出详情的逻辑，示例用AlertDialog展示
              showDialog(
                context: context,
                builder: (context) => AlertDialog(
                  title: Text('${data[index].staffName}的详情'),
                  content: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('开始时间：${formatJsonTime24To12(data[index].startTime!)}'),
                      Text('结束时间：${formatJsonTime24To12(data[index].finishTime!)}'),
                      // 这里添加更多详情内容
                    ],
                  ),
                  actions: [
                    TextButton(
                      onPressed: () => Navigator.pop(context),
                      child: Text('关闭'),
                    ),
                  ],
                ),
              );
            }
          : null,
      // 水波纹圆角和容器圆角保持一致
      borderRadius: BorderRadius.all(Radius.circular(4)),
      child: Container(
        padding: EdgeInsets.all(5.0),
        margin: EdgeInsets.symmetric(vertical: 1.0),
        decoration: BoxDecoration(
          color: gblStaffId == data[index].staffId
              ? kMainColor20
              : Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(4)),
        ),
        child: Row(
          children: <Widget>[
            Expanded(
              flex: 49,
              child: Text(
                data[index].staffName!,
                style: TextStyle(color: kBodyText, fontSize: 16),
              ),
            ),
            Expanded(
              flex: 23,
              child: Text(
                formatJsonTime24To12(data[index].startTime!)!
                    .toLowerCase(),
                style: TextStyle(color: kBodyText, fontSize: 16),
                textAlign: TextAlign.right,
              ),
            ),
            Expanded(
              flex: 5,
              child: Text(
                ' -',
                style: TextStyle(color: kBodyText, fontSize: 16),
                textAlign: TextAlign.center,
              ),
            ),
            Expanded(
              flex: 23,
              child: Text(
                formatJsonTime24To12(data[index].finishTime!)!
                    .toLowerCase(),
                style: TextStyle(color: kBodyText, fontSize: 16),
                textAlign: TextAlign.right,
              ),
            ),
          ],
        ),
      ),
    );
  })

关键注意点 #

• InkWell的onTap设为null时，组件会自动禁用点击响应，无需额外处理
• 保持原有的背景色判断逻辑，确保高亮效果不受影响
• 设置InkWell的borderRadius与内部Container的圆角一致，使水波纹效果符合视觉预期

内容的提问来源于stack exchange，提问作者Paul Coshott