Flutter ListTile 如何保留trailing的同时拓展subtitle宽度至行尾区域

解决方案 #

你只需调整subtitle部分的代码，撑满父级分配的可用宽度即可，无需修改trailing逻辑，最终代码如下：

ListTile(
  leading: Container(color: Colors.blue, child: Text("leading")),
  title: Container(color: Colors.green, child: Text("title")),
  subtitle: Container(
    width: double.infinity,
    color: Colors.red,
    child: Text("subtitle"),
  ),
  trailing: Container(color: Colors.yellow, child: Text("trailing")),
)

如果使用的是3.7之前的Flutter版本，上述方案未生效，可以给subtitle套一层占满横向空间的Row结构：

ListTile(
  leading: Container(color: Colors.blue, child: Text("leading")),
  title: Container(color: Colors.green, child: Text("title")),
  subtitle: Row(
    mainAxisSize: MainAxisSize.max,
    children: [
      Expanded(
        child: Container(
          color: Colors.red,
          child: Text("subtitle"),
        ),
      )
    ],
  ),
  trailing: Container(color: Colors.yellow, child: Text("trailing")),
)

两种方案都保留了原生ListTile的trailing属性逻辑，不属于自定义Row替换的hack方案。

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