Flutter - Üç nokta ekleme veya solma gibi taşma üzerine metni sar

Merkez metnin maksimum boyuta sahip olduğu bir çizgi oluşturmaya çalışıyorum ve metin içeriği çok büyükse, boyut olarak sığar.

TextOverflow.ellipsisMetni kısaltmak ve üçlü noktaları eklemek için özelliği ekliyorum ...ama çalışmıyor.

main.dart

import 'package:flutter/material.dart';

void main() {
runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    appBar: new AppBar(
      backgroundColor: new Color(0xFF26C6DA),
    ),
    body: new ListView  (
      children: <Widget>[
        new Card(
          child: new Container(
            padding: new EdgeInsets.symmetric(horizontal: 16.0, vertical: 18.0),
            child: new Row(
              children: <Widget>[
                new Container(
                  padding: new EdgeInsets.only(right: 24.0),
                  child: new CircleAvatar(
                    backgroundColor: new Color(0xFFF5F5F5),
                    radius: 16.0,
                  )
                ),
                new Container(
                  padding: new EdgeInsets.only(right: 13.0),
                  child: new Text(
                    'Text lar...',
                    overflow: TextOverflow.ellipsis,
                    style: new TextStyle(
                      fontSize: 13.0,
                      fontFamily: 'Roboto',
                      color: new Color(0xFF212121),
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                new Container(
                  child: new Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: <Widget>[
                      new Row(
                        children: <Widget>[
                          new Text(
                            'Bill  ',
                            style: new TextStyle(
                              fontSize: 12.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF9E9E9E)
                            ),
                          ),
                          new Text(
                            '\$ -999.999.999,95',
                            style: new TextStyle(
                              fontSize: 14.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF212121)
                            ),
                          ),
                        ],
                      ),
                      new Row(
                        children: <Widget>[
                          new Text(
                            'Limit  ',
                            style: new TextStyle(
                              fontSize: 12.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF9E9E9E)
                            ),
                          ),
                          new Text(
                            'R\$ 900.000.000,95',
                            style: new TextStyle(
                              fontSize: 14.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF9E9E9E)
                            ),
                          ),
                        ],
                      ),
                    ]
                  )
                )
              ],
            ),
          )
        ),
      ]
    )
  );
}

sonuç:

beklenen:

Kendi genişliğinden daha dar olmasının uygun olduğunu bildirmek için başınızı Containera sarmalamanız gerekir . da çalışacak.FlexibleRowContainerExpanded

Flexible(
  child: new Container(
    padding: new EdgeInsets.only(right: 13.0),
    child: new Text(
      'Text largeeeeeeeeeeeeeeeeeeeeeee',
      overflow: TextOverflow.ellipsis,
      style: new TextStyle(
        fontSize: 13.0,
        fontFamily: 'Roboto',
        color: new Color(0xFF212121),
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
),

Ellipsis Kullanımı

Text(
  "This is a long text",
  overflow: TextOverflow.ellipsis,
),

Fade kullanma

Text(
  "This is a long text",
  overflow: TextOverflow.fade,
  maxLines: 1,
  softWrap: false,
),

Klibi Kullanma

Text(
  "This is a long text",
  overflow: TextOverflow.clip,
  maxLines: 1,
  softWrap: false,
),

Not:

A'nın Textiçinde kullanıyorsanız Row, Textiçine aşağıdaki Expandedgibi koyabilirsiniz :

Expanded(
  child: AboveText(),
)

Üç nokta ile metni göstermek için bu kodu alıntılandırabilirsiniz

Text(
    "Introduction to Very very very long text",
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
    softWrap: false,
    style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
),

Bunu böyle yapabilirsin

Expanded(
   child: Text(
   'Text',
   overflow: TextOverflow.ellipsis,
   maxLines: 1
   )
)

önce, Rowveya Columnbir Flexibleveya Expandedwidget içine sarın, ardından

Text(
    'your long text here',
    overflow: TextOverflow.fade,
    maxLines: 1,
    softWrap: false,
    style: Theme.of(context).textTheme.body1,
)

Bir satırdaki Metin Widget'ının taşmasını düzeltmenin bir yolu, örneğin bir sohbet mesajı gerçekten uzun bir satır olabilir. İçinde maxWidth bulunan bir Container ve BoxConstraint oluşturabilirsiniz.

            Container(
              constraints: BoxConstraints(maxWidth: 200),
                child: Text(
                  (chatName == null) ? " ": chatName,
                  style: TextStyle(
                      fontWeight: FontWeight.w400,
                      color: Colors.black87,
                      fontSize: 17.0),
                )
            ),

Alt öğeleri bir satır veya sütunda olan sarma, lütfen sütununuzu veya satırınızı kaydırın yeni Esnek ();

https://github.com/flutter/flutter/issues/4128

SizedBox(
    width: 200.0,
    child: Text('PRODUCERS CAVITY FIGHTER 50X140g',
                overflow: TextOverflow.ellipsis,
                style: Theme.of(context).textTheme.body2))

Çalışması için belirli bir genişlik alabilen bir widget'ın içine sarın, aksi takdirde üst konteynerin genişliğini üstlenir.

Bence üst Konteyner'e uygun büyüklükte bir maxWidth verilmesi gerekiyor. Metin kutusu yukarıda verilen boşluğu dolduracak gibi görünüyor.

Durumunuza bağlı olarak, bunun aşağıdaki en iyi yaklaşım olduğunu düşünüyorum.

final maxWidth = MediaQuery.of(context).size.width * 0.4;
Container(
        textAlign: TextAlign.center),
        child: Text('This is long text',
        constraints: BoxConstraints(maxWidth: maxWidth),
),

Metni bir sütunun alt öğeleri olarak yerleştirirseniz, metnin otomatik olarak sarılmasının en kolay yolu budur. Daha karmaşık bir şeyin olmadığını varsayarsak. Bu durumlarda, kabınızı uygun gördüğünüz boyutta oluşturacağınızı ve içine başka bir sütun ve ardından metninizi koyacağınızı düşünürdüm. Bu güzel çalışıyor gibi görünüyor. Kaplar, içeriklerinin boyutuna küçülmek istiyor ve bu, doğal olarak daha fazla çaba gerektiren ambalajla çelişiyor gibi görünüyor.

Column(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Text('This long text will wrap very nicely if there isn't room beyond the column\'s total width and if you have enough vertical space available to wrap into.',
      style: TextStyle(fontSize: 16, color: primaryColor),
      textAlign: TextAlign.center,),
  ],
),

Pek çok cevap var ama biraz daha gözlemleyecek.

1. klip

Kapını düzeltmek için taşan metni kırpın.

SizedBox(
          width: 120.0,
          child: Text(
            "Enter Long Text",
            maxLines: 1,
            overflow: TextOverflow.clip,
            softWrap: false,
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ),

Çıktı:

2. solmak

Taşan metni şeffaf hale getirin.

SizedBox(
          width: 120.0,
          child: Text(
            "Enter Long Text",
            maxLines: 1,
            overflow: TextOverflow.fade,
            softWrap: false,
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ), 

Çıktı:

3. ellipsis

Metnin taştığını belirtmek için bir üç nokta kullanın.

SizedBox(
          width: 120.0,
          child: Text(
            "Enter Long Text",
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            softWrap: false,
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ),

Çıktı:

4. görünür

Taşan metni kabının dışında işleyin.

SizedBox(
          width: 120.0,
          child: Text(
            "Enter Long Text",
            maxLines: 1,
            overflow: TextOverflow.visible,
            softWrap: false,
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
          ),
        ),

Çıktı:

Deneyin:

 Expanded(
  child: Container(
      child: Text('OVER FLOW TEST TEXTTTT',
          overflow: TextOverflow.fade)),
),

Bu gösterecek OVER FLOW. Bir taşma varsa, ele alınacaktır.