3

插图

我有以下问题：

ListTile

的title和subtitle组件ListTile即使在某些较小区域内只有文本时也会完全展开。
通常，这不是问题，因为您可以只title为与ListTie.

但是，当我尝试让onTap事件在Rowintitle或上运行时遇到问题subtitle：

ListTile onTap

如您所见，我Row在title组件中有 aIcon和 a Text。这很好用，但是，尝试添加一个onTap会title产生不需要的行为。
我只想在我实际点击文本或图标onTap时触发，而不是在我点击右侧其他地方时触发。我不知道如何将宽度限制为文本加号图标的宽度。似乎没有任何作用。这里发生了什么？title

代码

我为这两个插图创建了一个带有源代码（最小可复制示例）的要点。这应该有助于让您了解设置。

我如何仅在点击onTap实际的孩子而不是无论我做什么都明显扩展Row的整个区域时触发？title

笔记

我可能只是InkWell在 theText和 the 中Icon单独添加一个，但是，这根本不是我想要的，因为我想要一个启动画面（InkWell的启动画面）一起覆盖标题和图标，并且它们不应该在视觉上分开。

4

2 回答 2

3

请试试这个代码，它对我有用

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')),
            ),
          ),
        ),
      ),
    ),
  );
}
于 2019-07-12T21:24:03.363 回答
1

使用FlatButton.icon而不是使用 InkWelland 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')),
            ),
          ),
        ),
      ),
    ),
  );
}
于 2019-07-12T22:40:15.070 回答