AnimatedSize 裁剪小部件答案

【问题标题】：AnimatedSize clipping the widgetAnimatedSize 裁剪小部件
【发布时间】：2020-07-29 16:49:23
【问题描述】：

我正在创建一个底部导航栏。当应用启动时，默认选择的导航选项卡会扩展，如 gif 所示。

问题是当AnimatedSize 开始动画时，边框会被切断。因此，容器的边界半径看起来不太好。我不认为我在剪裁视图。我错过了什么？

AnimatedSize(
  curve: Curves.ease,
  child: new Container(
    padding: EdgeInsets.symmetric(vertical: _topPadding),
    alignment: Alignment.center,
    child: Container(
      width: _width,
      height: _height,
      decoration: BoxDecoration(
          color: _service.settings.color,
          border: Border.all(color: Colors.red, width: 5),
          borderRadius: BorderRadius.all(Radius.circular(5)),
          boxShadow: [BoxShadow(offset: Offset(0, 3), blurRadius: 6, color: const Color(0xff000000).withOpacity(0.16))]),
    ),
  ),
  vsync: this,
  duration: _service.animationDuration,
),

main.dart

return Container(
  height: kBottomNavigationBarHeight,
  child: Stack(
    children: [
      if (service.isBottomSlideVisible) SlideBox(),
      Container(
        alignment: Alignment.center,
        child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: service.items
                .map((e) => NavItem(
                      e,
                      onTab: () {
                        var index = service.items.indexOf(e);
                        service.setSelected(index);
                        _updateIndex(index);
                      },
                    ))
                .toList()),
      )
    ],
  ),
);

【问题讨论】：

这可能有助于flutter.dev/docs/cookbook/animation/animated-container

标签： flutter flutter-layout flutter-animation

【解决方案1】：

1. 用Container 包裹AnimatedSize 并为Container 添加边框。

2.将Container的高度设置为_height。

3. 将_topPadding 的上边距添加到Container。

4.将AnimatedPositioned的left参数减去Container的边框宽度，使内容居中。

5.去除内部Container的边框。

AnimatedPositioned(
            left: _posX - _sizeFactor - 5,
            child: Container(
              height: _height,
              margin: EdgeInsets.only(top: _topPadding),
              decoration: BoxDecoration(
                  color: _service.settings.color,
                  border: Border.all(color: Colors.red, width: 5),
                  borderRadius: BorderRadius.all(Radius.circular(5)),
                  boxShadow: _service.settings.shadow ??
                      [
                        BoxShadow(
                            offset: Offset(0, 3),
                            blurRadius: 6,
                            color: const Color(0xff000000).withOpacity(0.16))
                      ]),
              child: AnimatedSize(
                curve: Curves.ease,
                child: new Container(
                  padding: EdgeInsets.symmetric(vertical: _topPadding),
                  alignment: Alignment.center,
                  child: Container(
                    width: _width,
                    height: _height,
                  ),
                ),
                vsync: this,
                duration: _service.animationDuration,
              ),
            ),
            duration: _service.animationDuration,
            curve: Curves.easeOutCirc,
          ),

结果：

【讨论】：