英文:
How to prevent OverFlow of the Trailing widget using Column widget to occupy all the children elements inside of a ListTile widget?
问题
如何防止使用Column小部件扩展Trailing小部件时出现溢出,以便占用ListTile小部件内的所有子元素?
感谢您的帮助。
英文:
How to prevent OverFlow of the Trailing widget using Column widget to occupy all the children elements inside of a ListTile widget ?
Thanks and appreiciate you help.
body: ListView.builder(
restorationId: 'sampleItemListView',
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {
final item = items[index];
return Padding(
padding: const EdgeInsets.only(top: 8, left: 8, right: 8),
child: Container(
color: Colors.grey.shade400,
height: 200,
child: ListTile(
isThreeLine: true,
leading: const CircleAvatar(
// Display the Flutter Logo image asset.
foregroundImage:
AssetImage('assets/images/flutter_logo.png'),
),
title: Text('Title ${item.id}'),
subtitle: Text('Subtitle ${item.id}'),
How to expand the column in the Trailing component of the
ListTile to prevent Overflow?
trailing: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: const [
Icon(
Icons.emoji_emotions,
color: Colors.green,
),
Icon(
Icons.emoji_emotions,
color: Colors.orange,
),
Icon(
Icons.emoji_emotions,
color: Colors.red,
),
],
),
onTap: () {
Navigator.restorablePushNamed(
context,
SampleItemDetailsView.routeName,
);
}),
),
);
},
),
ERROR:
════════ Exception caught by rendering library ═════════════════════════════════
A RenderFlex overflowed by 16 pixels on the bottom.
The relevant error-causing widget was
Column
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.
答案1
得分: 1
在你的情况下,有很多答案,比如
1:
1: ListTile( visualDensity: VisualDensity(vertical: 4))
2:
2: ListTile(
trailing: FittedBox(
child: Column( children: const [Icon(),Icon(),Icon()]),
),
)
但在我看来,最佳解决方案是,在这种复杂情况下使用 "Row" 而不是 "ListTile",它可以更好地控制UI小部件。
英文:
In your case there r many answers like
1: ListTile( visualDensity: VisualDensity(vertical: 4))
2: ListTile(
trailing: FittedBox(
child: Column( children: const [Icon(),Icon(),Icon()]),
),
)
** But best solution in my opinion, In such extensive cases use "Row" than "ListTile" it gives u way more control over ur UI widgets.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论