[英]Flutter increase ListTile height
我想要一个列表图块,它有一个大小合适的前导图像,然后是项目的描述和一个图标。
尽管在网上搜索答案,但我发现的是,无论前导图像的高度是多少,我都无法增加列表图块的高度。
代码:
ListTile(
leading: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 100,
minHeight: 260,
maxWidth: 104,
maxHeight: 264,
),
child: Image.asset('lib/images/burger_texas_angus.jpg', fit: BoxFit.fill),
),
title: Text('Texas Angus Burger'),
subtitle: Text('With fries and coke.'),
trailing: Icon(
Icons.menu,
),
onTap: () {},
onLongPress: () {},
dense: false,
),
希望它最终看起来像这样,他们有一个漂亮的大方形前导图标,它似乎决定了 listtile 的高度,而我所做的一切都将图像塞进一个狭窄的瓷砖中。
好的,所以答案是不可能的。 ListTile 是一个非常非常基本的内置小部件,只能是特定的高度,您对此无能为力。
如果你想做任何视觉上很酷的事情,比如我在问题中展示的图片等,你必须创建一个自定义 CARD。
我将展示我的基本卡片布局结果代码,它会给出与我发布的图像类似的结果,以防有人需要帮助:
Container(
width: MediaQuery.of(context).size.width * 0.94,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0.0),
),
color: Colors.white70,
elevation: 10,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(2.0),
child: ConstrainedBox(
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width * 0.28,
maxHeight: MediaQuery.of(context).size.width * 0.28,
),
child: Image.asset(
'lib/images/burger_texas_angus.jpg',
fit: BoxFit.fill
),
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width * 0.5,
child: Padding(
padding: const EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Text(
'Texas Angus Burger',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
),
),
Container(
width: MediaQuery.of(context).size.width * 0.5,
child: Padding(
padding: const EdgeInsets.fromLTRB(5, 10, 0, 0),
child: Text(
'100% Australian Angus grain-fed beef with cheese and pickles. Served with fries.',
style: TextStyle(
fontSize: 12,
),
),
),
),
],
),
Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(5, 40, 0, 0),
child: Text(
'\$ 24.00',
style: TextStyle(
fontSize: 14,
),
),
),
],
),
],
),
),
),
],
),
),
试试这个:
Container(height: 100, child: ListTile(
title: Text("My Title"),
trailing: Icon(Icons.arrow_right),
));
你可以用 Container 包装 ListTile 并给它宽度和高度
ListTile(
leading: Container(
height: 80,
width: 80,
child: CircleAvatar(
backgroundImage: AssetImage(
'assets/images/splash_view_images/splash.png'),
),
),
title: Text('some text'),
subtitle:
Text('some text.'),
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.