বিড়বিড় করে - উপবৃত্ত সন্নিবেশ বা বিবর্ণের মতো ওভারফ্লোতে পাঠ্য মোড়ানো


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

ফলাফল:

এখানে চিত্র বর্ণনা লিখুন

প্রত্যাশিত:

এখানে চিত্র বর্ণনা লিখুন

উত্তর:


244

তুমি তোমার মোড়ানো উচিত 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/…
মাইকেল টেডলা

আমরা পাঠ্যক্ষেত্র এ কার্যকর করতে পারে কি কোন উপায় আছে?
মঙ্গলকুল

আপনি যদি এটি চান তবে টেক্সট র‌্যাপ_ কনটেন্টটিও ফ্লেক্সফিট.লুজের সাথে মানানসই সম্পত্তিটি নির্দিষ্ট করতে চান
মার্টিনসিয়াল ১৯8787

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

@ মিঃহির আমি দুঃখিত আমি এটি পেলাম না।
কপসঅনরোড

আপনার পাঠ্য এবং অন্য উইজেট (যেমন আইকন) একটি সারির অভ্যন্তরে কেন্দ্র করে থাকলে এটি কাজ করে না।
লুকাশজ সিআস্টকো

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
এটি কীভাবে প্রশ্নের উত্তর দেয় তা বোঝাতে দয়া করে এই কোডটির একটি বিবরণ অন্তর্ভুক্ত করুন।
jkdev


8

প্রথমে আপনার Rowবা Columnএকটি Flexibleবা Expandedউইজেটে মোড়ানো

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

হ্যাঁ, এটি সঠিক উপায়, প্রথমে সম্প্রসারিত কলামটি মোড়ানো সত্যিই কাজ করেছে! এবং কলাম বাচ্চাদের ভিতরে লেখাটি ব্যবহার করতে।
আরিফ মোস্তফা


4

এক সারি মধ্যে একটি পাঠ্য উইজেটের ওভারফ্লো ঠিক করার এক উপায় যদি উদাহরণস্বরূপ কোনও চ্যাট বার্তা সত্যিই দীর্ঘ লাইন হতে পারে। আপনি এটিতে একটি সর্বাধিক প্রস্থের সাথে একটি ধারক এবং একটি বক্সস্রন্ট তৈরি করতে পারেন।

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

এটি আমার জন্য ধন্যবাদ
আইডা

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। যদি ওভারফ্লো হয় তবে তা পরিচালনা করা হবে।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.