Question

我正在制作一个可扩展的textview，它能够呈现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

您可以尝试AnimatedSwitcher

一些可能对您有帮助的链接

https://www.youtube.com/watch?v=2W7POjFb88g https://medium.com/flutter-community/flutter-animated-series-animated-opacity-c11137883a8d

https://medium.com/flutter-community/animated-widgets-in-flutter-763fd5dd6d01

Answer 2

您可以使用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,
        ),
    ),
),

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

2 个答案: