flutter - 防止 ListTile 字幕在 flutter 中包装文本

标签 flutter dart

我有以下列表图块,其副标题正在包装文本,但我不确定如何将其显示在一行上。

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 ... 
这是我得到的截图。
enter image description here

最佳答案

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

                 

关于flutter - 防止 ListTile 字幕在 flutter 中包装文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68781625/

相关文章:

firebase - 在 firestore 中自动创建集合

Flutter 状态栏动态改变颜色

dart - 没有 AppBar 的 Flutter TabBar

list - Dart 流/列表

flutter - 如何将底部导航项与停靠的晶圆厂完美对齐?

listview - 使用显示对话框和文本字段更新 Flutter 中的单个 ListView 项

android - 如何在 flutter 中获取 Chrome 支持的 webview?

android - 将 FlutterFragment 添加到 Activity?

android-studio - Android Studio Flutter项目报错: Out of Memory

dart - 如何在 Dart 语言中将 Future<List<Map> 转换为 List<Map>?