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

标签： flutterdart

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