如何处理ListTile颤动中的右溢出

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

Answer 2

用Expanded 小部件包装Text 小部件：

                    children: [
                      const Expanded(child:
                      Text(
                        "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
                          textAlign: TextAlign.justify,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                      Text(
                        ' - ',
                        style: TextStyle(
                          fontSize: 10.0,
                        ),
                      ),
                      const Expanded(child:
                      Text(
                        "yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy",
                          textAlign: TextAlign.justify,
                          overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                          fontSize: 10.0,
                          ),
                        ),
                      ),
                    ],

https://api.flutter.dev/flutter/widgets/Expanded-class.html