如何从大文本颤动中显示一小部分文本？答案

【问题标题】：how display small portion of text from big text flutter?如何从大文本颤动中显示一小部分文本？
【发布时间】：2021-08-25 04:34:26
【问题描述】：

实际

Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Mauris non mauris nulla。 Nam euismod condimentum erat，tempor efficitur quam。 Aliquam commodo pretium libero vel interdum。 Quisque suscipit是massa suscipit auctor。 Maecenas faucibus mattis interdum。 Duis lacinia turpis 在 tortor aliquet，坐在 amet consequat nibh molestie。前庭坐在amet placerat sapien。 Cras efficitur orci massa，非 mattis nunc laoreet porta。 Maecenas purus lacus，consectetur ac lorem et，pulvinar venenatis neque。 Quisque hendrerit sagittis rutrum。 Sed et suscipit 精英。 Donec in lectus in nisi vestibulum venenatis at eu nisi。 Phasellus diam est, varius ac odio ac, facilisis hendrerit sapien。

预期

注意

没有阅读更多功能

【问题讨论】：

你可以使用 readmore 包。 pub.dev/packages/readmore

标签： flutter flutter-layout flutter-widget flutter-text flutter-textinputfield

【解决方案1】：

你可以使用overflow属性来达到这个效果

Expanded(
    child: Text(
      "Any Large Text",
      maxLines: 5,
      overflow: TextOverflow.ellipsis,
   ),
);

确保用 Expanded 包裹 Text 小部件。

您还可以尝试其他属性，例如 minLines 或其他形式的溢出，例如 TextOverflow.fade 或 TextOverflow.clip。

【讨论】：

只需要 maxLines: 5 5 行
好的，我已经更新了，您可以根据需要进行更改。

【解决方案2】：

您可以通过将maxLines 与Text 小部件中的overflow 属性结合使用来实现此目的。

import 'package:flutter/material.dart';

class TextExample extends StatelessWidget {
  const TextExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        margin: EdgeInsets.all(16),
        alignment: Alignment.center,
        child: Text(
          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non mauris nulla. Nam euismod condimentum erat, tempor efficitur quam. Aliquam commodo pretium libero vel interdum. Quisque suscipit a massa suscipit auctor. Maecenas faucibus mattis interdum. Duis lacinia turpis at tortor aliquet, sit amet consequat nibh molestie. Vestibulum sit amet placerat sapien. Cras efficitur orci massa, non mattis nunc laoreet porta. Maecenas purus lacus, consectetur ac lorem et, pulvinar venenatis neque. Quisque hendrerit sagittis rutrum. Sed et suscipit elit. Donec in lectus in nisi vestibulum venenatis at eu nisi. Phasellus diam est, varius ac odio ac, facilisis hendrerit sapien.',
          maxLines: 6,
          overflow: TextOverflow.ellipsis,
          textAlign: TextAlign.justify,
        ),
      ),
    );
  }
}

【讨论】：

【解决方案3】：

String text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non mauris nulla. Nam euismod condimentum erat, tempor efficitur quam. Aliquam commodo pretium libero vel interdum. Quisque suscipit a massa suscipit auctor. Maecenas faucibus mattis interdum. Duis lacinia turpis at tortor aliquet, sit amet consequat nibh molestie. Vestibulum sit amet placerat sapien. Cras efficitur orci massa, non mattis nunc laoreet porta. Maecenas purus lacus, consectetur ac lorem et, pulvinar venenatis neque. Quisque hendrerit sagittis rutrum. Sed et suscipit elit. Donec in lectus in nisi vestibulum venenatis at eu nisi. Phasellus diam est, varius ac odio ac, facilisis hendrerit sapien.';
  
  bool readMore = false;
  
  @override
  Widget build(BuildContext context) {
    return RichText(
      text: TextSpan( //change 200 to required length
  text : text.length>200 && readMore ? text : text.substring(0,200),
    children: <TextSpan>[
      text.length > 200 ?
      TextSpan(text: readMore?
               ' Show Less' : '...Read More...', style: TextStyle(color: Colors.blue,),
              recognizer: TapGestureRecognizer()..onTap = () {
      setState((){
        readMore = !readMore;
      });
    },
              ) :null,
    ]
  ), 
      );
  }

Dartpad截图

【讨论】：