Flutter - Gói văn bản trên vùng tràn, như chèn dấu chấm lửng hoặc làm mờ dần


121

Tôi đang cố gắng tạo một dòng trong đó văn bản ở giữa có kích thước tối đa và nếu nội dung văn bản quá lớn, nó sẽ vừa với kích thước.

Tôi chèn thuộc TextOverflow.ellipsistính để rút ngắn văn bản và chèn ba điểm ...nhưng nó không hoạt động.

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

kết quả:

nhập mô tả hình ảnh ở đây

hy vọng:

nhập mô tả hình ảnh ở đây

Câu trả lời:


246

Bạn nên bọc của bạn Containertrong một Flexibleđể cho bạn Rowbiết rằng bạn Containercó thể thu hẹp hơn chiều rộng nội tại của nó. Expandedcũng sẽ hoạt động.

ảnh chụp màn hình

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

1
Tôi có một vấn đề tương tự trên Cột. Cách tiếp cận này không hiệu quả với tôi. stackoverflow.com/questions/52206221/…
Michael Tedla

có cách nào chúng ta có thể thực hiện điều này trong textfield không?
mangkool,

nếu bạn muốn nó cũng có văn bản wrap_content chỉ định tài sản phù hợp với FlexFit.loose,
martinseal1987

108

Sử dụng Dấu ba chấm

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

nhập mô tả hình ảnh ở đây


Sử dụng Fade

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

nhập mô tả hình ảnh ở đây


Sử dụng Clip

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

nhập mô tả hình ảnh ở đây


Ghi chú:

Nếu bạn đang sử dụng Textbên trong a Row, bạn có thể đặt bên trên Textbên trong Expandednhư:

Expanded(
  child: AboveText(),
)

tôi có thể thêm khi tràn văn bản sau đó thêm một nút phẳng như ... chi tiết liên kết
mr.hir

@ mr.hir Tôi xin lỗi vì tôi không hiểu.
CopsOnRoad,

Điều này không hoạt động nếu bạn có văn bản và một tiện ích khác (ví dụ: biểu tượng) ở giữa bên trong một hàng.
Lukasz Ciastko

softWrap: falselà chính xác những gì tôi cần, cảm ơn!
coldembrace

Này, nếu chúng ta muốn thêm, chẳng hạn như một trang mới với văn bản tràn ra thì sao?
Nithin Sai

22

Bạn có thể sử dụng đoạn mã được cắt này để hiển thị văn bản có dấu chấm lửng

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

11
Ngoài ra, vui lòng bao gồm mô tả của mã này để giải thích cách nó trả lời câu hỏi.
jkdev

14

Bạn có thể làm điều đó như thế

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

8

trước tiên, bọc Rowhoặc Columntrong một Flexiblehoặc Expandedtiện ích, sau đó

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

Vâng, đây là cách đúng đắn, trước tiên việc gói Cột bên trong Mở rộng thực sự đã hoạt động! và để sử dụng Văn bản bên trong cột con.
ArifMustafa


4

Một cách để sửa lỗi tràn Tiện ích văn bản trong một hàng nếu ví dụ: một tin nhắn trò chuyện có thể là một dòng thực sự dài. Bạn có thể tạo một Container và một BoxConstraint với maxWidth trong đó.

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

điều này làm việc cho tôi cảm ơn
aida

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

Chỉ cần bọc bên trong một tiện ích có thể lấy một chiều rộng cụ thể để nó hoạt động hoặc nó sẽ giả sử chiều rộng của vùng chứa mẹ.


0

Tôi nghĩ rằng Vùng chứa mẹ cần được cung cấp Chiều rộng tối đa có kích thước thích hợp. Có vẻ như hộp Văn bản sẽ lấp đầy bất kỳ khoảng trống nào mà nó được đưa ra ở trên.


0

Tùy thuộc vào tình huống của bạn, tôi nghĩ đây là cách tiếp cận tốt nhất dưới đây.

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

0

Nếu bạn chỉ đơn giản đặt văn bản dưới dạng (các) cột con, thì đây là cách dễ nhất để văn bản tự động bao quanh. Giả sử bạn không có bất cứ điều gì phức tạp hơn đang xảy ra. Trong những trường hợp đó, tôi nghĩ bạn sẽ tạo vùng chứa của mình có kích thước như bạn thấy phù hợp và đặt một cột khác vào bên trong rồi đến văn bản của bạn. Điều này dường như hoạt động tốt. Các thùng chứa muốn thu nhỏ kích thước của nó và điều này dường như mâu thuẫn một cách tự nhiên với việc gói, đòi hỏi nhiều nỗ lực hơn.

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

0

Có rất nhiều câu trả lời nhưng sẽ có một số quan sát nó.

1. clip

Kẹp văn bản tràn để sửa vùng chứa của 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),
          ),
        ),

Đầu ra:

nhập mô tả hình ảnh ở đây

2.fade

Làm mờ văn bản tràn thành trong suốt.

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

Đầu ra:

nhập mô tả hình ảnh ở đây

3. hoa trà

Sử dụng dấu chấm lửng để biểu thị rằng văn bản đã bị trà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),
          ),
        ),

Đầu ra:

nhập mô tả hình ảnh ở đây

4. vô hình

Hiển thị văn bản tràn ra bên ngoài vùng chứa của nó.

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

Đầu ra:

nhập mô tả hình ảnh ở đây


-3

Thử:

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

Điều này sẽ hiển thị OVER FLOW. Nếu có tràn sẽ xử lý.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.