flutter - BoxConstraints 的最小宽度为负

Question

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

BoxConstraints has a negative minimum width.The offending constraints were: BoxConstraints(w=-0.8, 0.0<=h<=Infinity; NOT NORMALIZED)

这部分代码有问题

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

我的类(class)代码:

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是

oscillating curves that grows/shrinks in magnitude while overshooting its bounds.

当 _isExpanded是假的，您希望宽度从 90 变为 1，但是 Curves.elasticOut过冲并在短时间内变得远小于 1(因此为负宽度)。

这就是导致错误的原因恕我直言。另外你是什么原因嵌套的 AnimatedContainer ?顶部 AnimatedContainer似乎没有必要。

尝试摆脱顶部 AnimatedContainer并更改 Curves 的所有 4 个至 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,
            ),
         ),
       ],
    );
  }

试试吧，让我知道。