list - 如何处理 ListTile flutter 中的右溢出

Question

我有 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那么，有没有办法显示我的长副标题并防止出现此问题

Answer 1

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

选项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,
            ),
          ),
        ],
      ),
    ],
  ),
),