防止 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副標題。