如何根据文本大小扩展文本和容器？答案

【问题标题】：How expand text and container according text size?如何根据文本大小扩展文本和容器？
【发布时间】：2019-01-17 12:43:24
【问题描述】：

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

我尝试按如下方式创建卡片，其中DescriptionText 是链接上的小部件，并在容器中指定 minHeight 以希望将容器与文本一起扩展，但没有奏效。

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

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

【问题讨论】：

标签： dart flutter

【解决方案1】：

只需使用Wrap 小部件来包装您的卡片小部件。

根据您的link 建议答案。我确实更改为使用 Wrap 小部件。

只需复制/粘贴下面的代码并检查。

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

结果：

【讨论】：

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

【解决方案2】：

我能想到的解决方案是使用两个标签，一个只显示一行文本，一个显示所有文本。单击按钮时，两个标签以动画方式交替显示。暂时没有电脑，不方便验证，希望在程序的实现上给大家一些帮助。

【讨论】：