防止 ListTile 字幕在 flutter 中换行

Question

我有以下列表拼贴，其副标题包含文本，但我不确定如何在单行上显示它。

child: ListTile(
            leading: CircleAvatar(
              radius:20,
              backgroundColor: Colors.orange[200],
              child: Padding(
                padding: EdgeInsets.all(5),
                child: FittedBox(
                  child: Text('$100'),
                ),
              ),
            ),
          title: Text(widget.title),
          
           subtitle:Padding(
             child:Text(condimentList,style: TextStyle(color:Colors.grey)),
               padding: EdgeInsets.only(top: 10)),
               visualDensity: VisualDensity.compact,
               dense:true,
        trailing ... 

这是我得到的截图。

Answer 1

您可以使用 Text Widget 的 maxLines 属性。 但是你也必须调整布局。 它可能不适合。

Text(
   condimentList,
   style: TextStyle(color:Colors.grey),
   maxLines: 1,
   overflow: TextOverflow.ellipsis,
),

编辑 1 ：您可以像这样使用自定义小部件而不是 ListTile。 如果您对此进行改进，它会比 ListTile Widget 看起来更好。

               Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 80.0),
                  child: Column(
                     mainAxisAlignment: MainAxisAlignment.center,
                     children: <Widget>[
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[        
                            CircleAvatar(
                               radius:20,
                               backgroundColor: Colors.orange[200],
                               child: const Padding(
                                  padding: EdgeInsets.all(5),
                                  child: FittedBox(
                                     child: Text('\$100'),
                                  ),
                               ),
                            ),
                            const Text("Double Beef Burger"),
                            CircleAvatar(
                               radius:10,
                               backgroundColor: Colors.orange[200],
                               child: const Padding(
                                  padding: EdgeInsets.all(5),
                                  child: FittedBox(
                                     child: Text('+'),
                                  ),
                               ),
                            ),
                            const Text("1"),
                            CircleAvatar(
                               radius:10,
                               backgroundColor: Colors.orange[200],
                               child: const Padding(
                                  padding: EdgeInsets.all(5),
                                  child: FittedBox(
                                     child: Text('-'),
                                  ),
                               ),
                            ),
                          ]
                        ),
                        const Text(
                           "salad, tomato, cheese, salad, tomato, cheese, salad, tomato, cheese",
                           style: TextStyle(color:Colors.grey),
                           maxLines: 1,
                           overflow: TextOverflow.ellipsis,
                        ),
                     ],
                   ),
                ),

                 

Answer 2

字幕自动换行的原因是你的训练图标太大了。 listtile 的副标题不能位于尾随图标下方。 Flutter documentation says it is below the title: https://api.flutter.dev/flutter/material/ListTile-class.html#:~:text=ListTile%20%28Flutter%20Widget%20of%20the%20Week%29% 20A%20list,is%20not%20optional%20and%20is%20specified%20with%20title 。 因为字幕不能在尾随图标下方，所以防止字幕换行的唯一方法是将其换行，以便仅显示部分字幕，但您可以沿该行滚动以查看 rest副标题。