我想要一个列表图块,其中包含尺寸合适的主图像,然后是项目的描述和图标。
尽管在网上搜索答案,我发现无论主图像的高度是多少,我都无法增加列表图块的高度。
代码:
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,
),
Run Code Online (Sandbox Code Playgroud)
希望它最终看起来像这样,他们有一个漂亮的大方形引导图标,它似乎决定了列表图块的高度,而我所做的一切都将图像塞进了一个狭窄的图块中。
Bis*_*ret 14
好吧,答案是这是不可能的。ListTile 是一个非常非常基本的内置小部件,它只能是特定的高度,并且您对此无能为力。
如果您想做任何视觉上很酷的事情,例如我在问题中显示的图片等,您必须创建一个自定义卡片。
我将展示基本卡片布局的生成代码,该代码将给出与我发布的图像类似的结果,以防有人需要一些帮助:
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,
),
),
),
],
),
],
),
),
),
],
),
),
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
17743 次 |
| 最近记录: |