简体   繁体   English

以 ListTile 作为子项的 Flutter 中 Card 小部件的高度不一致

[英]Inconsistent height of Card widget in Flutter with ListTile as child

When I am using Card and ListTile as its child, the height of cards differs based on the number of text lines of the subtitle parameter of ListTile.当我使用 Card 和 ListTile 作为它的孩子时,卡片的高度根据 ListTile 的字幕参数的文本行数而有所不同。 If title and subtitle are single lines of text there's some sort of top and bottom padding (highlighted with green rectangles).如果标题和副标题是单行文本,则存在某种顶部和底部填充(用绿色矩形突出显示)。 However, if subtitle consists of several lines of text, there's no top and bottom padding and the height of the card is smaller.但是,如果副标题由多行文本组成,则没有上下填充,卡片的高度更小。 What causes this inconsistency?造成这种不一致的原因是什么? How can I remove this padding from cards 1 and 2 or add it to card 3?如何从卡 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]),
              ));
        });
  }
}

screenshot of the problem问题截图

This is how ListTile works out of the box, you could check the source code if you want, but don't worry, this is Flutter, you can create and customize your own widget very easily.这就是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()
        ],
      ),
    );
  }
}

Usage用法

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

Result结果

在此处输入图片说明

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM