list - 如何处理ListTile抖动内的右溢出

我有listTile显示标题和字幕...这是代码

ListTile(
              leading: InkWell(
                onTap: () {},
                child: Icon(Icons.fingerprint),
              ),
              title: Text("name xxx"),
              subtitle:
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      Text(
                        "xxxxxxxx",
                      ),
                      Text(
                        ' - ',
                        style: TextStyle(
                          fontSize: 10.0,
                        ),
                      ),
                      Text(
                        "yyyyyyyyyy",
                        style: TextStyle(
                          fontSize: 10.0,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
              trailing: ...
            )

当我用长句子替换xxxxxx和yyyyyyy ...我得到right overflowed by 69 pixels时，有没有办法显示我的长字幕并防止这个问题

最佳答案

您有很多潜在的解决方案，我可以建议您两个简单的选择:

选项1

如果您绝对需要显示两个Text小部件的所有内容，则可以将它们包装在 Wrap 而不是Row中:

ListTile(
  leading: InkWell(
    onTap: () {},
    child: Icon(Icons.fingerprint),
  ),
  title: Text("name xxx"),
  subtitle: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Wrap(
        children: [
          Text(
            "long text yeah long text long long and very long",
          ),
          Text(
            ' - ',
            style: TextStyle(
              fontSize: 10.0,
            ),
          ),
          Text(
            "Another quite long stuff, it's veeery long and by no means short",
            style: TextStyle(
              fontSize: 10.0,
            ),
          ),
        ],
      ),
    ],
  ),
),

选项2

如果您需要将Row及其所有子级留在一行文本中，则可以用 Flexible 包裹Text小部件，并指示它们处理潜在的溢出(也许用省略号):

ListTile(
  leading: InkWell(
    onTap: () {},
    child: Icon(Icons.fingerprint),
  ),
  title: Text("name xxx"),
  subtitle: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Row(
        children: [
          Flexible(
            child: Text(
              "long text yeah long text long long and very long",
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),
          ),
          Text(
            ' - ',
            style: TextStyle(
              fontSize: 10.0,
            ),
          ),
          Flexible(
            child: Text(
              "Another quite long stuff, it's veeery long and by no means short",
              style: TextStyle(
                fontSize: 10.0,
              ),
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),
          ),
        ],
      ),
    ],
  ),
),

关于list - 如何处理ListTile抖动内的右溢出，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/62257275/