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

Question

我正在尝试在容器中创建一个带有文本的卡片，但我只想显示部分文本，当用户点击“显示更多”时，显示其余部分。我看到一个 Widget 来构建这样的文本 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小部件来包装您的卡片小部件。

基于您的 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;
                      });
                    },
                  ),
                ],
              )),
        ),
      ],
    );
  }
}

结果: