如何使onTap仅响应实际文本而不是整个ListTile宽度

Question

插图

我有以下问题：

即使在较小的区域中只有文本，ListTile的title和subtitle组件也会完全展开。
通常，这不是问题，因为您可以将title的背景和ListTie涂上相同的颜色。

但是，尝试在onTap或Row中的 title 上运行subtitle事件时遇到问题：

如您所见，我在Row组件中有一个title，其中有一个Icon和一个Text。效果很好，但是，尝试向此onTap添加title会产生不良行为。
我仅希望onTap在我点击文本或图标时触发，而不是在我点击右侧其他地方时触发。我不知道如何将title的宽度限制为文本加图标的宽度。似乎没有任何效果。这是怎么回事？

代码

I created a Gist带有两个插图的源代码（最小可重现示例）。这应该有助于您了解设置过程。

仅在点击onTap的实际子级时，而不是无论我做什么，整个Row区域都不会扩展的情况下，我怎么才触发title？

注释

我可能只向InkWell和Text分别添加一个Icon，但这根本不是我想要的，因为我想要一个飞溅（{{1 }}的首字母缩写）将标题和图标一起覆盖，并且不应在视觉上将它们分开。

Answer 1

请尝试以下对我有用的代码

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')),
            ),
          ),
        ),
      ),
    ),
  );
}

Answer 2

使用FlatButton.icon而不是InkWell和Row。

FlatButton.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')),
            ),
          ),
        ),
      ),
    ),
  );
}