如何在 flutter 中对 RichText 小部件的 maxlines 属性进行动画处理

Question

我正在制作一个可扩展的文本视图，它能够渲染 html 和 css。我已经把一切都搞定了。但现在我不知道如何为小部件扩展设置动画。

我通过设置状态来扩展小部件_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小部件在两个视图之间切换。

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,
        ),
    ),
),