Flutter组件ListTile 使用说明

Posted 2023-03-19

参考技术A ListTile 通常用于在 Flutter 中填充 ListView。在这篇文章中，我将用可视化的例子来说明所有的参数。

title 参数可以接受任何小部件，但通常是文本小部件

副标题是标题下面较小的文本

使文本更小，并将所有内容打包在一起

将图像或图标添加到列表的开头。这通常是一个图标。

设置拖尾将在列表的末尾放置一个图像。这对于指示主-细节布局特别有用。

设置内容边距，默认是 16，但我们在这里设置为 0

如果选中列表的 item 项，那么文本和图标的颜色将成为主题的主颜色。

ListTile 可以检测用户的点击和长按事件，onTap 为单击，onLongPress 为长按。对于波纹效果是内置的

通过将 enable 设置为 false，来禁止点击事件

静态方法 divideTiles 可以在 titles 之间添加分隔符，这个颜色有点淡，需要看仔细点才能看出来，哈哈哈哈

Flutter：如何使用 ListTile 作为子项创建 DropdownMenuItem

【中文标题】Flutter：如何使用 ListTile 作为子项创建 DropdownMenuItem

【英文标题】：Flutter: How to create a DropdownMenuItem with a ListTile as child

【发布时间】：2020-06-23 12:04:53

【问题描述】：

我想创建一个 DropDownButton，其中 DropDownMenuItem 有一个 ListTile() 作为子级，而不是通常的 Text() 小部件。 有一个类似的问题问here ，但不幸的是，答案似乎不起作用。

这是我的代码：

class _MyHomePageState extends State<MyHomePage> 
  String choice = 'Item 1';

  @override
  Widget build(BuildContext context) 
    return Center(
      child: Card(
        child: DropdownButton(
          value: choice,
          items: stringItems.map<DropdownMenuItem<String>>((String value) 
            return DropdownMenuItem<String>(
              value: value,
              child: getListTile(value),
              // child: Text(value),
            );
          ).toList(),
          onChanged: (String newValue) 
            setState(() 
              choice = newValue;
            );
          
        )
      ),
    );
  

  Widget getListTile(String value) 
    return ListTile(
      leading: Text('FooBar'),
      title: Text(value),
      trailing: Icon(Icons.euro_symbol),
    );
  

  List<String> stringItems = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];

抛出以下异常：

The following assertion was thrown during performLayout():
BoxConstraints forces an infinite width.
The offending constraints were:
BoxConstraints (w=Infinity, 0.0<=h<=48.0)
The relevant error-causing widget was:
ListTile

我已经对此异常进行了一些研究，但我发现的只是有关列和行的文章/教程。 究竟是什么问题？ （据我了解，ListTile 的宽度会延伸到无穷大）。

到目前为止我尝试过的解决方案：

我尝试将 ListTile 的“宽度”设置为特定值，但是 ListTile 没有“宽度”属性。

我已将 ListTile-Widget 包装在 Expanded-Widget 中。但是这个 也没有用。

有解决办法吗？

提前致谢！

【参考方案1】：

ListTile 没有任何限制，并且会尝试使用尽可能多的空间。如果你用固定的height 和width 包裹你的ListTile，你将不再有问题：

Widget getListTile(String value) 
  return Container(
    height: 60,
    width: 100,
    child: ListTile(
      leading: Text('FooBar'),
      title: Text(value),
      trailing: Icon(Icons.euro_symbol),
    ),
  );