Flutter 如何使onTap只响应实际文本而不是整个ListTile宽度 插图

我有以下问题：

的

标题

和

副标题

组件完全展开，即使在较小的区域中只有文本。
通常，这不是问题，因为您可以将

标题

的背景颜色设置为与

列表

相同的颜色

但是，我在尝试使

onTap

事件处理

标题或
副标题中的
行时遇到问题：


如您所见，我在
标题
组件中有一个
行
，带有
图标
和
文本
。但是，如果尝试将
onTap
添加到此
title
中，则会产生不需要的行为。

我只希望
onTap
在我实际点击文本或图标时触发，而不是在我点击右侧其他地方时触发。我不知道如何将
标题的宽度限制为文本加图标的宽度。好像什么都不管用。这是怎么回事

代码
我为这两个插图提供了源代码（最小可复制示例）。这将有助于您了解设置

当点击
行
的实际子项而不是整个
标题
区域时，如何仅触发
onTap

笔记
我可能只需要在
文本和
图标中分别添加一个
InkWell
，但是，这根本不是我想要的，因为我想要一个splash（
InkWell
的splash）来覆盖标题和图标，它们不应该在视觉上分开。
请尝试一下这段代码，它适合我

import 'package:flutter/material.dart';
main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            color: Colors.greenAccent,
            child: ListTile(
              dense: true,
              leading: Material(child: const Text('leading')),
              title: Material(
                child: Row(
                  children: <Widget>[
                    InkWell(
                      onTap: () {},
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Icon(Icons.format_align_left),
                          Text(
                            'title',
                          ),
                        ],
                      ),
                    ),

                      Container(
                        height: 0.0,
                      ),

//                    Expanded(child: Container(
//                      height: 10.0,
//                    ),)
                  ],
                ),
              ),
              subtitle: Material(child: const Text('subtitle')),
              trailing: Material(child: const Text('trailing')),
            ),
          ),
        ),
      ),
    ),
  );
}

导入“包装：颤振/材料.省道”；
main（）{
runApp(
材料聚丙烯(
家：脚手架(
正文：中(
子：容器(
颜色：Colors.greenAccent，
孩子：ListTile(
是的，
前导：材质（子项：常量文本（“前导”），
标题：材料(
孩子：排(
儿童：[
墨水池(
onTap:（）{}，
孩子：排(
mainAxisSize:mainAxisSize.min，
儿童：[
图标（图标。格式\u对齐\u左），
正文(
“头衔”，
),
],
),
),
容器(
高度：0.0，
),
//扩展（子：容器）(
//身高：10.0，
//                    ),)
],
),
),
副标题：材料（子项：常量文本（“副标题”），
尾随：材质（子项：常量文本（“尾随”），
),
),
),
),
),
);
}
使用
扁平按钮。图标
而不是使用
墨水池
和
行

FlatButton.icon
解决了您提到的问题，同时也为您提供了飞溅效果和带有icon的标题。它也减少了你的代码。例如，见下文

title: Align(
     alignment: Alignment.centerLeft,
     heightFactor: 1.0,
     child: FlatButton.icon(
         splashColor: Colors.white,
         onPressed: () {},
         icon: Icon(Icons.format_align_left),
         label: Text('title'))),


完整代码

main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            color: Colors.greenAccent,
            child: ListTile(
              dense: true,
              leading: Material(child: const Text('leading')),
              title: Material(
                child: Align(
                    alignment: Alignment.centerLeft,
                    heightFactor: 1.0,
                    child: FlatButton.icon(
                        splashColor: Colors.white,
                        onPressed: () {},
                        icon: Icon(Icons.format_align_left),
                        label: Text('title'))),
              ),
              subtitle: Material(child: const Text('subtitle')),
              trailing: Material(child: const Text('trailing')),
            ),
          ),
        ),
      ),
    ),
  );
}

它起作用了。谢谢你。我想我以前试过，这很搞笑。不用担心，这种情况会发生：）请注意代码中有两个嵌套行，不确定您的意思是否是这样。嗯，我不想使用
FlatButton.icon
。我只使用了一个图标加文本作为例子。我需要说明这个问题。它是关于在
列表视图
的
标题
中展开的
行
。