स्पंदन - अतिप्रवाह पर लपेट पाठ, जैसे कि दीर्घवृत्त या फीका डालें


121

मैं एक लाइन बनाने की कोशिश कर रहा हूं जिसमें केंद्र पाठ का अधिकतम आकार हो, और यदि पाठ सामग्री बहुत बड़ी है, तो यह आकार में फिट बैठता है।

मैं TextOverflow.ellipsisपाठ को छोटा करने और ट्रिपल बिंदुओं को सम्मिलित करने के लिए संपत्ति सम्मिलित करता हूं ...लेकिन यह काम नहीं कर रहा है।

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

परिणाम:

यहां छवि विवरण दर्ज करें

अपेक्षित होना:

यहां छवि विवरण दर्ज करें

जवाबों:


250

आप अपने लपेट चाहिए Containerएक में Flexibleअपने जाने के लिए Rowपता है कि यह ठीक है के लिए Containerउसके अंतर्निहित चौड़ाई से अधिक परिमित किया जाना है। Expandedकाम भी करेगा।

स्क्रीनशॉट

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
मुझे कॉलम पर इसी तरह की समस्या है। यह दृष्टिकोण मेरे लिए काम नहीं कर रहा है। stackoverflow.com/questions/52206221/…
माइकल टेडला

वहाँ किसी भी तरह से हम textfield में इसे लागू कर सकते हैं?
मंगलगू

यदि आप चाहते हैं कि इसमें टेक्स्ट रैप_ कॉंटेंट भी हो, तो FlexFit.loose के साथ फिट प्रॉपर्टी को निर्दिष्ट करें,
martinseal1987

108

एलिप्सिस का उपयोग करना

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

यहां छवि विवरण दर्ज करें


फीका का उपयोग करना

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

यहां छवि विवरण दर्ज करें


क्लिप का उपयोग करना

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

यहां छवि विवरण दर्ज करें


ध्यान दें:

यदि आप Textअंदर का उपयोग कर रहे हैं Row, तो आप Textअंदर Expandedजैसे डाल सकते हैं:

Expanded(
  child: AboveText(),
)

क्या मैं जोड़ सकता हूं जब टेक्स्ट ओवरफ्लो होता है तो एक फ्लैट बटन जोड़ें जैसे ... अधिक लिंक
mr.hir

@ mr.hir मुझे खेद है कि मुझे वह नहीं मिला।
कोप्सऑनराड

यदि आपके पास एक पंक्ति के अंदर पाठ और दूसरा विजेट (जैसे आइकन) है, तो यह काम नहीं करता है।
लुकाज़ Ciastko

softWrap: falseवास्तव में मैं क्या जरूरत है, धन्यवाद!
ठंड

अरे, क्या होगा अगर हम जोड़ना चाहते हैं, उदाहरण के लिए, अतिप्रवाहित पाठ के साथ एक नया पृष्ठ?
नितिन साईं

22

दीर्घवृत्त के साथ पाठ दिखाने के लिए आप इस कोड का उपयोग कर सकते हैं

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

11
कृपया इस कोड के विवरण को यह समझाने के लिए शामिल करें कि यह प्रश्न का उत्तर कैसे देता है।
20


8

पहले, अपने लपेट Rowया Columnएक में Flexibleया Expandedविजेट तो

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

हां, यह सही तरीका है, पहले विस्तार के अंदर कॉलम को लपेटकर वास्तव में काम किया! और कॉलम बच्चों के अंदर पाठ का उपयोग करने के लिए।
अरिफ़मुस्तफा


4

एक पंक्ति के भीतर एक पाठ विजेट के अतिप्रवाह को ठीक करने का एक तरीका यदि उदाहरण के लिए एक चैट संदेश एक बहुत लंबी रेखा हो सकती है। आप इसमें एक अधिकतम चौड़ाई के साथ एक कंटेनर और एक BoxConstraint बना सकते हैं।

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

यह मेरे लिए धन्यवाद काम किया
Aida

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

बस एक विजेट के अंदर लपेटो जो काम करने के लिए एक विशिष्ट चौड़ाई ले सकता है या यह मूल कंटेनर की चौड़ाई को मान लेगा।


0

मुझे लगता है कि माता-पिता कंटेनर को उचित आकार का अधिकतम लाभ दिया जाना चाहिए। ऐसा लगता है कि टेक्स्ट बॉक्स ऊपर दी गई जगह को भर देगा।


0

आपकी स्थिति के आधार पर, मुझे लगता है कि यह सबसे अच्छा तरीका है।

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

0

यदि आप टेक्स्ट को कॉलम के एक बच्चे (रेन) के रूप में रखते हैं, तो टेक्स्ट को स्वचालित रूप से लपेटने का यह सबसे आसान तरीका है। मान लें कि आपके पास कुछ और अधिक जटिल नहीं है। उन मामलों में, मुझे लगता है कि आप अपने कंटेनर का आकार बनाएंगे जैसा कि आप फिट देखते हैं और एक और कॉलम अंदर और फिर अपना पाठ डालते हैं। यह अच्छी तरह से काम करने लगता है। कंटेनर अपनी सामग्री के आकार को कम करना चाहते हैं, और यह स्वाभाविक रूप से लपेटने के साथ संघर्ष करता है, जिसके लिए अधिक प्रयास की आवश्यकता होती है।

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

कई उत्तर हैं लेकिन क्या कुछ और अवलोकन करेंगे।

1. क्लिप

इसके कंटेनर को ठीक करने के लिए अतिप्रवाहित पाठ को क्लिप करें।

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

आउटपुट:

यहां छवि विवरण दर्ज करें

2.fade

पारदर्शी करने के लिए अतिप्रवाह पाठ फीका करें।

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

आउटपुट:

यहां छवि विवरण दर्ज करें

3.ellipsis

यह इंगित करने के लिए कि पाठ ओवरफ्लो हुआ है, एक दीर्घवृत्त का उपयोग करें।

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

आउटपुट:

यहां छवि विवरण दर्ज करें

4.visible

इसके कंटेनर के बाहर टेक्स्ट को ओवरफ्लो करना।

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

आउटपुट:

यहां छवि विवरण दर्ज करें


-3

प्रयत्न:

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

यह दिखाएगा OVER FLOW। ओवरफ्लो होने पर उसे संभाला जाएगा।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.