flutter - 如何在 flutter 中为 RichText 小部件的 maxlines 属性设置动画

Question

我正在制作一个能够呈现 html 和 css 的可扩展 TextView 。我已经搞定了。但现在我不知道如何动画 小部件展开。

我通过设置 _maxLines 的状态展开小部件>

return Column(
          children: <Widget>[
            RichText(
              overflow: TextOverflow.ellipsis,
              maxLines: _maxLines,
              text: HTML.toTextSpan(context,
                  widget.htmlContent),
            ),
            FlatButton(
              child: Text(_buttonText),
              onPressed: () {
                setState(() {
                  if(_maxLines == 5){
                    setState(() {
                      _maxLines = 15;
                    });
                  } 
                });
              },
            )
          ],
        );

Answer 1

您可以使用 AnimatedCrossFade在两个 View 之间切换的小部件。

GestureDetector(
    onTap: () => {setState(() => _showFullText = !_showFullText)},
    child: AnimatedCrossFade(
        duration: Duration(milliseconds: 200),
        crossFadeState: _showFullText ? CrossFadeState.showFirst : CrossFadeState.showSecond,
        firstChild: Text(
            text,
        ),
        secondChild: Text(
            text,
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
        ),
    ),
),