AnimatedSize 裁剪小部件

Question

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

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

slide_box.dart

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

主要.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()),
      )
    ],
  ),
);

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

结果：