如何處理 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: ...
            )

當right overflowed by 69 pixels用長句替換xxxxxx和yyyyyyy ...

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