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