Flutter 增加 ListTile 高度
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 的高度,而我所做的一切都将图像塞进一个狭窄的瓷砖中。
试试这个:
Container(height: 100, child: ListTile(
title: Text("My Title"),
trailing: Icon(Icons.arrow_right),
));
好的,答案是不可能。 ListTile 是一个非常非常基本的 built-in 小部件,它只能是一个特定的高度,您对此无能为力。
如果你想做任何视觉上很酷的事情,比如我在问题中展示的图片等,你必须创建一个自定义卡片。
我将展示我的基本卡片布局结果代码,它会给出与我发布的图片类似的结果,以防有人需要帮助:
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 包装 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.'),
),
我想要一个列表图块,其中包含大小适中的前导图像,然后是项目描述和图标。
尽管在网上搜索了答案,但我发现无论前导图像的高度如何,我都无法增加列表图块的高度。
代码:
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 的高度,而我所做的一切都将图像塞进一个狭窄的瓷砖中。
试试这个:
Container(height: 100, child: ListTile(
title: Text("My Title"),
trailing: Icon(Icons.arrow_right),
));
好的,答案是不可能。 ListTile 是一个非常非常基本的 built-in 小部件,它只能是一个特定的高度,您对此无能为力。
如果你想做任何视觉上很酷的事情,比如我在问题中展示的图片等,你必须创建一个自定义卡片。
我将展示我的基本卡片布局结果代码,它会给出与我发布的图片类似的结果,以防有人需要帮助:
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 包装 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.'),
),