Dart 如何根据文本大小展开文本和容器？

我正在尝试创建一张包含容器中文本的卡片，但我只想显示部分文本，当用户单击“显示更多”时，显示其余文本。我看到了一个小部件来构造这样的文本，但是我也需要扩展卡片容器，我不知道怎么做，因为我需要知道文本必须扩展多少行，以正确的大小。是否存在根据行数或字符数计算大小的方法

我尝试如下创建卡片，其中

descriptionContext

是链接上的小部件，并在容器中指定一个最小高度，希望将容器与文本一起展开，但没有成功

Widget _showAnswerCard(Answer answer, User user) {
    return Card(
        elevation: 3.0,
        color: Theme.of(context).backgroundColor,
        child: Container(
          constraints: BoxConstraints(minHeight: 90),
          padding: EdgeInsets.all(10.0),
          child: Flex(
            direction: Axis.horizontal,
            children: <Widget>[
              Expanded(flex: 1, child: _showUserAvatar(answer)),
              Expanded(flex: 3, child: _showAnswerDetails(answer, user)),
            ],
          ),
        ));
  }

  Widget _showAnswerDetails(Answer answer, User user) {
    return Flex(
      direction: Axis.vertical,
      children: <Widget>[
        Expanded(
          flex: 3,
          child: DescriptionTextWidget(text: answer.content),
        ),
        Expanded(
          flex: 1,
          child: _showAnswerOptions(),
        )
      ],
    );
  }

Widget\u显示应答卡（应答，用户）{
回程卡(
标高：3.0，
颜色：主题。背景色，
子：容器(
约束：框约束（最小高度：90），
填充：所有边缘设置（10.0），
孩子：Flex(
方向：水平轴，
儿童：[
扩展（flex:1，child:_showUserAvatar（答案）），
扩展（flex:3，子项：_showAnswerDetails（答案，用户）），
],
),
));
}
Widget\u showAnswerDetails（答案、用户）{
回程伸缩(
方向：轴垂直，
儿童：[
扩大(
弹性：3，
子：DescriptionTextWidget（文本：answer.content），
),
扩大(
弹性：1，
子项：_showAnswerOptions（），
)
],
);
}

---

如果有人能帮我，我将不胜感激。

我能想到的解决方案是使用两个标签，一个只显示一行文本，另一个显示所有文本。单击按钮时，两个标签以动画方式交替显示。目前没有计算机，验证不方便，希望在程序的实施过程中给您一些帮助。

只需使用widget包装您的卡片widget即可

基于您的建议答案。我确实改为使用

Wrap

小部件

JU复制/粘贴以下代码并检查

import 'package:flutter/material.dart';

class ProductDetailPage extends StatelessWidget {
  final String description =
      "Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.";

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: const Text("Demo App"),
      ),
      body: new Container(
        child: new DescriptionTextWidget(text: description),
      ),
    );
  }
}

class DescriptionTextWidget extends StatefulWidget {
  final String text;

  DescriptionTextWidget({@required this.text});

  @override
  _DescriptionTextWidgetState createState() =>
      new _DescriptionTextWidgetState();
}

class _DescriptionTextWidgetState extends State<DescriptionTextWidget> {
  bool flag = true;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: <Widget>[
        Card(
          margin: EdgeInsets.all(8),
          child: Container(
              padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
              child: Column(
                children: <Widget>[
                  Container(
                    child: Text(
                      widget.text,
                      overflow: flag ? TextOverflow.ellipsis : null,
                      style: TextStyle(
                        fontSize: 15,
                      ),
                    ),
                  ),
                  InkWell(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: <Widget>[
                        Text(
                          flag ? "show more" : "show less",
                          style: new TextStyle(color: Colors.blue),
                        ),
                      ],
                    ),
                    onTap: () {
                      setState(() {
                        flag = !flag;
                      });
                    },
                  ),
                ],
              )),
        ),
      ],
    );
  }
}

导入“包装：颤振/材料.省道”；
类ProductDetailPage扩展了无状态小部件{
最终字符串描述=
“Flatter是谷歌的移动用户界面框架，用于在创纪录的时间内在iOS和Android上制作高质量的本机界面。Flatter与现有代码一起工作，被世界各地的开发人员和组织使用，并且是免费和开源的。”；
@凌驾
小部件构建（构建上下文）{
归还新脚手架(
appBar：新的appBar(
标题：const Text（“演示应用程序”），
),
主体：新容器(
子：新的DescriptionTextWidget（文本：description），
),
);
}
}
类DescriptionTextWidget扩展StatefulWidget{
最终字符串文本；
DescriptionTextWidget（{@required this.text}）；
@凌驾
_DescriptionTextWidgetState createState（）=>
新的_DescriptionTextWidgetState（）；
}
类_DescriptionTextWidgetState扩展状态{
布尔标志=真；
@凌驾
void initState（）{
super.initState（）；
}
@凌驾
小部件构建（构建上下文）{
回程包装(
儿童：[
卡片(
保证金：全部（8），
子：容器(
填充：边缘组。对称（水平：10.0，垂直：10.0），
子：列(
儿童：[
容器(
子：文本(
widget.text，
溢出：标志？文本溢出。省略号：null，
样式：TextStyle(
尺寸：15，
),
),
),
墨水池(
孩子：排(
mainAxisAlignment:mainAxisAlignment.end，
儿童：[
正文(
标志“显示更多”：“显示更少”，
样式：新文本样式（颜色：Colors.blue），
),
],
),
onTap:（）{
设置状态（）{
flag=！flag；
});
},
),
],
)),
),
],
);
}
}

结果：

---

天哪，谢谢！我不知道这个小部件，你真的救了我的命