在 ListTile 中放置两个尾随图标

我想把两个图标并排放在 ListTile 的“尾部”。我尝试添加一个 Row 小部件,其中包含两个图标,但它完全搞乱了整个 ListTile 的布局,使其无法使用。有没有办法扩大分配给尾部的空间?

密码是这样的:

import 'package:flutter/material.dart';


void main() => runApp(new MyApp());


class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.play_arrow,),
title: Text("This is a title"),
subtitle: Text("This is subtitle"),
trailing: Row(
children: <Widget>[
Icon(Icons.flight),
Icon(Icons.flight_land)
]),
)
]
),
),
);
}
}

看起来是这样的:

60829 次浏览

mainAxisSize: MainAxisSize.min添加到 Row ()实例可以解决这个问题。

您可以在 trailing中简单地使用 Wrap

ListTile(
title: Text("This is my ListTile"),
trailing: Wrap(
spacing: 12, // space between two icons
children: <Widget>[
Icon(Icons.call), // icon-1
Icon(Icons.message), // icon-2
],
),
)

enter image description here

试试这个代码。我认为这是正确的工作:

trailing: FittedBox(
fit: BoxFit.fill,
child: Row(
children: <Widget>[
Icon(Icons.flight),
Icon(Icons.flight_land),
],
),
),

我利用了上面的 FittedBox 解决方案,当屏幕处于横向和纵向模式时,只显示 IconButton,通过显示 TextButton 和 IconButton 解决了我的问题

trailing: MediaQuery.of(context).size.width > 480
? FittedBox(
fit: BoxFit.fill,
child: Row(
children: <Widget>[
TextButton(
style: TextButton.styleFrom(
// padding: const EdgeInsets.all(16.0),
primary: Theme.of(context).errorColor,
textStyle: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold),
),
onPressed: () => onRemove(tr.id),
child: const Text('Excluir'),
),
IconButton(
icon: Icon(Icons.delete),
color: Theme.of(context).errorColor,
onPressed: () => onRemove(tr.id),
),
],
),
)
: IconButton(
icon: Icon(Icons.delete),
color: Theme.of(context).errorColor,
onPressed: () => onRemove(tr.id),
),

spacing设置负值就可以解决这个问题:

   trailing: Wrap(
spacing: -16,
children: [
IconButton(
icon: const Icon(Icons.edit),
onPressed: () {},
),
IconButton(
icon: const Icon(
Icons.delete,
color: Colors.redAccent,
),
onPressed: () {},
),
],
),

enter image description here