Question

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

我尝试如下创建卡，其中DescriptionText是链接上的Widget，并在Container中指定一个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(),
        )
      ],
    );
  }

如果有人可以帮助我，我将非常感谢。

Answer 1

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

根据您的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;
                      });
                    },
                  ),
                ],
              )),
        ),
      ],
    );
  }
}

结果：

Answer 2

我能想到的解决方案是使用两个标签，一个用于仅显示一行文本，另一个用于显示所有文本。单击该按钮时，两个标签以动画方式交替显示。目前没有电脑，验证不方便，希望对您的程序执行有所帮助。

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

2 个答案: