Flutter - Bungkus teks pada overflow, seperti menyisipkan elipsis atau fade

Saya mencoba membuat garis di mana teks tengah memiliki ukuran maksimum, dan jika konten teks terlalu besar, ukurannya pas.

Saya memasukkan TextOverflow.ellipsisproperti untuk mempersingkat teks dan memasukkan tiga poin ...tetapi tidak berfungsi.

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

hasil:

diharapkan:

Anda harus membungkus Anda Containerdengan a Flexibleuntuk memberi Rowtahu Anda bahwa Containerboleh saja untuk lebih sempit dari lebar intrinsiknya. Expandedjuga akan bekerja.

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

Menggunakan Ellipsis

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

Menggunakan Fade

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

Menggunakan Clip

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

catatan:

Jika Anda menggunakan Textinside a Row, Anda bisa meletakkan di atas Textinside Expandedseperti:

Expanded(
  child: AboveText(),
)

Anda dapat menggunakan kode ini yang dipotong untuk menampilkan teks dengan elipsis

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

Anda bisa melakukannya seperti itu

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

pertama, bungkus Anda Rowatau Columndi widget Flexibleatau Expandedlalu

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

Salah satu cara untuk memperbaiki kelebihan Widget Teks dalam satu baris jika misalnya pesan obrolan bisa menjadi satu baris yang sangat panjang. Anda dapat membuat Container dan BoxConstraint dengan maxWidth di dalamnya.

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

Wrapping yang elemen turunannya berada dalam satu baris atau kolom, silahkan bungkus kolom atau baris tersebut menjadi New Flexible ();

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

Cukup bungkus di dalam widget yang dapat mengambil lebar tertentu agar berfungsi atau yang akan mengasumsikan lebar penampung induk.

Saya pikir Container induk perlu diberi maxWidth dengan ukuran yang sesuai. Sepertinya kotak Teks akan mengisi ruang apa pun yang diberikan di atas.

Bergantung pada situasi Anda, menurut saya ini adalah pendekatan terbaik di bawah.

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

Jika Anda hanya menempatkan teks sebagai anak (ren) kolom, ini adalah cara termudah agar teks secara otomatis dibungkus. Dengan asumsi Anda tidak memiliki sesuatu yang lebih rumit. Dalam kasus tersebut, saya akan berpikir Anda akan membuat ukuran wadah Anda sesuai keinginan Anda dan meletakkan kolom lain di dalam dan kemudian teks Anda. Sepertinya ini bekerja dengan baik. Wadah ingin mengecilkan ukuran isinya, dan ini tampaknya secara alami bertentangan dengan pembungkusan, yang membutuhkan lebih banyak upaya.

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

Ada banyak jawaban tetapi akankah lebih banyak mengamatinya.

1. klip

Klip teks yang meluap untuk memperbaiki wadahnya.

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

Keluaran:

2. memudar

Fade teks yang meluap menjadi transparan.

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

Keluaran:

3. elipsis

Gunakan elipsis untuk menunjukkan bahwa teks telah meluap.

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

Keluaran:

4. terlihat

Merender teks yang meluap di luar penampungnya.

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

Keluaran:

Mencoba:

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

Ini akan ditampilkan OVER FLOW. Jika terjadi overflow maka akan ditangani.