BoxConstraints 的最小宽度为负

Question

在此类中作为一个小部件，我使用动画来显示和隐藏，当我通过单击多次显示或隐藏时，有时会收到此错误：

BoxConstraints 的最小宽度为负。违规约束为：BoxConstraints(w=-0.8, 0.0<=h<=Infinity; NOT NORMALIZED)

这部分代码有问题

child: Row( //<--- problem cause on this line of code
   children: <Widget>[
      ...
   ],
),

我的班级代码：

class FollowingsStoryList extends StatefulWidget {
  final List<Stories> _stories;

  FollowingsStoryList({@required List<Stories> stories}) : _stories = stories;

  @override
  _FollowingsStoryListState createState() => _FollowingsStoryListState();
}

class _FollowingsStoryListState extends State<FollowingsStoryList> with TickerProviderStateMixin {
  List<Stories> get stories => widget._stories;
  bool _isExpanded = false;
  AnimationController _barrierController;

  @override
  void initState() {
    super.initState();
    _barrierController = AnimationController(duration: const Duration(milliseconds: 400), vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      curve: _isExpanded ? Curves.elasticOut : Curves.elasticIn,
      duration: Duration(milliseconds: 800),
      child: Row(
        children: <Widget>[
          AnimatedContainer(
            curve: _isExpanded ? Curves.elasticOut : Curves.elasticIn,
            duration: Duration(milliseconds: 800),
            width: _isExpanded ? 90 : 1,
            color: Colors.white,
            padding: EdgeInsets.only(bottom: 65.0),
            child: Column(
              children: <Widget>[
              ],
            ),
          ),
          GestureDetector(
            onTap: _toggleExpanded,
            child: StoriesShapeBorder(
              alignment: Alignment(1, 0.60),
              icon: Icons.adjust,
              color: Colors.white,
              barWidth: 4,
            ),
          ),
        ],
      ),
    );
  }

  _toggleExpanded() {
    setState(() {
      _isExpanded = !_isExpanded;
      if (_isExpanded) {
        _barrierController.forward();
      } else {
        _barrierController.reverse();
      }
    });
  }
}

Answer 1

因为Curves.elasticOut和Curves.elasticIn是

振荡曲线，其幅度增大/缩小，同时超出 其界限。

当_isExpanded为 false 时，您预计宽度会从 90 变为 1，但Curves.elasticOut会在短时间内过冲并变得远小于 1（因此为负宽度）。

这就是导致错误的原因。另外，你为什么要嵌套AnimatedContainers？顶部AnimatedContainer似乎没有必要。

尝试去掉顶部AnimatedContainer并将所有 4 个更改为Curves，Curves.linear我认为您的错误将会消失。实际上你可以使用任何Curves不会超调的东西。

如果您确实需要弹性曲线，那么也许这也可以：

@override
  Widget build(BuildContext context) {
    return Row(
        children: <Widget>[
          AnimatedContainer(
            curve: _isExpanded ? Curves.elasticOut : Curves.easeInSine,
            duration: Duration(milliseconds: 800),
            width: _isExpanded ? 90 : 1,
            color: Colors.white,
            padding: EdgeInsets.only(bottom: 65.0),
            child: Column(
              children: <Widget>[
              ],
            ),
          ),
          GestureDetector(
            onTap: _toggleExpanded,
            child: StoriesShapeBorder(
              alignment: Alignment(1, 0.60),
              icon: Icons.adjust,
              color: Colors.white,
              barWidth: 4,
            ),
         ),
       ],
    );
  }

尝试一下并告诉我。