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

Question

我从 API 获取数据，每个帖子的文本长度都不同，所以我想制作一个负责任的 Text 小部件，它希望表现得像这张图片 我尝试了这个解决方案，但是如果我点击 show more text 每个 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(),
        ],
      )),
    );
  }
}

Answer 2

终于找到了这个解决方案，效果很好

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


class NewsfeedPost extends StatefulWidget {

  NewsFeeds newsFeeds;  // This is my model class for the API Response
  NewsfeedPost(this.newsFeeds);

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

class _NewsfeedPostState extends State<NewsfeedPost> {

  String imageLink = "https://picsum.photos/250?image=9";

  bool descTextShowFlag = false; // defaultly every post has small texts ()

  @override
  Widget build(BuildContext context) {
    int listsize = widget.newsFeeds.data.data.length;

    return Scaffold(
      body: Padding(
        padding:  EdgeInsets.only(right: 4,left: 4,top: 4,bottom: 4),
        child: ListView.builder(
            itemCount: listsize,
            itemBuilder: (context, index) {
              String textStatus = "${widget.newsFeeds.data.data[index].postContent}";

              String fname='${widget.newsFeeds.data.data[index].postOwner.firstName}';
              String lname='${widget.newsFeeds.data.data[index].postOwner.lastName}';
              String postdate='${widget.newsFeeds.data.data[index].updatedAt}';

              int textlength = textStatus.length;

              return Card(
                child: SingleChildScrollView(
                  child: new Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Container(
                        height:60.0 ,
                        color: Colors.white10,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          mainAxisSize: MainAxisSize.max,
                          children: <Widget>[
                            Row(
                              children: <Widget>[
                                Padding(
                                  padding: EdgeInsets.only(left: 5.0,right: 5.0),
                                  child: Container(
                                    height: 50.0,
                                    width: 50.0, //MediaQuery.of(context).size.width,
                                    child: new CircleAvatar(
                                      radius: 50.0,
                                      backgroundColor: Colors.transparent,
                                      backgroundImage: NetworkImage(imageLink),
                                    ),
                                  ),
                                ),
                                Padding(
                                  padding:EdgeInsets.only(top: 5.0,bottom: 5.0),
                                  child: Column(
                                    children: <Widget>[
                                      Column(
                                        children: <Widget>[
                                          Row(
                                            mainAxisSize: MainAxisSize.min,
                                            mainAxisAlignment: MainAxisAlignment.start,
                                            children: <Widget>[
                                              Text('$fname'+' $lname',style: TextStyle(fontSize: 20.0),textAlign: TextAlign.start,),
                                            ],
                                          ),
                                          Row(
                                            mainAxisSize: MainAxisSize.min,
                                            mainAxisAlignment: MainAxisAlignment.start,
                                            children: <Widget>[
                                              Text('$postdate'),
                                            ],
                                          ),
                                        ],
                                      ),
                                    ],
                                  ),
                                ),
                              ],
                            ),

                            Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Icon(Icons.more_horiz),
                            )
                          ],
                        ),
                      ),
                      Divider(),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text("$textStatus",
                            style: TextStyle(fontSize: 16.0),
                            maxLines: descTextShowFlag
                                ? MediaQuery.of(context).size.height.toInt()
                                : 5,
                            textAlign: TextAlign.start),
                      ),
                      InkWell(
                        onTap: () {
                          setState(() {
                            descTextShowFlag = !descTextShowFlag;
                          });
                        },
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: <Widget>[
                            //   descTextShowFlag
                            textlength <= 200
                                ? Text(
                              "",
                              style: TextStyle(
                                  fontSize: 16.0, color: Colors.blue),
                            )
                                : descTextShowFlag
                                ? Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Text("Show Less",
                                  style: TextStyle(color: Colors.blue)),
                            )
                                : Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Text("Show More",
                                  style: TextStyle(color: Colors.blue)),
                            )
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              );
            }),
      ),
    );
  }
}