在 ListTile 中放置两个尾随图标

Posted 2023-02-23

【中文标题】在 ListTile 中放置两个尾随图标

【英文标题】：Placing two trailing icons in ListTile

【发布时间】：2019-06-30 02:59:18

【问题描述】：

我想将两个图标并排放置在 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)
          ]),
        )
      ]
    ),
      ),
    );
  

看起来是这样的：

【问题讨论】：

你的意思是什么 - '完全搞砸了整个 ListTile 的布局'？ - 分享您的代码。你可能在做一些奇怪的事情。

同意@anmol.majhail。如果你可以分享截图

只调用一个函数来为列表视图返回一个自定义子窗口小部件怎么样？我建议使用 ListView.builder()

【参考方案1】：

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

【讨论】：

工作就像一个魅力！即使我不明白为什么 ListTile 小部件的行为会像这样在尾随行...

【参考方案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
    ],
  ),
)

【讨论】：

如何将它用于列？我想使用列表磁贴右侧的向上箭头、文本、向下箭头。

@TipVisor 请作为一个单独的问题提出，如果没有看到您的代码以及您希望事情如何，很难提供任何帮助。

为什么会这样？在没有 mainAxisSize 的情况下，wrap 做那一行是什么？ Tbh 我没有得到 MainAxisSize.min 解决方案。有人可以解释一下颤振在幕后做了什么吗？

我会添加crossAxisAlignment: WrapCrossAlignment.center,

【参考方案3】：

试试这个代码。我认为这工作正常：

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

【讨论】：

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

FittedBox 占用大量尾随空间。

如果你使用不同的小部件，这是最好的解决方案，因为你会得到一个很好的垂直对齐

【参考方案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),
                        ),