时间戳

首页 > 解决方案 > ListTile 子标题 renderflex 溢出

flutter - ListTile 子标题 renderflex 溢出

问题描述

我有这样的 ListTile 字幕：

     subtitle:Flexible(flex:1,child:Row(children: [
                    (widget.condiments!=null)?Padding(
                 child:Text(condimentList,style: TextStyle(color:Colors.grey)),
                   padding: EdgeInsets.only(top: 10)):null,
               ])),
 trailing:  Row(             
            mainAxisSize: MainAxisSize.min,     
            children: <Widget>[
              IconButton(
              icon: Icon(Icons.delete))])

我收到以下错误：

A RenderFlex overflowed by 244 pixels on the right.
The relevant error-causing widget was
Row

我希望将它包裹在灵活的周围应该可以做到，但似乎我不太知道如何解决它。

标签： flutter

解决方案

只需将您的文本包装在 Expanded 中即可，无需使用换行。

在dartpad上检查 UI 输出。

ListTile(
      title: const Text('Test'),
      trailing: Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
        IconButton(onPressed: () {}, icon: const Icon(Icons.delete))
      ]),
      subtitle: Row(children: const [
        Expanded(
            child: Padding(
          padding: EdgeInsets.all(5),
          child: Text(
            'This is a test & this will have a very long paragragh to check the errors once. This is a test & this will have a very long paragragh to check the errors once.',
          ),
        ))
      ]),
    );

扩展后的 UI 输出：

扩展后的 UI 输出：

未展开的 UI 输出：

未展开的 UI 输出：

推荐阅读