在ListTile中放置两个尾随图标

Question

我想在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)
          ]),
        )
      ]
    ),
      ),
    );
  }
}

这是它的外观：

- avishorp

---

你说的“完全搞乱了整个ListTile的布局”是什么意思？-分享你的代码。你可能在做一些奇怪的事情。 - anmol.majhail

同意 @anmol.majhail 的观点。如果可以的话，请分享截图。 - Harsh Bhikadia

直接调用一个函数返回 ListView 的自定义子 Widget 怎么样？我建议使用 ListView.builder()。 - Aditya Nigam

Answer 1

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

- avishorp

---

运行得非常好！尽管我不明白为什么ListTile小部件在trailing中有一行的行为会是这样... - D4ddy

Answer 2

您可以在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
    ],
  ),
)

- CopsOnRoad

---

如何在列中使用它？我想在列表磁贴的右侧使用向上箭头、文本和向下箭头。 - TipVisor

@TipVisor请单独提出问题，未看到您的代码和您具体想要的内容，我们难以提供任何帮助。 - CopsOnRoad

为什么这个能够工作？wrap在做什么，而row没有mainAxisSize不能做到呢？说实话，我甚至不理解MainAxisSize.min的解决方案。有人可以解释一下flutter在幕后做了什么吗？ - okihnjo

我会添加 crossAxisAlignment: WrapCrossAlignment.center,。 - marco.marinangeli

Answer 3

试一下这段代码。我认为它是正确的：

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

- TipVisor

---

使用Wrap()会少打很多字 :-) - idarwin

FittedBox占用了很多尾随空间。 - akfaisel

如果您使用不同的小部件，这是最佳解决方案，因为您将获得良好的垂直对齐。 - Millenial2020

这是最佳解决方案，因为如果您使用列而不是行，则包装无法正常工作。 - Noor Hossain

Answer 4

我利用上面提供的FittedBox解决方案，通过在横屏模式下显示一个TextButton和一个IconButton，在竖屏模式下只显示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),
                        ),

- Gama

Answer 5

给spacing赋负值就解决了问题：

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

- ahmnouira