在flutter中如果文本内容增加，我想让帖子底部显示更多文本？

Question

我从 API 获取数据，每篇文章的文本长度都不同，所以我想制作一个负责任的Text小部件，它的行为就像这张图片 我试过这个解决方案，但在这里如果我点击显示更多文本每个文本小部件大小增加（见这个 ) 因为我descTextShowFlag将此bool变量声明为全局变量，并且有什么方法可以动态增加文本小部件的高度，因为这里我想将该maxline属性设为默认值，该maxline属性也想动态增加，如果有什么好的方法请告诉我

   import 'package:auto_size_text/auto_size_text.dart';
    import 'package:exa/Model/ModelNewsFeed.dart';
    import 'package:flutter/material.dart';

class Examplewidget extends StatefulWidget {
  NewsFeeds newsFeeds;

  Examplewidget(this.newsFeeds);

  @override
  _ExamplewidgetState createState() => _ExamplewidgetState();
}

class _ExamplewidgetState extends State<Examplewidget> {

  String data = "We’ll see how image picker works in flutter for android and iOS. Ans: Image picker is a plugin which is used to get images from gallery or camera in the app. ... This is called Privacy - Photo Library Usage Description in the visual editor(Xcode or Android Studio).";
  bool descTextShowFlag = false;

  @override
  Widget build(BuildContext context) {

    int listsize = widget.newsFeeds.data.data.length;

    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(14.0),
        child: ListView.builder(
            itemCount: listsize,
            itemBuilder: (context, index) {
              String textStatus =
                  "${widget.newsFeeds.data.data[index].postContent}";

              return new Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text( "$textStatus",
                      style: TextStyle(fontSize: 16.0),
                      maxLines: descTextShowFlag ? 8 : 2,
                      textAlign: TextAlign.start),
                  InkWell(
                    onTap: () {
                                  setState(() {
                                    descTextShowFlag = !descTextShowFlag;
                                  });
                    },
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: <Widget>[
                        descTextShowFlag
                            ? Text(
                          "Show Less",
                          style: TextStyle(
                              fontSize: 16.0,
                              color: Colors.blue),
                        )
                            : Text("Show More",
                            style: TextStyle(color: Colors.blue))
                      ],
                    ),
                  ),
                ],
              );
            }),
      ),
    );
  }
}

Answer 1

您可以使用RichText它来帮助您内联构建小部件

这是一个工作示例

class _MyHomePageState extends State<MyHomePage> {
  var myText =
      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum ";
  var showAll = true;
final length = 150;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Text.rich(TextSpan(
        children: <InlineSpan>[
          TextSpan(
              text: myText.length > length && !showAll
                  ? myText.substring(0,length) + "..."
                  : myText),
          myText.length > length
              ? WidgetSpan(
                  child: GestureDetector(
                    onTap: () {
                      setState(() {
                        showAll = !showAll;
                      });
                    },
                    child: Text(
                      showAll ? 'read less' : 'read more!',
                      style: TextStyle(color: Colors.blue),
                    ),
                  ),
                )
              : TextSpan(),
        ],
      )),
    );
  }
}