[英]Inconsistent height of Card widget in Flutter with ListTile as child
當我使用 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]),
));
});
}
}
這就是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],
),
);
});
}
結果
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.