Flutter中Card小部件的高度不一致,ListTile为子级

时间:2019-07-16 16:03:21

标签: flutter height tile

当我使用Card和ListTile作为其子级时,根据ListTile字幕参数的文本行数,卡的高度会有所不同。如果标题和副标题是单行文本,则存在某种顶部和底部填充(以绿色矩形突出显示)。但是,如果字幕由几行文字组成,则没有顶部和底部的填充,并且卡的高度较小。 是什么导致这种不一致?如何从卡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

1 个答案:

答案 0 :(得分:2)

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

结果

enter image description here