Flutter中作为子组件的ListTile导致Card部件高度不一致

Question

当我使用Card和ListTile作为其子元素时，卡片的高度会根据ListTile的subtitle参数文本行数而不同。如果标题和副标题只有一行文本，则存在某种顶部和底部填充（用绿色矩形突出显示）。但是，如果副标题由多行文本组成，则没有顶部和底部填充，并且卡片的高度较小。

是什么导致了这种不一致性？如何从卡片1和2中删除此填充或将其添加到卡片3中？

class CardList extends StatelessWidget {
  List<List<String>> cardList = [
    ["Apple", "Fruit"],
    ["Book", "Thing"],
    [
      "Lorem ipsum",
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate tortor non mi gravida, nec"
    ]
  ];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: cardList.length,
        itemBuilder: (BuildContext context, int position) {
          return Card(
              elevation: 2.0,
              child: ListTile(
                title: Text(cardList[position][0]),
                subtitle: Text(cardList[position][1]),
              ));
        });
  }
}

问题截图

这是一张关于IT技术的问题截图。

- Gtxhz

Answer 1

这是ListTile的开箱即用功能，如果您想了解更多信息，可以查看源代码。但不用担心，这是Flutter，您可以非常轻松地创建和自定义自己的小部件。

class MyListTile extends StatelessWidget {
  final String title;
  final String subtitle;

  const MyListTile({Key key, this.title, this.subtitle}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final textTheme = Theme.of(context).textTheme;
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: textTheme.subhead,
          ),
          subtitle != null
              ? Text(
                  subtitle,
                  style: textTheme.body1,
                )
              : const SizedBox.shrink()
        ],
      ),
    );
  }
}

使用方法

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: cardList.length,
        itemBuilder: (BuildContext context, int position) {
          return Card(
            elevation: 2.0,
            child: MyListTile(
              title: cardList[position][0],
              subtitle: cardList[position][1],
            ),
          );
        });
  }

结果

- diegoveloper

---

谢谢！这是我将来一定会考虑的方法。我还找到了瓷砖高度配置在哪里（list_tile.dart -> double get _defaultTileHeight {}）。如果副标题只有一行，则返回一个瓷砖高度，如果副标题有两行或更多行，则返回另一个瓷砖高度。 - Gtxhz

更新：我错了。它没有考虑字幕有多少行。它考虑的是参数“isThreeLine”（默认为false），以及是否存在字幕。如果您需要从我的示例中的卡1和卡2中去除填充，您可以在此处简单地设置56而不是72：如果(isTwoLine) return isDense ? 64.0 : 72.0; 然后，如果您需要为所有卡片添加填充，可以在创建ListTile时指定“contentPadding”参数来完成。 - Gtxhz